Menu Images

Panel visual dentro del submenú de escritorio de la cabecera. Muestra dos zonas complementarias:

Imagen principal (mainImage) — bloque de gran formato anclado a la izquierda del panel. Puede llevar título, badge de subtítulo con color personalizado y etiqueta "NEW".
Carrusel (carousel) — lista de imágenes más pequeñas en scroll horizontal a la derecha. Cada ítem es independiente y puede tener su propio título, badge y etiqueta "NEW".

El bloque completo sólo se renderiza si al menos una de las dos zonas tiene algún ítem visible.

Vista previa

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

Comportamiento

Visibilidad por ítem: Un ítem sólo se muestra si options.is_visible: true y el campo image contiene al menos una URL válida (desktop o mobile). Si falta alguna de las dos condiciones, el ítem queda oculto.
Visibilidad del bloque: El panel entero sólo aparece si la imagen principal es visible o al menos un elemento del carrusel es visible. Si ninguno cumple las condiciones, el contenedor no se renderiza.
Imagen principal — enlace: La imagen y el título se envuelven en un <a> hacia la URL de link. Si link está vacío, no hay elemento interactivo.
Badge de subtítulo: Si subtitle.text tiene valor, se muestra como una pastilla de color al lado del título. El color del texto y el fondo se inyectan como variables CSS (--color-text, --bg-color-text) en el elemento.
Etiqueta NEW: options.is_new: true muestra una etiqueta "NEW" sobre el ítem. En el carrusel se posiciona en absoluto sobre la imagen; en la imagen principal se ubica inline junto al título.
Carrusel — scroll horizontal: Los ítems del carrusel tienen un min-width fijo y se deslizan horizontalmente si hay más elementos de los que caben en el panel.
Carga de imágenes: Las imágenes del carrusel usan carga diferida (lazyload). La imagen principal se carga directamente.

Configuración

El content asset se referencia desde la configuración del submenú de navegación (habitualmente en headerSubmenu u otro asset de cabecera que incluya el componente components/header/images).

{
  "mainImage": {
    "image": {
      "desktop": "https://library.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-HawkersSharedLibrary/default/img/menu/main-novedades-desktop.jpg",
      "mobile": "https://library.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-HawkersSharedLibrary/default/img/menu/main-novedades-mobile.jpg"
    },
    "link": "/es/categoria/novedades",
    "title": "Novedades",
    "subtitle": {
      "text": "VER TODO",
      "color": "#000000",
      "background_color": "#cdff03"
    },
    "options": {
      "is_new": false,
      "is_visible": true
    }
  },
  "carousel": [
    {
      "image": {
        "desktop": "https://library.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-HawkersSharedLibrary/default/img/menu/carousel-polarizadas-desktop.jpg",
        "mobile": "https://library.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-HawkersSharedLibrary/default/img/menu/carousel-polarizadas-mobile.jpg"
      },
      "link": "/es/categoria/polarizadas",
      "title": "Polarizadas",
      "subtitle": {
        "text": "HOT",
        "color": "#ffffff",
        "background_color": "#e74c3c"
      },
      "options": {
        "is_new": false,
        "is_visible": true
      }
    },
    {
      "image": {
        "desktop": "https://library.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-HawkersSharedLibrary/default/img/menu/carousel-edicion-limitada-desktop.jpg",
        "mobile": "https://library.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-HawkersSharedLibrary/default/img/menu/carousel-edicion-limitada-mobile.jpg"
      },
      "link": "/es/categoria/edicion-limitada",
      "title": "Edición limitada",
      "subtitle": {
        "text": "",
        "color": "",
        "background_color": ""
      },
      "options": {
        "is_new": true,
        "is_visible": true
      }
    },
    {
      "image": {
        "desktop": "",
        "mobile": ""
      },
      "link": "/es/categoria/outlet",
      "title": "Outlet",
      "subtitle": {
        "text": "",
        "color": "",
        "background_color": ""
      },
      "options": {
        "is_new": false,
        "is_visible": false
      }
    }
  ]
}

Propiedades

Imagen principal (`mainImage`)

Propiedad	Tipo	Obligatorio	Descripción
`mainImage.image`	`object`	Sí	URLs de la imagen en cada breakpoint.
`mainImage.image.desktop`	`string`	Sí	URL absoluta de la imagen en escritorio. Dimensiones de referencia: 335 × 132 px. Si está vacía, el ítem no se muestra.
`mainImage.image.mobile`	`string`	No	URL absoluta de la imagen en móvil. Dimensiones de referencia: 280 × 110 px.
`mainImage.link`	`string`	No	URL de destino al hacer clic en la imagen o el título. Si está vacío, no se renderiza el enlace.
`mainImage.title`	`string`	No	Texto del título visible bajo la imagen. Si está vacío, no se renderiza.
`mainImage.subtitle`	`object`	No	Badge de color con texto personalizado mostrado junto al título.
`mainImage.subtitle.text`	`string`	No	Texto del badge. Si está vacío, el badge no se muestra.
`mainImage.subtitle.color`	`string`	No	Color del texto del badge (valor CSS, ej. `"#000000"`). Se asigna como `--color-text`.
`mainImage.subtitle.background_color`	`string`	No	Color de fondo del badge (valor CSS, ej. `"#cdff03"`). Se asigna como `--bg-color-text`.
`mainImage.options.is_visible`	`boolean`	Sí	Si `false`, el bloque de imagen principal no se renderiza.
`mainImage.options.is_new`	`boolean`	No	Si `true`, muestra la etiqueta "NEW" junto al título. (Ver nota sobre comportamiento actual)

Ítems del carrusel (`carousel[]`)

Propiedad	Tipo	Obligatorio	Descripción
`carousel[].image`	`object`	Sí	URLs de la imagen en cada breakpoint.
`carousel[].image.desktop`	`string`	Sí	URL absoluta de la imagen en escritorio. Dimensiones de referencia: 157 × 132 px. Si está vacía, el ítem no se muestra.
`carousel[].image.mobile`	`string`	No	URL absoluta de la imagen en móvil. Dimensiones de referencia: 132 × 110 px.
`carousel[].link`	`string`	No	URL de destino al hacer clic en el ítem.
`carousel[].title`	`string`	No	Texto del título visible bajo la imagen del carrusel.
`carousel[].subtitle`	`object`	No	Badge de color con texto personalizado, igual que en la imagen principal.
`carousel[].subtitle.text`	`string`	No	Texto del badge. Si está vacío, el badge no se muestra.
`carousel[].subtitle.color`	`string`	No	Color del texto del badge. Se asigna como `--color-text`.
`carousel[].subtitle.background_color`	`string`	No	Color de fondo del badge. Se asigna como `--bg-color-text`.
`carousel[].options.is_visible`	`boolean`	Sí	Si `false`, el ítem no se renderiza en el carrusel.
`carousel[].options.is_new`	`boolean`	No	Si `true`, muestra la etiqueta "NEW" posicionada en absoluto sobre la esquina superior de la imagen.

Notas y consejos

Ficheros

Plantilla
Etiqueta NEW
Dónde se incluye

components/header/images.isml

Renderiza el panel completo: comprueba showBlock, itera el carrusel y construye la imagen principal.

components/header/newLabel.isml

Subplantilla reutilizada tanto por la imagen principal como por cada ítem del carrusel para renderizar la pastilla "NEW". En el carrusel, se posiciona con position: absolute.

Este componente se incluye dentro de la plantilla del submenú de escritorio (habitualmente components/header/submenu.isml o similar), que lo llama pasando el JSON del content asset como data.

Las imágenes usan URLs absolutas de la librería

A diferencia de otros content assets que usan rutas relativas con ?$staticlink$, este componente trabaja con URLs absolutas apuntando a la librería compartida de SFCC (Library-Sites-HawkersSharedLibrary). Las imágenes deben subirse desde Business Manager → Content → Libraries → [Librería compartida] y copiar la URL generada.

La etiqueta NEW no se muestra en la imagen principal

Hay una inconsistencia en la plantilla: para los ítems del carrusel se evalúa correctamente item.options.new (propiedad generada por el formateador), pero para la imagen principal la plantilla comprueba mainImage.options.is_new (la propiedad original del JSON, que no existe en el objeto formateado). El resultado es que la etiqueta NEW nunca se renderiza en la imagen principal, aunque is_new: true esté configurado. Los ítems del carrusel sí funcionan correctamente.

Ocultar un ítem sin eliminarlo del JSON

Para desactivar temporalmente un ítem sin borrarlo, basta con poner is_visible: false. Si además quieres asegurarte de que no se muestra bajo ninguna circunstancia, deja también la URL de imagen vacía — la lógica de visibilidad requiere ambas condiciones.

El badge de subtítulo admite cualquier valor CSS de color

color y background_color se aplican directamente como variables CSS inline, por lo que admiten cualquier formato válido: hex (#cdff03), rgb(), nombre de color CSS, etc.

"subtitle": {
  "text": "SALE",
  "color": "rgb(0, 0, 0)",
  "background_color": "#cdff03"
}

Dimensiones de referencia

Zona	Desktop	Mobile
Imagen principal	335 × 132 px	280 × 110 px
Carrusel (c/u)	157 × 132 px	132 × 110 px

Usa estas dimensiones o proporciones equivalentes para evitar distorsiones en el recorte de las imágenes.

Vista previa​

Comportamiento​

Configuración​

Propiedades​

Imagen principal (mainImage)​

Ítems del carrusel (carousel[])​

Notas y consejos​