Facets

Esta función de filtrado inteligente facilita a los visitantes encontrar los artículos adecuados, incluso en los conjuntos más grandes de resultados de Search.

Facets se puede utilizar tanto en los diseños de Search Page como en Omnisearch. Ambos cuentan con varios diseños estándar para ayudarte a comenzar con una excelente experiencia de Search.

Dynamic Attributes #

Cuando tus productos incluyen varios conjuntos de atributos, Facets mostrará solo los filtros relevantes para cada búsqueda individual.

Por ejemplo, una búsqueda de “laptops” probablemente mostrará especificaciones como RAM, espacio de almacenamiento, tamaño de pantalla, etc., mientras que búsquedas de “headphones” incluirán su ajuste, funcionalidades bluetooth, características de ecualización y más.

Asegúrate de importar solo los atributos relevantes para cada producto en tu catálogo, y Facets será dinámico para cada búsqueda.

Automatic ranges #

Los atributos que son números serán reconocidos por facets y se mostrarán como una combinación de un selector de rango y varios rangos predefinidos.

Estos son dinámicos y cambiarán dependiendo del conjunto de resultados. Por ejemplo, si un conjunto contiene productos que tienen precios entre 10 € y 150 €, los intervalos probablemente estarán entre 10-30 € y 140 € o más.

De forma predeterminada, así es como se gestionan los precios.

Facet order #

Puedes cambiar el orden de los atributos de Facets en las tablas del editor de facets y en la lista de facets de un Element según su diseño o configuración de inserción.

Arrastra el controlador punteado de un atributo y muévelo a la posición que desees. Un recuadro punteado te mostrará dónde caerá. Suelta la fila para moverla. También puedes enfocar una fila y presionar Alt + ↑ o Alt + ↓; los lectores de pantalla anunciarán el movimiento.

Esto controla el orden de los atributos de facets, como mostrar la marca antes que el precio. Usa la configuración Sort a continuación para controlar los valores dentro de cada facet.

Sort facet values #

Puedes controlar el orden de los valores dentro de cada facet directamente en my.clerk.io. En la configuración de Facets, selecciona una opción en la columna Sort para cada atributo.

• Most Popular Products ordena los valores según la popularidad de los productos.
• Numeric ordena los atributos basados en números.
• A–Z ordena alfabéticamente los atributos de tipo string, como las categorías.

For developers #

Facets forma parte del kit de interfaz Clerk.js que facilita la incorporación de funcionalidad a tu sitio.

Para Omnisearch, Facets se configura en my.clerk.io.

Para Search Page, se integran directamente en el snippet que muestra los resultados:

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
  data-template="@search-page" 
  data-query="shoes"
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE_LABEL", "categories": "CATEGORIES_LABEL", "brand": "BRAND_LABEL"}'
  data-facets-in-url="true">
</span>

Facets in Liquid #

En los diseños de Search Page y Omnisearch, facets se expone en Liquid como facet_groups.

Esta estructura no siempre es una copia exacta del formato de respuesta cruda de la API, así que al construir la interfaz de facets en un diseño, utiliza los campos Liquid siguientes:

• facet_groups (array): todos los grupos de facets disponibles para la consulta actual.
• facet_group.name: clave interna del facet (por ejemplo _price_range, brand, categories).
• facet_group.title: título legible para el usuario.
• facet_group.selected_count: cuántas opciones están seleccionadas actualmente en el grupo.
• facet_group.facets (array): todas las opciones en ese grupo.
• facet.value: etiqueta/valor de la opción.
• facet.selected: si esta opción está activa actualmente.
• facet.count: número de resultados para la opción.
• facet.min / facet.max: límites del rango numérico (principalmente relevante para facets de tipo _price_range).

Ejemplo:

{% for facet_group in facet_groups %}
  <div class="clerk-facet-group" data-facet-group="{{ facet_group.name }}">
    <div class="clerk-facet-group-title">
      {{ facet_group.title }}
      {% if facet_group.selected_count > 0 %}
        <span>({{ facet_group.selected_count }})</span>
      {% endif %}
    </div>

    <div class="clerk-facet-group-facets">
      {% for facet in facet_group.facets %}
        {% if facet.value != 'false' %}
          <div
            class="clerk-facet {% if facet.selected %}clerk-facet-selected{% endif %}"
            data-facet="{{ facet_group.name }}"
            data-value="{{ facet.value }}">
            {{ facet.value }} ({{ facet.count }})
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endfor %}

Parameters #

Facets consiste en dos parámetros que se añaden al snippet:

• data-facets-attributes: Una lista de atributos que pueden ser mostrados en las búsquedas donde sean relevantes.
• data-facets-titles: Un array de atributos y títulos asociados que configura cómo se muestran a los usuarios finales.

Persistent Filters #

Por defecto, cuando un visitante selecciona un facet y luego escribe una nueva búsqueda, los facets seleccionados se eliminan y la nueva búsqueda comienza sin filtrar.

Agregar data-facets-persistent-filter="true" al snippet cambia este comportamiento: los facets seleccionados se recuerdan y se vuelven a aplicar automáticamente con cada nueva búsqueda, por lo que las opciones de filtro del visitante permanecen al refinar su término de Search.

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
  data-template="@search-page" 
  data-query="shoes"
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "Price", "categories": "Categories", "brand": "Brand"}'
  data-facets-in-url="true"
  data-facets-persistent-filter="true">
</span>

Esto es útil en páginas Search donde los visitantes suelen navegar dentro de una categoría o marca; por ejemplo, buscando dentro de “Nike” y luego refinando la consulta varias veces manteniendo activo ese filtro de marca.

URL Filtering #

Quizás quieras enviar páginas de búsqueda prefiltradas en tu marketing, y Facets lo hace muy sencillo. Simplemente agregando el parámetro data-facets-in-url al snippet de tu página de categoría, facets se añadirán a la URL.

Cuando abras la URL, los facets ya estarán seleccionados:

https://awesomestore.com/sneakers?brand=nike&size=42

Puedes leer más sobre los aspectos técnicos de Facets en nuestra documentación para desarrolladores