Facets

Esta función inteligente de filtrado hace que sea muy fácil para los visitantes encontrar los artículos adecuados, incluso en los conjuntos más grandes de resultados de Search.

Facets se puede usar tanto en el Search Page como en los diseños de Omnisearch. Ambos cuentan con varios diseños estándar para que comiences con una gran experiencia de búsqueda.

Dynamic Attributes #

Cuando tus productos incluyen diferentes conjuntos de atributos, Facets solo mostrará 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 tipo de ajuste, funcionalidades bluetooth, características 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 Search.

Automatic ranges #

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 - €150, los rangos probablemente irán entre €10-€30 y €140+.

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

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 del producto.
• Numeric ordena atributos basados en números.
• A–Z ordena atributos de tipo texto alfabéticamente, como categorías.

For developers #

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

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

Para el Search Page, está integrado 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 exponen en Liquid como facet_groups.

Esta estructura no siempre es una copia 1:1 del formato de respuesta bruto de la API, así que al construir la interfaz del facet en un diseño, usa 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 visible para los usuarios.
• facet_group.selected_count: cuántas opciones están seleccionadas actualmente en el grupo.
• facet_group.facets (array): todas las opciones de ese grupo.
• facet.value: etiqueta/valor para la opción.
• facet.selected: si esta opción está actualmente activa.
• facet.count: número de resultados para la opción.
• facet.min / facet.max: límites del rango numérico (principalmente relevante para facets _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 snippet:

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

Al agregar data-facets-persistent-filter="true" al snippet, se cambia este comportamiento: los facets seleccionados se recuerdan y se vuelven a aplicar automáticamente con cada nueva consulta, por lo que las elecciones de filtro del visitante permanecen a medida que refina 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 las páginas de búsqueda donde los visitantes normalmente navegan dentro de una categoría o marca — por ejemplo, buscar dentro de “Nike” y luego refinar la consulta varias veces manteniendo ese filtro de marca activo.

URL Filtering #

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

Al abrir 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