PLP CTA Item Grid
Widget que inserta un tile promocional o de llamada a la acción (CTA) directamente dentro de la cuadrícula de productos (PLP), ocupando el espacio visual de un producto real. Visualmente imita la estructura de un product tile: imagen principal, imagen secundaria en hover, título, precio y enlace. Es ideal para destacar campañas, colecciones o páginas de destino sin alterar el número de productos del grid.
Puede haber múltiples tiles CTA en la misma categoría, cada uno en una posición diferente.
Vista previa
Sin imagen disponible aún. Añade una captura en
./img/plp-cta-item-grid.jpgy descomenta la línea siguiente.
Comportamiento
- Posición en el grid: La propiedad
positionindica el número de hueco (índice ordinal en el grid, empezando en1) en el que se inyecta el tile. Por ejemplo,"position": 3hace que el CTA aparezca como tercer elemento de la cuadrícula. - Imagen con efecto hover: Si se proporcionan las dos imágenes (
primaryysecondary), la secundaria se superpone sobre la primaria con una transición de opacidad al pasar el ratón. - Tile enlazable: Si
link.urltiene valor, tanto la imagen como el título se convierten en elementos<a>con el destino y comportamiento configurados. - Título opcional: Si
titleestá vacío o ausente, el encabezado de texto no se renderiza. - Precio con HTML: El campo
pricese renderiza sin escapar, lo que permite formatear el texto con superíndices, negritas u otros estilos inline. - Carga diferida: Ambas imágenes usan lazy loading (
lazyload) con un SVG placeholder mientras cargan. - Vinculación por categoría: Los IDs de los content assets se asignan en el atributo personalizado de categoría
hk_category_asset(acepta múltiples IDs). El sistema lee elpositionde cada asset y lo ubica en el hueco correspondiente del grid.
Configuración
Atributo de categoría
En Business Manager → Merchant Tools → Products & Catalogs → Catalogs → [Categoría], añade el ID del content asset al atributo personalizado hk_category_asset. Acepta múltiples valores para poder colocar varios tiles CTA en distintas posiciones de la misma categoría.
Content Asset
El widget se configura mediante un JSON en Business Manager → Content Assets con el ID referenciado en el atributo de categoría.
{
"position": 3,
"images": {
"primary": "pages/plp/cta/img/cta-summer-primary.jpg?$staticlink$",
"secondary": "pages/plp/cta/img/cta-summer-secondary.jpg?$staticlink$"
},
"title": "Nueva colección verano",
"link": {
"url": "$url('Search-Show', 'cgid', 'gafas-sol-verano')$",
"target": "_self"
},
"price": "Desde 29<span class='price__span--superindex'>.95€</span>"
}
Propiedades
| Propiedad | Tipo | Obligatorio | Descripción |
|---|---|---|---|
position | number | Sí | Posición ordinal del tile en la cuadrícula (empieza en 1). El tile se inserta antes del producto que ocupa ese hueco. |
images | object | No | Objeto con las rutas de las imágenes del tile. |
images.primary | string | No | Imagen principal visible por defecto. Debe terminar en ?$staticlink$. |
images.secondary | string | No | Imagen mostrada al hacer hover, con transición de opacidad. Debe terminar en ?$staticlink$. |
title | string | No | Texto del título debajo de la imagen. Si el tile tiene enlace, se renderiza como <a>. Si está vacío, no se muestra. |
link | object | No | Configuración del enlace del tile. |
link.url | string | No | URL de destino. Admite expresiones $url de SFCC. Si está vacío, la imagen y el título no serán clicables. |
link.target | string | No | Comportamiento del enlace: "_self" (misma pestaña) o "_blank" (nueva pestaña). |
price | string | No | Texto del precio mostrado bajo el título. Admite HTML (ej. superíndices con <span>). Si está vacío, no se muestra. |
Notas y consejos
- Plantilla
- Grid que lo renderiza
- Modelo que lo carga
components/plp/cta-item-grid.isml
search/components/productTiles.isml
En cada iteración del grid, el sistema comprueba si hay un asset asignado a la posición actual y, si existe, lo renderiza mediante <iscontentasset aid="..."/> antes del product tile correspondiente.
cartridge/models/search/productSearch.js → getCategoryAssets()
Lee los IDs del atributo hk_category_asset de la categoría, parsea el JSON de cada asset y construye un array indexado por position.
El atributo hk_category_asset acepta varios IDs. Puedes añadir tantos content assets como necesites, siempre que cada uno tenga un position diferente. El sistema los procesa todos y los coloca en sus posiciones correspondientes sin conflicto.
Todas las rutas de imagen deben terminar en ?$staticlink$ para que SFCC resuelva correctamente la ruta estática del cartucho:
"primary": "pages/plp/cta/img/banner.jpg?$staticlink$"
Las imágenes deben tener proporciones similares a las de los product tiles (472 × 600 px de referencia) para integrarse sin desfases visuales en el grid.
El campo price admite HTML inline. Para formatear decimales o simbolos con superíndice usa la clase price__span--superindex:
"price": "Desde 29<span class='price__span--superindex'>.95€</span>"
Se recomienda usar expresiones $url de SFCC para los enlaces de categorías y páginas internas, garantizando que las rutas funcionen en todos los entornos (Sandbox, Staging, Producción):
"url": "$url('Search-Show', 'cgid', 'gafas-sol-verano')$"
El tile CTA no desplaza los productos del grid; se inserta en el hueco indicado y los productos siguen su orden natural. Si position: 3, el tile aparece en el tercer hueco y el tercer producto ocupa el cuarto. Ten en cuenta esto para planificar la disposición visual.