Facets

Esta función de filtrado inteligente facilita que los visitantes encuentren los artículos adecuados, incluso en las páginas de categorías más grandes.

Facets se puede usar cuando utilizas Clerk para mostrar páginas de categorías completas, lo que permite que los visitantes filtren los resultados fácilmente.

Dynamic Attributes #

Cuando tus productos incluyen varios conjuntos de atributos, Facets solo mostrará los filtros relevantes para cada página de categoría individual.

Por ejemplo, una categoría de “laptops” probablemente muestre especificaciones como RAM, espacio de almacenamiento, tamaño de pantalla y así sucesivamente, mientras que una categoría de “headphones” incluirá el ajuste, funcionalidades bluetooth, características de ecualizador y más.

Asegúrate de importar solo los atributos relevantes para cada producto en tu catálogo, y Facets será dinámico en cada página según los productos que contenga.

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 segmentos probablemente irán desde €10-€30 hasta €140+.

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

Facet order #

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 sus ajustes de diseño o inserción.

Toma el controlador punteado de un atributo y arrástralo a la posición que desees. Una caja discontinua te mostrará dónde aterrizará. 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, en lugar de los valores dentro de cada facet.

For developers #

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

Están integrados directamente en el snippet que muestra los resultados:

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

<span 
  class="clerk" 
  data-template="@category-page-grid" 
  data-category="156"
  data-facets-target="#clerk-category-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>

Parameters #

Facets se compone de dos parámetros que se agregan al snippet:

• data-facets-attributes: Una lista de atributos que pueden mostrarse en las páginas de categorías donde sean relevantes
• data-facets-titles: Un array de atributos y títulos asociados que configura cómo se muestran a los usuarios finales.

URL Filtering #

Quizá quieras enviar páginas de categorías pre-filtradas en tu marketing, y Facets hace que esto sea muy fácil. Simplemente agregando el parámetro data-facets-in-url en el snippet de tu 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