Facets

Esta función de filtrado inteligente permite a los visitantes encontrar los artículos correctos sin esfuerzo, incluso en las páginas de categoría más grandes.

Facets se puede usar cuando se utiliza Clerk para mostrar páginas de categorías completas, facilitando que los visitantes reduzcan los resultados.

Atributos Dinámicos #

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

Por ejemplo, una categoría para “laptops” probablemente mostrará especificaciones como RAM, espacio de almacenamiento, tamaño de pantalla y así sucesivamente, mientras que una categoría para “headphones” incluirá 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 página dependiendo de los productos en ella.

Rangos automáticos #

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

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

Para desarrolladores #

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

Se integran 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>

Parámetros #

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

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

Filtrado por URL #

Quizás quieras enviar páginas de categorías pre-filtradas en tu marketing, y Facets hace esto muy fácil. Simplemente agregando el parámetro data-facets-in-url al snippet de tu página de categoría, facets se agregarán a la URL.

Al abrir la URL, las facets ya estarán seleccionadas:

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