Search

General #

Para incorporar tu código de inserción para Live Search o Search Page, necesitarás acceder a los archivos de tu tema. Para hacer esto, sigue la ruta Tema > archivos del tema > mis temas > elegir > editar temas > encontrar archivos

Live Search #

• Primero, crea tu diseño y contenido de Live Search en my.clerk.io.

• En tu archivo de encabezado o archivo de encabezado de live-search (probablemente header.html o, en este ejemplo, header-search.html), se debe colocar el código de inserción de Live Search.

• Asegúrate de actualizar el marcador de posición dentro de “data-instant-search” para incluir la clase o ID de consulta utilizada en tu tienda en línea (en este ejemplo, “#search_query_adv”).

Search Page #

• Primero, crea tu diseño y contenido de Search Page en my.clerk.io.

• En tu archivo de página de búsqueda (probablemente search.html), se debe colocar el código de inserción de Search Page.

• Asegúrate de actualizar el marcador de posición dentro de “data-query” para incluir la consulta utilizada en la URL de tus resultados de búsqueda (en este ejemplo, “forms.search.query”).

Facets #

Clerk.js viene con soporte integrado para Búsqueda Facetada.

Cualquier atributo de producto que envíes a Clerk.io puede ser utilizado como parte de la Búsqueda Facetada.

Comencemos con un ejemplo rápido:

<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":"Categorías","manufacturer":"Marca","gender":"Sexo"}'
  data-facets-design='12234'>
</span>

Las partes de data-facets- te permiten habilitar y personalizar la Búsqueda Facetada.

Al agregar estos a tu código de inserción de Search Page, los facetas se mostrarán tan pronto como se muestren los resultados.

A continuación, puedes ver lo que hace cada parte:

Estilizando Facets #

Los facets vienen con un estilo simple por defecto. Para alterar esto, simplemente utiliza selectores CSS (más sobre el estilo de facets aquí, para agregar cualquier estilo personalizado.

Agregando Facets a tu tienda BigCommerce #

Para agregar facets a tu Search Page dentro de tu tienda BigCommerce, simplemente agrega los atributos de datos apropiados a tu código de inserción de Search Page que copiaste en el archivo donde vive tu Search Page, probablemente search.html.

Por ejemplo:

También puedes agregar cualquier estilo CSS al mismo archivo. Asegúrate de rodear todo el CSS de facets con las etiquetas: