Search

Aggiungi una potente funzionalità di ricerca al tuo webshop DanDomain. Clerk.io offre due soluzioni di ricerca complementari:

• Un menu a discesa Instant Search che mostra i risultati mentre i clienti digitano.
• Una Search Page con filtri a faccette per sfogliare tutti i risultati.

Instant Search #

Instant Search fornisce risultati in tempo reale mentre i clienti digitano, visualizzati in un menu a discesa sotto il campo di ricerca.

Crea un Design #

Usa il Design Editor o code designs.

Design Editor #

1. Vai su Search > Designs e clicca su New Design.
2. Scegli Other designs > Instant Search.
3. Seleziona un template da cui partire.
4. Assegnagli un nome e clicca su Create design.
5. Modifica il design secondo le tue esigenze.

Code Design #

1. Vai su Search > Designs e clicca su New Design.
2. Scegli Other designs > Blank > With code.
3. Assegnagli un nome e clicca su Save.
4. Crea un design tramite codice usando Liquid.

Crea Elemento #

1. Vai su Search > Elements.
2. Clicca su New Element.
3. Assegnagli il nome “Live Search”.
4. In Element type, seleziona Live-search.
5. In Design, seleziona il design che hai creato.
6. Clicca su Save.

Aggiungi al Sito Web #

1. Nell’Admin DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer > partials.
2. Apri il file body.tpl.
3. Inserisci il seguente codice e clicca su Gem.

<span class="clerk" 
    data-template="@live-search" 
    data-instant-search=".top-search-form .form-input" 
    data-instant-search-positioning="left"
    data-instant-search-categories="6"
    data-instant-search-pages="6"
    data-instant-search-suggestions="6">
</span>

Risoluzione dei Problemi #

Se il tuo Instant Search non compare, probabilmente è perché il tuo campo di ricerca ha un identificativo diverso da quello predefinito.

1. Ispeziona il campo di ricerca dal browser e individua la classe o l’ID univoco.
2. Sostituisci il selettore in data-instant-search con la classe o l’ID del tuo campo di input.

Search Page #

La Search Page offre un’esperienza di ricerca a pagina intera con filtri avanzati.

Crea un Design #

Usa il Design Editor o code designs.

Design Editor #

1. Vai su Search > Designs e clicca su New Design.
2. Scegli Other designs > Search Page.
3. Seleziona un template da cui partire.
4. Assegnagli un nome e clicca su Create design.
5. Modifica il design secondo le tue esigenze.

Code Design #

1. Vai su Search > Designs e clicca su New Design.
2. Scegli Other designs > Blank > With code.
3. Assegnagli un nome e clicca su Save.
4. Crea un design tramite codice usando Liquid.

Crea Elemento #

1. Vai su Search > Elements.
2. Clicca su New Element.
3. Assegnagli il nome “Search Page”.
4. In Element type, seleziona Search page.
5. In Design, seleziona il design che hai creato.
6. Clicca su Save.

Aggiungi al Sito Web #

In DanDomain, il file product-list-js-entity.tpl genera sia la Search Page sia le Category Pages. È necessario utilizzare un’istruzione IF per separarle.

1. Nell’Admin DanDomain, vai su Online Store > Design > Aktive designs > Rediger filer.
2. Apri modules > product > product-list-js-entity.tpl.
3. Inserisci il seguente codice all’inizio del file, vicino alla riga 35:

{if $field == 'search'}
 
<div class="page-width clerk-page-width">
<span
    id="clerk-search"
    class="clerk"
    data-template="@search-page"
    data-target="#clerk-search-results"
    data-query="{$itemId}"
    data-facets-attributes='["price","categories","vendor"]'
    data-facets-titles='{"price":"Price","categories":"Categories"}'
    data-facets-target="#clerk-search-filters"
    data-facets-price-prepend="€"
    data-facets-in-url="false"
    data-facets-view-more-text="View More"
    data-facets-searchbox-text="Search for "> 
</span>
 
<div id="clerk-show-facets" onclick="toggleFacets()">Filters</div>
 
<div class="clerk_flex_wrap">
  <div id="clerk-facets-container">
    <div id="clerk-search-filters"></div>
  </div>
  <div id="clerk-search-results"></div>
</div>
 
<script>
function toggleFacets(){
  el = document.getElementById('clerk-facets-container');
  el.classList.toggle('active');
}
</script>
 
 
<style>
  #clerk-show-facets {
      width: 70%; 
      height: 40px;
      margin: 20px auto; 
      background-color: #333;
      color: white;
      text-align: center;
      border-radius: 2px;
      line-height: 40px;
  }
 
  #clerk-search-results {
      display: block;
      width: 100%;
  }
 
  .clerk-page-width {
      display: flow-root;
  }
 
  #clerk-search-results {
      width: 80%;
  }
 
  #clerk-search-filters {
      width: 20%;
  }
 
  #clerk-show-facets {
      display: none;
  }
  .clerk_flex_wrap {
      display: flex;
      flex-direction: row;
  }
 
  .active {
    display: block !important;
  }
 
  @media only screen and (max-width : 800px) {
    #clerk-search-filters {
      width: 100%;
    }
 
    #clerk-facets-container {
      display: none;
    }
    #clerk-show-facets {
        display: block;
    }
    .clerk_flex_wrap {
      flex-direction: column;
    }
  }
</style>
</div>
 
{else}

4. All’estrema fine del file, inserisci l’istruzione di chiusura IF:

{/if}

5. Clicca su Gem per salvare le modifiche.

Facets #

Clerk.js include la ricerca a faccette integrata per la Search Page. Qualsiasi attributo prodotto inviato a Clerk.io può essere usato come filtro.

Per abilitare le faccette, aggiungi gli attributi delle faccette al tuo embed code (come mostrato nell’esempio sopra). Puoi stilizzare le faccette usando CSS nello stesso file.

Per una panoramica completa, consulta la Guida alle Facets.