Facets

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

Facets se puede utilizar 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 excelente experiencia de búsqueda.

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 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.

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 €, los intervalos probablemente irán de 10 €-30 € y 140 € o más.

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

Facet order #

Primero agrega facets en la configuración del Element, luego elige su orden de visualización.

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

Toma el controlador punteado de un atributo y arrástralo a la posición que desees. Una caja discontinua mostrará a dónde se moverá. 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 facet, como mostrar la marca antes del 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 de la columna Sort para cada atributo.

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

For developers #

Facets es parte del kit UI de Clerk.js que facilita agregar funcionalidades a tu sitio.

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

Para Search Page, están integrados 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 están disponibles en Liquid como facet_groups.

Esta estructura no siempre es una copia 1:1 del formato de respuesta cruda de la API, así que al crear la UI 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 de 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 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á activa actualmente.
• facet.count: cantidad de resultados para la opción.
• facet.min / facet.max: límites de rango numérico (principalmente relevante para facets de _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 agregan al snippet:

• data-facets-attributes: Una lista de atributos que pueden mostrarse para 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 filtrar.

Agregar data-facets-persistent-filter="true" al snippet cambia este comportamiento: los facets seleccionados se recuerdan y se reaplican automáticamente con cada nueva consulta, para que las elecciones de filtro del visitante permanezcan al refinar el 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 explorar 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 #

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