Skip to main content

PLP Shortcut & Toggle Filters

Widget que configura tres comportamientos de filtrado en las páginas de listado de productos (PLP) a través de un único content asset por categoría:

  1. Shortcut filters — pills de acceso rápido visibles encima del grid (barra horizontal sobre los resultados).
  2. Toggle filters — interruptores destacados dentro del panel lateral de filtros, en una sección "Destacados".
  3. Filtros excluidos — valores de refinement ocultados del panel de filtros principal.

Un mismo ítem puede cumplir los tres roles simultáneamente según sus propiedades booleanas.

Vista previa​

Sin imagen disponible aún. Añade una captura en ./img/plp-shortcut-toggle-filters.jpg y descomenta la línea siguiente.

Comportamiento​

Shortcut filters (pills sobre el grid)​

Los ítems con isToggleFilter: true aparecen como pills clicables en la barra horizontal sobre la cuadrícula de productos (search/shortcutFilters.isml). Al pulsar un pill se aplica el filtro correspondiente sin abrir el panel lateral.

Toggle filters (interruptores en el panel lateral)​

Los ítems con isToggleFilter: true aparecen también como interruptores (toggle switches) dentro del panel de filtros lateral, agrupados bajo la sección "Destacados" (search/toggleFilters.isml). Permiten activar o desactivar el filtro con un solo clic.

Filtros excluidos del panel principal​

Los ítems con visibleInFilters: false hacen que su valor de atributo no aparezca en la lista de refinements del panel lateral. Si todos los valores de un refinement están excluidos, el refinement completo desaparece del panel.

Vinculación del filtro al refinement​

Cada ítem se enlaza al sistema de refinements de SFCC mediante attribute.name (ID del atributo) y attribute.value (valor de display exacto). El componente cruza el ítem con el refinement activo y sólo lo muestra si el valor existe y es seleccionable en la búsqueda actual.

Configuración​

Atributo de categoría​

En Business Manager → Merchant Tools → Products & Catalogs → Catalogs → [Categoría], establece el ID del content asset en el atributo personalizado:

hk_contentAssetIdForShorcutAndToggleFilters = plp-gafas-sol-filters
Atención al nombre del atributo

El nombre del atributo de categoría tiene una errata en el código: hk_contentAssetId**For Shorcut**AndToggleFilters (le falta la t en "Shortcut"). Usa exactamente ese nombre tal cual.

Content Asset​

El widget se configura mediante un JSON en Business Manager → Content Assets con el ID referenciado en el atributo de categoría.

{
  "items": [
    {
      "title": "Hombre",
      "image": "images/filters/icon-hombre.svg?$staticlink$",
      "attribute": {
        "name": "hk_gender",
        "value": "Hombre"
      },
      "isShortcutFilter": true,
      "isToggleFilter": true,
      "visibleInFilters": false
    },
    {
      "title": "Mujer",
      "image": "images/filters/icon-mujer.svg?$staticlink$",
      "attribute": {
        "name": "hk_gender",
        "value": "Mujer"
      },
      "isShortcutFilter": true,
      "isToggleFilter": true,
      "visibleInFilters": false
    },
    {
      "title": "Polarizadas",
      "image": "",
      "attribute": {
        "name": "hk_polarized",
        "value": "Yes"
      },
      "isShortcutFilter": false,
      "isToggleFilter": true,
      "visibleInFilters": true
    }
  ]
}

Propiedades​

PropiedadTipoObligatorioDescripción
itemsarraySíListado de filtros configurables para la categoría.
items[].titlestringSíEtiqueta visible del filtro, tanto en el pill de shortcut como en el toggle del panel lateral.
items[].imagestringNoIcono o imagen asociada al filtro. Debe terminar en ?$staticlink$. Actualmente solo se usa en el toggle del panel lateral.
items[].attributeobjectSíDefinición del atributo de refinement de SFCC al que se enlaza el ítem.
items[].attribute.namestringSíID del atributo de refinement en SFCC (ej. "hk_gender", "hk_polarized"). Se compara en minúsculas con el attributeID del refinement activo.
items[].attribute.valuestringSíValor de display exacto del refinement (ej. "Hombre", "Yes"). Debe coincidir con displayValue del refinement; de lo contrario, el ítem no aparece.
items[].isShortcutFilterbooleanNoReservado. Actualmente no tiene efecto independiente (ver nota abajo).
items[].isToggleFilterbooleanSíSi true, el ítem aparece como pill en la barra de shortcuts y como toggle en el panel lateral de filtros.
items[].visibleInFiltersbooleanSíSi false, el valor del atributo queda oculto en el panel lateral de filtros principal. Si todos los valores de un refinement están excluidos, el refinement entero desaparece.

Notas y consejos​

Ficheros

search/shortcutFilters.isml

Itera sobre productSearch.category.shortcutFilters y renderiza un pill por cada ítem cuyo valor coincida con un refinement seleccionable.

isShortcutFilter está reservado

Actualmente en el código, el filtrado por isShortcutFilter está comentado. En su lugar, los shortcut pills se nutren del mismo array que los toggle filters (isToggleFilter: true). Por tanto:

  • isToggleFilter: true → el ítem aparece tanto como pill como como toggle.
  • isShortcutFilter → no tiene efecto independiente por ahora; se mantiene en el JSON como campo reservado para una futura activación.
Imágenes locales

Las rutas de imagen deben terminar en ?$staticlink$:

"image": "images/filters/icon-hombre.svg?$staticlink$"
El attribute.value debe coincidir exactamente

El valor de attribute.value se compara con el displayValue del refinement activo. Si hay diferencia de mayúsculas o espacios, el ítem no se mostrará aunque el atributo sea correcto.

Ocultar un género del panel pero no del shortcut

Combinar isToggleFilter: true y visibleInFilters: false es el caso de uso habitual para géneros: el filtro aparece como pill y como toggle, pero el género no ocupa espacio adicional en la lista de refinements del panel lateral.