Search

Generale #

Per incorporare il tuo codice di integrazione per Live Search o Search Page, dovrai accedere ai file del tuo tema. Per farlo, 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 integrazione 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 integrazione 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 della tua ricerca (in questo esempio, “forms.search.query”).

Facets #

Clerk.js viene fornito con supporto integrato per la ricerca per faccette.

Qualsiasi attributo di prodotto che invii a Clerk.io può essere utilizzato come parte della ricerca per faccette.

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 permettono di abilitare e personalizzare la ricerca per faccette.

Aggiungendo questi al tuo codice di integrazione 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 default. 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 integrazione 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: