Search

Generale #

Per incorporare il tuo codice di incorporamento per Live Search o Search Page, dovrai accedere ai file del tuo tema. Per fare ciò, segui il percorso Tema > file del tema > i miei temi > scegli > modifica temi > trova file

Live Search #

• Prima di tutto, crea il tuo Design e Contenuto per Live Search in my.clerk.io.

• Nel tuo file header o nel file header di live-search (probabilmente header.html o, in questo esempio, header-search.html), il codice di incorporamento di Live Search dovrebbe essere posizionato.

• Assicurati di aggiornare il segnaposto all’interno di “data-instant-search” per includere la classe o l’ID della query utilizzata nel tuo webshop (in questo esempio, “#search_query_adv”).

Search Page #

• Prima di tutto, crea il tuo Design e Contenuto per la Search Page in my.clerk.io.

• Nel tuo file della search page (probabilmente search.html), il codice di incorporamento della Search Page dovrebbe essere posizionato.

• Assicurati di aggiornare il segnaposto all’interno di “data-query” per includere la query utilizzata nell’URL dei risultati di ricerca (in questo esempio, “forms.search.query”).

Facets #

Clerk.js viene fornito con supporto integrato per la Ricerca Faccettata.

Qualsiasi attributo di prodotto che invii a Clerk.io può essere utilizzato come parte della Ricerca Faccettata.

Iniziamo con un esempio veloce:

<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":"Categorie","manufacturer":"Marca","gender":"Genere"}'
  data-facets-design='12234'>
</span>

Le parti data-facets- ti consentono di abilitare e personalizzare la Ricerca Faccettata.

Aggiungendo questi al tuo codice di incorporamento della Search Page, le faccette verranno visualizzate non appena vengono mostrati i risultati.

Di seguito, puoi vedere cosa fa ciascuna parte:

Stile delle Facets #

Le faccette vengono fornite con uno stile semplice di base. Per modificarlo, utilizza semplicemente i selettori CSS (maggiori informazioni sullo stile delle faccette qui, per aggiungere qualsiasi stile personalizzato.

Aggiungere Facets al tuo Negozio BigCommerce #

Per aggiungere faccette alla tua Search Page all’interno del tuo webshop BigCommerce, aggiungi semplicemente gli attributi di dati appropriati al tuo codice di incorporamento della Search Page che hai copiato nel file in cui si trova la tua Search Page, probabilmente search.html.

Ad esempio:

Puoi anche aggiungere qualsiasi stile CSS allo stesso file. Assicurati di racchiudere tutto il CSS delle faccette con i tag: