Header - Menu Banners

Widget configurado para presentar un carrusel responsivo de imágenes promocionales dentro del drawer del menú del header. Cada banner contiene enlaces, títulos y opciones de visibilidad/etiquetado.

---

Vista previa

---

Comportamiento

• El carrusel se renderiza dentro del drawer que se abre al pulsar el icono de hamburguesa en dispositivos móviles.
• Cada elemento del array carousel se muestra como una slide con imagen desktop y mobile.
• Las propiedades is_visible y is_new permiten ocultar o marcar como «nuevo» un banner sin eliminar su configuración.
• Al hacer clic en la slide se abre el enlace definido en link.url. Los enlaces pueden usar la sintaxis $url de SFCC para generar URLs dinámicas.
• El banner principal (mainImage) aparece siempre en la parte superior del drawer, antes del carrusel.

---

Configuración JSON

{
  "mainImage": {
    "link": {
      "url": "https://example.com/landing",
      "target": "_self"
    },
    "image": {
      "desktop": "https://example.com/img/desktop.jpg",
      "mobile": "https://example.com/img/mobile.jpg"
    },
    "title": "Título del banner principal",
    "subtitle": {
      "text": "Texto destacado",
      "color": "white",
      "background_color": "red"
    },
    "options": {
      "is_visible": true,
      "is_new": false
    }
  },
  "carousel": [
    {
      "link": {
        "url": "https://example.com/promo1",
        "target": "_self"
      },
      "image": {
        "desktop": "https://example.com/img1/desktop.jpg",
        "mobile": "https://example.com/img1/mobile.jpg"
      },
      "title": "Título slide 1",
      "subtitle": {
        "text": "Oferta 1",
        "color": "white",
        "background_color": "red"
      },
      "options": {
        "is_visible": true,
        "is_new": true
      }
    }
    // ...más slides
  ]
}

---

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
mainImage	object	Sí	Configuración del banner principal que se muestra antes del carrusel.
mainImage.link	object	Sí	URL y target del enlace del banner principal.
mainImage.link.url	string	Sí	Dirección de destino. Puede usar $url para URLs dinámicas.
mainImage.link.target	string	No	_self (misma pestaña) o _blank (nueva pestaña).
mainImage.image	object	Sí	URLs de la imagen para desktop y mobile.
mainImage.image.desktop	string	Sí	Imagen para pantallas de escritorio.
mainImage.image.mobile	string	Sí	Imagen optimizada para dispositivos móviles.
mainImage.title	string	No	Texto opcional que se muestra como título del banner.
mainImage.subtitle	object	No	Texto y estilos de subtítulo.
mainImage.options	object	No	Flags de visibilidad (is_visible) y uso de etiqueta «new» (is_new).
carousel	array	Sí	Lista de slides que forman el carrusel rotativo.
carousel[].link	object	Sí	Enlace asociado a la slide.
carousel[].image	object	Sí	Imágenes desktop/mobile de la slide.
carousel[].title	string	No	Texto opcional para la slide.
carousel[].subtitle	object	No	Texto y estilos del subtítulo de la slide.
carousel[].options	object	No	Flags de visibilidad (is_visible) y etiqueta «new» (is_new).

---

Notas y buenas prácticas

• Staticlink: Todas las URLs de imágenes deben terminar con ?$staticlink$ cuando apunten a recursos locales del cartucho.
• Enlaces dinámicos: Prefiere la sintaxis $url('Search-Show', 'cgid', 'ID')$ para categorías o $url('Page-Show', 'cid', 'ID')$ para páginas estáticas.
• Visibilidad: Usa "is_visible": false para retirar temporalmente un banner sin perder su configuración.
• Etiqueta NEW: Marca "is_new": true para destacar un banner con un badge visual de «NUEVO» en el UI.
• Accesibilidad: Asegúrate de que los textos de title y subtitle describen adecuadamente la imagen para lectores de pantalla.

---

Ficheros relacionados

Ficheros

Plantilla

components/header/images.isml

Inclusión

components/header/menu.isml (drawer) o common/layout.isml

---