List Banners

Widget configurable y dinámico que renderiza un carrusel o listado de banners interactivo en la web. Es idóneo para páginas de aterrizaje (landing pages), secciones promocionales de la Home o categorías destacadas, permitiendo modificar el número de columnas responsive, las flechas de control, los estilos de botones (colores default/hover) y la visibilidad de manera centralizada en el JSON.

Vista previa

Carrusel de banners promocionales

Comportamiento

Carrusel Adaptable: Permite especificar cuántos banners se muestran simultáneamente en pantallas de móvil, tablet y escritorio a través del objeto visible_items.
Estilos a Medida: Se pueden personalizar los colores de fondo, texto y bordes (tanto en estado normal como en hover) para cada botón de los banners individuales.
Alineación Flex: Los botones de llamada a la acción (CTA) se pueden posicionar dinámicamente en una cuadrícula de 9 posiciones (ejes vertical y horizontal) superpuesta en el banner.
Soporte de Navegación: Dispone de flechas laterales (personalizables en color y fondo) e indicadores de paginación inferiores (dots) configurables a nivel global en el widget.
Compatibilidad con Enlaces: Cada banner es completamente cliqueable y soporta tanto direcciones de navegación tradicionales como las expresiones dinámicas de Salesforce Commerce Cloud (SFCC):
- Búsquedas y categorías: $url('Search-Show', 'cgid', 'ID_CATEGORIA')$
- Productos: $url('Product-Show', 'pid', 'ID_PRODUCTO')$
- Páginas de contenido (assets): $url('Page-Show', 'cid', 'ID_PAGINA')$

Configuración

Content Asset

El content asset se configura mediante un JSON en Business Manager → Content Assets con el ID de recurso correspondiente (por ejemplo, home-list-banners).

{
  "fullwidth": false,
  "title": {
    "visible": true,
    "tag": "p",
    "text": "Colección de Banners Promocionales",
    "link": {
      "url": "$url('Search-Show', 'cgid', 'bestsellers')$",
      "target": "_self"
    }
  },
  "options": {
    "controls": {
      "visible": true,
      "color": {
        "arrow": "#000000",
        "background": "#FFFFFF"
      }
    },
    "navigation": {
      "visible": true
    },
    "visible_items": {
      "mobile": 1,
      "tablet": 2,
      "desktop": 3
    }
  },
  "items": [
    {
      "visible": true,
      "title": "Unisex Essentials",
      "image": "images/banners/unisex-essentials.jpg?$staticlink$",
      "link": {
        "url": "$url('Search-Show', 'cgid', 'gafas-sol-unisex')$",
        "target": "_self"
      },
      "button": {
        "visible": true,
        "text": "EXPLORAR",
        "position": {
          "vertical": "bottom",
          "horizontal": "center"
        },
        "color": {
          "text": {
            "default": "#000000",
            "hover": "#FFFFFF"
          },
          "background": {
            "default": "#FFFFFF",
            "hover": "#000000"
          },
          "border": {
            "default": "#000000",
            "hover": "#FFFFFF"
          }
        }
      }
    },
    {
      "visible": true,
      "title": "Urban Shades",
      "image": "images/banners/urban-shades.jpg?$staticlink$",
      "link": {
        "url": "$url('Search-Show', 'cgid', 'gafas-sol-urban')$",
        "target": "_self"
      }
    }
  ]
}

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
`fullwidth`	`boolean`	Sí	Si es `true`, el widget se expande al 100% de la pantalla. Si es `false`, se enmarca dentro de un contenedor centrado con márgenes.
`title`	`object`	No	Configuración del encabezado o título del carrusel.
`title.visible`	`boolean`	Sí	Determina si el título principal es visible.
`title.tag`	`string`	No	Etiqueta HTML para el título (ej. `"p"`, `"h2"`, `"h3"`). Por defecto suele ser `"p"`.
`title.text`	`string`	Sí	El texto visible del título principal.
`title.link`	`object`	No	Enlace opcional aplicado sobre el título.
`title.link.url`	`string`	Sí	Dirección de destino. Admite expresiones `$url` de SFCC.
`title.link.target`	`string`	No	Comportamiento del enlace al pulsar (`"_self"` o `"_blank"`).
`options`	`object`	Sí	Opciones globales del comportamiento y visualización del carrusel.
`options.controls`	`object`	No	Ajustes de las flechas laterales de navegación.
`options.controls.visible`	`boolean`	Sí	Muestra u oculta las flechas laterales de cambio de slide.
`options.controls.color`	`object`	No	Paleta de colores de los botones de las flechas.
`options.controls.color.arrow`	`string`	Sí	Color de la flecha en formato hexadecimal (ej. `"#000000"`).
`options.controls.color.background`	`string`	Sí	Color de fondo del círculo/botón de la flecha (hexadecimal).
`options.navigation`	`object`	No	Ajustes de paginación por puntos (dots) en la parte inferior.
`options.navigation.visible`	`boolean`	Sí	Muestra u oculta los puntos de paginación inferiores.
`options.visible_items`	`object`	Sí	Elementos mostrados simultáneamente según la resolución de pantalla.
`options.visible_items.mobile`	`number`	Sí	Número de banners visibles en dispositivos móviles (ej. `1`).
`options.visible_items.tablet`	`number`	Sí	Número de banners visibles en tablets (ej. `2`).
`options.visible_items.desktop`	`number`	Sí	Número de banners visibles en ordenadores (ej. `3` o `4`).
`items`	`array`	Sí	Listado de elementos individuales (banners) que se incluirán en el carrusel.
`items[].visible`	`boolean`	Sí	Permite apagar (`false`) u ocultar un banner específico sin borrar su configuración del JSON.
`items[].title`	`string`	No	Título principal superpuesto sobre el propio banner.
`items[].image`	`string`	Sí	Ruta a la imagen del banner. Debe finalizar con `?$staticlink$`.
`items[].link`	`object`	Sí	Enlace principal al pulsar en el cuerpo del banner.
`items[].link.url`	`string`	Sí	URL de destino (admite `$url` de SFCC).
`items[].link.target`	`string`	No	Atributo target (`"_self"` o `"_blank"`).
`items[].button`	`object`	No	Configuración de botón CTA superpuesto en el banner.
`items[].button.visible`	`boolean`	Sí	Si es `true`, muestra un botón físico. Si es `false`, todo el banner es interactivo pero no muestra botón.
`items[].button.text`	`string`	Sí	Etiqueta o texto legible en el interior del botón.
`items[].button.position`	`object`	No	Configuración de coordenadas de renderizado del botón sobre el banner.
`items[].button.position.vertical`	`string`	Sí	Eje vertical: `"top"` \| `"center"` \| `"bottom"`.
`items[].button.position.horizontal`	`string`	Sí	Eje horizontal: `"left"` \| `"center"` \| `"right"`.
`items[].button.color`	`object`	No	Paleta de colores detallada para estados normal y hover del botón.
`items[].button.color.text.default`	`string`	Sí	Color del texto del botón por defecto (hexadecimal).
`items[].button.color.text.hover`	`string`	Sí	Color del texto del botón en estado hover (hexadecimal).
`items[].button.color.background.default`	`string`	Sí	Color de fondo del botón por defecto.
`items[].button.color.background.hover`	`string`	Sí	Color de fondo del botón en estado hover.
`items[].button.color.border.default`	`string`	Sí	Color de la línea de borde por defecto.
`items[].button.color.border.hover`	`string`	Sí	Color de la línea de borde en estado hover.

Notas y consejos

Ficheros

Plantilla
Inclusión genérica

content/listBanners.isml

Renderizado en cualquier página mediante la etiqueta <iscontentasset aid="ID_DEL_ASSET" />

Imágenes locales

Para resolver correctamente la ruta estática desde los recursos locales del cartucho, recuerda añadir ?$staticlink$ al final del valor en la propiedad image.

"image": "images/banners/unisex-essentials.jpg?$staticlink$"

Enlaces dinámicos ($url)

Se recomienda encarecidamente utilizar las expresiones de $url dinámicas para las categorías y páginas internas. Esto asegura que la navegación no se rompa al migrar cambios de datos entre los entornos de Staging, Sandbox o Producción.

Formato de colores

Todos los campos de color deben especificarse obligatoriamente en formato hexadecimal (ej. "#FFFFFF" o "#000000"). El uso de nombres de color HTML (como white, black o red) puede causar inconsistencias o fallos de renderizado según los estilos del cartucho.

Vista previa​

Comportamiento​

Configuración​

Content Asset​

Propiedades​

Notas y consejos​