PLP Accordion

Widget configurable que renderiza un acordeón de secciones expandibles al final de las páginas de listado de productos (PLP). Su uso principal es alojar contenido SEO (textos descriptivos, preguntas frecuentes, guías de compra…) que se muestra u oculta interactivamente sin ocupar espacio visual permanente en la página.

Cada categoría puede tener su propio acordeón mediante el atributo personalizado de categoría hk_accordion, que almacena el ID del content asset correspondiente.

Vista previa

Acordeón SEO en PLP

Comportamiento

Visibilidad controlada en dos niveles: El bloque completo solo se renderiza si la propiedad raíz visible es true y existe al menos un ítem visible. Cada ítem, a su vez, solo se muestra si visible: true, tiene título no vacío y tiene contenido no vacío.
Estado inicial abierto/cerrado: La propiedad opened de cada ítem controla si el panel arranca expandido (true) o colapsado (false) al cargar la página.
Jerarquía semántica automática: Los primeros cinco ítems visibles reciben etiquetas h2 → h3 → h4 → h5 → h6 para favorecer la estructura SEO. A partir del sexto ítem se utiliza div.
Contenido HTML enriquecido: El campo content se renderiza sin escapar, por lo que admite HTML completo (párrafos, listas, enlaces, negritas…).
Vinculación por categoría: El content asset no se incluye globalmente; se referencia por su ID en el atributo de categoría hk_accordion de Business Manager, lo que permite personalizar el acordeón categoría por categoría.

Configuración

Atributo de categoría

En Business Manager → Merchant Tools → Products & Catalogs → Catalogs → [Categoría], establece el atributo personalizado hk_accordion con el ID del content asset (por ejemplo, plp-gafas-sol-hombre-accordion).

Content Asset

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

{
  "visible": true,
  "items": [
    {
      "visible": true,
      "opened": true,
      "title": "Gafas de sol para hombre: la guía definitiva",
      "content": "<p>Descubre nuestra colección de gafas de sol para hombre. Desde monturas clásicas hasta diseños más atrevidos, encontrarás el modelo perfecto para tu estilo.</p>"
    },
    {
      "visible": true,
      "opened": false,
      "title": "¿Cómo elegir las gafas de sol adecuadas?",
      "content": "<p>Ten en cuenta la forma de tu rostro, el uso que les darás y el nivel de protección UV. Nuestros modelos ofrecen protección UV400 en todas las lentes.</p>"
    },
    {
      "visible": true,
      "opened": false,
      "title": "Materiales y garantía",
      "content": "<p>Fabricamos nuestras monturas con materiales de alta calidad: acetato, TR90 e inyección de policarbonato. Todos los modelos incluyen <strong>2 años de garantía</strong>.</p>"
    },
    {
      "visible": false,
      "opened": false,
      "title": "Sección en borrador",
      "content": "<p>Este ítem no se mostrará porque visible es false.</p>"
    }
  ]
}

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
`visible`	`boolean`	Sí	Controla la visibilidad global del bloque. Si es `false`, no se renderiza ningún elemento aunque los ítems estén configurados.
`items`	`array`	Sí	Listado de paneles del acordeón.
`items[].visible`	`boolean`	Sí	Si es `false`, el ítem se ignora completamente. También se ignora si `title` o `content` están vacíos.
`items[].opened`	`boolean`	No	Si es `true`, el panel se muestra expandido al cargar la página. Por defecto es `false` (colapsado).
`items[].title`	`string`	Sí	Texto del encabezado del panel. Los primeros 5 ítems visibles reciben etiquetas `h2`–`h6` automáticamente; a partir del sexto se utiliza `div`.
`items[].content`	`string`	Sí	Contenido del panel. Se renderiza como HTML sin escapar, por lo que se pueden incluir etiquetas como `<p>`, `<ul>`, `<strong>`, `<a>`, etc.

Notas y consejos

Ficheros

Plantilla de contenido
Plantilla de componente
Inclusión en PLP

content/plpAccordion.isml

components/plp/accordion.isml

Se incluye automáticamente en las páginas de categoría cuando la categoría tiene configurado el atributo hk_accordion:

<isif condition="${pdict.category.custom.hasOwnProperty('hk_accordion')}">
  <iscontentasset aid="${pdict.category.custom.hk_accordion.value}" />
</isif>

Jerarquía de encabezados para SEO

Aprovecha la jerarquía automática de etiquetas (h2 → h6) para estructurar el contenido SEO de cada categoría. Coloca el texto más relevante en el primer ítem, ya que recibirá la etiqueta h2.

Contenido HTML en content

El campo content admite HTML completo. Puedes usar listas, párrafos, negritas y enlaces internos:

"content": "<p>Texto introductorio.</p><ul><li>Característica 1</li><li>Característica 2</li></ul>"

Ítem oculto sin borrar datos

Puedes desactivar temporalmente un ítem sin eliminar su contenido poniendo "visible": false. El bloque completo se ocultará si todos los ítems están desactivados, aunque la propiedad raíz visible sea true.

Vista previa​

Comportamiento​

Configuración​

Atributo de categoría​

Content Asset​

Propiedades​

Notas y consejos​