Bigcommerce

Search

Generale #

Per incorporare il codice embed per Live Search o Search Page, è necessario accedere ai file del tema. Per farlo, seguite 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 inclusione di Live Search.

  • Assicuratevi di aggiornare il segnaposto all’interno di “data-instant-search” per includere la classe o l’ID della query utilizzata nel vostro 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 di incorporamento 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”).

Sfaccettature #

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

Tutti gli attributi del prodotto inviati a Clerk.io possono essere utilizzati 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 al codice incorporato della pagina di ricerca, le sfaccettature verranno 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, è sufficiente usare i selettori CSS (maggiori informazioni sullo stile delle faccette qui, per aggiungere uno stile personalizzato.

Aggiunta di sfaccettature al negozio BigCommerce #

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

Per esempio:

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