Search

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

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

Instant Search #

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

Crea design #

Utilizza il Design Editor o i code designs.

Design Editor #

1. Vai su Search > Designs e fai clic su New Design.
2. Scegli Other designs > Instant Search.
3. Seleziona un template di partenza.
4. Assegna un nome e fai clic su Create design.
5. Modifica il design secondo le necessità.

Code Design #

1. Vai su Search > Designs e fai clic su New Design.
2. Scegli Other designs > Blank > With code.
3. Assegna un nome e fai clic su Save.
4. Crea un design tramite codice utilizzando Liquid.

Crea elemento #

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

Aggiungi al sito #

1. Nell’amministrazione SmartWeb, vai su Online Store > Design > Aktive designs > Rediger filer > partials.
2. Apri il file body.tpl.
3. Inserisci il seguente codice e fai clic 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 l’Instant Search non viene visualizzato, probabilmente il campo di ricerca ha un identificatore diverso rispetto all’impostazione predefinita.

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

Search Page #

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

Crea design #

Utilizza il Design Editor o i code designs.

Design Editor #

1. Vai su Search > Designs e fai clic su New Design.
2. Scegli Other designs > Search Page.
3. Seleziona un template di partenza.
4. Assegna un nome e fai clic su Create design.
5. Modifica il design secondo le necessità.

Code Design #

1. Vai su Search > Designs e fai clic su New Design.
2. Scegli Other designs > Blank > With code.
3. Assegna un nome e fai clic su Save.
4. Crea un design tramite codice utilizzando Liquid.

Crea elemento #

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

Aggiungi al sito #

In SmartWeb, il file product-list-js-entity.tpl genera sia la Search Page sia le Category Pages. È necessario utilizzare una IF-statement per separarle.

1. Nell’amministrazione SmartWeb, vai su Online Store > Design > Aktive designs > Rediger filer.
2. Apri modules > product > product-list-js-entity.tpl.
3. Inserisci il seguente codice nella parte superiore 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. Alla fine del file, inserisci la IF-statement di chiusura:

{/if}

5. Fai clic su Gem per salvare le modifiche.

Facets #

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

Per abilitare le facets, aggiungi gli attributi delle facets nel codice di incorporamento. Puoi personalizzare le facets con CSS nello stesso file.

Per una panoramica completa, consulta la guida alle Facets.