Search

Generale #

Per incorporare il codice embed per Live Search o Search Page, è necessario accedere ai file del tema. Per farlo, seguire il percorso Tema > file del tema > i miei temi > scegli > modifica temi > trova i file

Ricerca dal vivo #

• Per prima cosa, creare il design e il contenuto di Live Search in my.clerk.io.

• Nel file di intestazione o nel file di intestazione di Live Search (probabilmente header.html , o, in questo esempio, header-search.html), va inserito il codice di incorporamento di Live Search.

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

Pagina di ricerca #

• Per prima cosa, creare il design e il contenuto della pagina di ricerca in my.clerk.io.

• Nel file della pagina di ricerca (probabilmente search.html), va inserito il codice incorporato della pagina di ricerca.

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

Faccette #

impiegato.js è dotato di un supporto integrato per la ricerca a faccette.

Qualsiasi attributi del prodotto inviato a Clerk.io 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"}'
  data-facets-design='12234'>
</span>

Le parti data-facets- consentono di abilitare e personalizzare la ricerca a faccette.

Aggiungendo queste parti a Codice di inclusione della pagina di ricerca, le sfaccettature saranno visualizzate non appena verranno mostrati i risultati.

Di seguito, si può vedere cosa fa ciascuna parte:

Sfaccettature di stile #

Facets viene fornito con uno stile semplice. Per modificarlo, basta usare i selettori di CSS (per saperne di più sullo stile delle faccette qui) per aggiungere uno stile personalizzato.

Aggiunta di sfaccettature al negozio BigCommerce #

Per aggiungere le sfaccettature alla pagina di ricerca all’interno del vostro negozio web BigCommerce, è sufficiente aggiungere gli attributi di dati appropriati al codice di incorporamento della pagina di ricerca copiato nel file in cui risiede la pagina di ricerca, probabilmente search.html.

Ad esempio:

È possibile aggiungere allo stesso file qualsiasi CSS di stile. Assicurarsi di circondare tutti i CSS delle sfaccettature con i tag: