Search

Instant Search #

Questa sezione vi mostrerà come installare la ricerca live di Clerk.io con tutto ciò che è guidato da Contenuti e progetti.

1. Creare una ricerca Design chiamata “Instant Search”. Iniziare a usare un file predefinito

Ricerca istantanea a discesa a destra predefinito.

2. Creare un blocco di ricerca Contenuto chiamato “Live Search”.

3. Scegliere Ricerca in tempo reale come Logica del prodotto e selezionare il progetto Live-Search.

4. Copiare il codice di incorporamento dalla sezione “Inserisci nel sito web” nel campo in fondo al file che genera tutte le pagine del vostro webshop.

5. Sostituire INSERISCI_RICERCA_INPUT_CSS_SELETTORE_QUI in dati-ricerca-istantanea con la classe o l’ID del campo di ricerca.

6. Ora la ricerca live è legata correttamente al campo di ricerca quando i clienti digitano.

Esempio di codice per la ricerca istantanea

<span class="clerk"
  data-template="@live-search"
  data-instant-search="#search"
  data-live-search-categories="true">
</span>

Pagina di ricerca #

Questa sezione vi mostrerà come installare la pagina di ricerca di Clerk.io con tutto ciò che è guidato da Contenuti e Disegni.

1. Creare una pagina di ricerca Design denominata " Pagina di ricerca" e scegliere l’opzione predefinita

Pagina di ricerca design predefinito.

2. Creare un blocco Contenuto chiamato " Pagina di ricerca".

3. Scegliere Ricerca come Logica del prodotto e selezionare il design della pagina di ricerca.

4. Impostare Numero di prodotti su 40 e scrivere " Risultati della ricerca" come titolo.

5. Copiate il codice qui sotto nel vostro pagina di ricerca.

6. Sostituire il testo INSERISCI_QUERY_QUI in dati-query con una logica per ottenere

la query che i clienti inseriscono dal campo di ricerca.

7. Ora avete Clerk come funzione di ricerca!

Modello di pagina di ricerca dinamica con sfaccettature

<div class="clerk-page-width">
  <span
      id="clerk-search"
      class="clerk"
      data-template="@search-page"
      data-target="#clerk-search-results"
      data-query="INSERT_QUERY_HERE"
      data-facets-attributes='["price","categories","vendor"]'
      data-facets-titles='{"price":"Price","categories":"Categories","vendor":"Brand"}'
      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>

  <placeholder>__PLACEHOLDER_0__</placeholder>
</div>

Sfaccettature #

Impiegato.js è dotato di un supporto integrato per Ricerca sfaccettata.

Qualsiasi attributi del prodotto che ci inviate può essere utilizzato come parte della ricerca sfaccettata.

Cominciamo con un rapido esempio:

<div id="clerk-search-filters"></div>
<div id="clerk-search-results"></div>

<span
  class="clerk"

  data-template="@search-page"
  data-query="shoes"
  data-offset="0"

  data-target="#clerk-search-results"

  data-facets-target="#clerk-search-filters"
  data-facets-attributes='["categories","manufacturer","gender"]'
  data-facets-multiselect-attributes='["categories","manufacturer"]'
  data-facets-titles='{"categories":"Categories","manufacturer":"Brand","gender":"Sex"}'>
</span>

Le parti dati-facet- consentono di abilitare e personalizzare la ricerca sfaccettata.

Aggiungendo queste parti al vostro Codice di ricerca, le sfaccettature saranno visualizzate non appena i risultati saranno mostrati.

Di seguito, è possibile vedere le funzioni di ciascuna parte:

Sfaccettature dello stile #

Facets viene fornito con uno stile semplice. Per modificarlo, basta usare i selettori di CSS, per aggiungere uno stile personalizzato: