Facets

Esta función de filtrado inteligente facilita que los visitantes encuentren los artículos correctos, incluso en los conjuntos más grandes de resultados de búsqueda.

Facets pueden utilizarse tanto en los diseños de la Search Page como en Omnisearch. Ambos cuentan con varios diseños estándar para que puedas comenzar con una excelente experiencia de búsqueda.

Atributos Dinámicos #

Cuando tus productos incluyen varios conjuntos de atributos, Facets solo mostrará los filtros que sean 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 las búsquedas de “headphones” incluirán su tipo de ajuste, funcionalidades bluetooth, características de EQ 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.

Rangos Automáticos #

Los atributos que sean 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 de cada conjunto de resultados. Por ejemplo, si un conjunto contiene productos con precios entre €10 y €150, los intervalos probablemente oscilarán entre €10-€30 y €140+.

Por defecto, así se gestionan los precios.

Para desarrolladores #

Facets forman parte del kit de UI de Clerk.js que facilita agregar funcionalidad a tu sitio.

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

Para la Search Page, se integran directamente en el fragmento 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 en Liquid #

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

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

• facet_groups (array): todos los grupos de facet disponibles para la consulta actual.
• facet_group.name: clave interna del facet (por ejemplo, _price_range, brand, categories).
• facet_group.title: título legible que se muestra a los usuarios.
• facet_group.selected_count: cuántas opciones están actualmente seleccionadas en el grupo.
• facet_group.facets (array): todas las opciones en ese grupo.
• facet.value: etiqueta/valor para la opción.
• facet.selected: si esta opción está activa actualmente.
• facet.count: cantidad de resultados para la opción.
• facet.min / facet.max: límites numéricos del rango (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 %}

Parámetros #

Facets consisten en dos parámetros que se agregan al snippet:

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

Filtrado por URL #

Quizás quieras enviar páginas de búsqueda pre-filtradas en tus campañas de marketing, y Facets lo hace muy sencillo. Simplemente agregando el parámetro data-facets-in-url a tu snippet de la 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