Facets

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

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

Dynamic Attributes #

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

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 según cada conjunto de resultados. Por ejemplo, si un conjunto contiene productos con precios entre 10 € y 150 €, es probable que los intervalos vayan de 10 €-30 € y 140 € y más.

Por defecto, así es como se manejan los precios.

For developers #

Facets es parte del kit de interfaz de Clerk.js que facilita agregar funcionalidad a tu sitio.

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

Para la Search Page, se integra 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 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 1:1 del formato bruto de respuesta de la API, así que al construir la interfaz de Facets en un diseño, utiliza los siguientes campos de Liquid:

• 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 mostrado a los usuarios.
• 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 para la opción.
• facet.selected: si esta opción está actualmente activada.
• facet.count: número de resultados para la opción.
• facet.min / facet.max: límites de rango numérico (principalmente relevante para Facets del 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 consta de dos parámetros que se agregan al fragmento:

• data-facets-attributes: Una lista de atributos que tienen el potencial de mostrarse en las búsquedas donde son 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 consulta, los facets seleccionados se eliminan y la nueva búsqueda comienza sin filtros.

Al agregar data-facets-persistent-filter="true" al fragmento, este comportamiento cambia: los facets seleccionados se recuerdan y se aplican automáticamente con cada nueva consulta, por lo que las elecciones de filtro del visitante se mantienen mientras afinan su término de búsqueda.

<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 de búsqueda donde los visitantes suelen navegar dentro de una categoría o marca — por ejemplo, buscando dentro de “Nike” y refinando la consulta varias veces mientras se mantiene ese filtro de marca activo.

URL Filtering #

Puede que desees enviar páginas de búsqueda prefiltradas en tu marketing, y Facets lo hace muy fácil. Simplemente agregando el parámetro data-facets-in-url al fragmento de tu página de categoría, los facets se agregará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