Header Menu

Slot central del menú de escritorio. Define la estructura completa de la navegación: secciones por género, ítems de cada sección con título, subtítulo y etiqueta "NEW", y referencias a los content assets que componen cada panel de submenú (imágenes, enlaces y footer).

Vista previa

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

Comportamiento

El menú se organiza en secciones por género (menu[]). Cada sección tiene su propia pestaña o selector en la cabecera y su propio conjunto de ítems.
Cada ítem puede tener un submenú referenciado por submenuAssetId. Al hacer hover sobre el ítem, se despliega el panel con el contenido de ese content asset.
imagesAssetId referencia el content asset de tipo Header Menu Banners que muestra los banners visuales del panel de menú.
footerAssetId referencia el content asset de tipo Header Menu Footer que muestra los enlaces del pie del panel de menú.
Los ítems con options.is_visible: false no se renderizan.
options.is_new: true muestra la etiqueta "NEW" junto al título del ítem.
El subtitle admite color de texto y color de fondo independientes (badge de color).

Configuración

El JSON se introduce en el body del content slot de tipo HTML en Business Manager → Content Slots.

{
  "imagesAssetId": "header-menu-images",
  "footerAssetId": "header-menu-footer",
  "menu": [
    {
      "gender": {
        "id": "default",
        "name": "default",
        "url": "$url('Search-Show', 'cgid', 'gafas-de-sol')$"
      },
      "items": [
        {
          "id": "menu-gafas-sol",
          "link": {
            "url": "$url('Search-Show', 'cgid', 'gafas-de-sol')$",
            "target": "_self"
          },
          "title": {
            "text": "GAFAS DE SOL",
            "color": "",
            "weight": ""
          },
          "subtitle": {
            "text": "",
            "color": "",
            "background_color": ""
          },
          "options": {
            "is_visible": true,
            "is_new": false
          },
          "submenuAssetId": "header-submenu-gafas-de-sol"
        },
        {
          "id": "menu-promociones",
          "link": {
            "url": "$url('Search-Show', 'cgid', 'promociones')$",
            "target": "_self"
          },
          "title": {
            "text": "PROMOCIONES",
            "color": "green",
            "weight": "700"
          },
          "subtitle": {
            "text": "UP TO -70%",
            "color": "#CEFF02",
            "background_color": "#121212"
          },
          "options": {
            "is_visible": true,
            "is_new": false
          },
          "submenuAssetId": "header-submenu-promociones"
        }
      ]
    },
    {
      "gender": {
        "id": "mujer",
        "name": "Mujer",
        "url": "$url('Search-Show', 'cgid', 'mujer')$"
      },
      "items": [
        {
          "id": "menu-mujer-gafas-sol",
          "link": {
            "url": "$url('Search-Show', 'cgid', 'mujer-gafas-de-sol')$",
            "target": "_self"
          },
          "title": {
            "text": "GAFAS DE SOL",
            "color": "",
            "weight": ""
          },
          "subtitle": {
            "text": "",
            "color": "",
            "background_color": ""
          },
          "options": {
            "is_visible": true,
            "is_new": false
          },
          "submenuAssetId": "header-submenu-mujer-gafas-de-sol"
        }
      ]
    }
  ]
}

Propiedades

Referencias a content assets

Propiedad	Tipo	Obligatorio	Descripción
`imagesAssetId`	`string`	No	ID del content asset Header Menu Banners con los banners visuales del panel.
`footerAssetId`	`string`	No	ID del content asset Header Menu Footer con los enlaces del pie del panel.

Secciones por género (`menu[]`)

Propiedad	Tipo	Obligatorio	Descripción
`menu[].gender.id`	`string`	Sí	Identificador interno de la sección (`"default"`, `"mujer"`, `"hombre"`, etc.). `"default"` es la sección que se muestra sin filtro de género activo.
`menu[].gender.name`	`string`	Sí	Nombre visible de la sección en el selector del menú.
`menu[].gender.url`	`string`	No	URL de destino al hacer clic en el título de la sección de género.
`menu[].items`	`array`	Sí	Ítems de navegación de la sección.

Ítems de menú (`menu[].items[]`)

Propiedad	Tipo	Obligatorio	Descripción
`items[].id`	`string`	Sí	Identificador único del ítem. Se usa para enlazar el hover con el panel de submenú correspondiente.
`items[].link.url`	`string`	No	URL de destino al hacer clic en el ítem. Admite expresiones `$url` de SFCC.
`items[].link.target`	`string`	No	`"_self"` o `"_blank"`.
`items[].title.text`	`string`	Sí	Texto del ítem de menú.
`items[].title.color`	`string`	No	Color del texto. Nombre CSS o hexadecimal. Si está vacío, usa el color por defecto.
`items[].title.weight`	`string`	No	Peso de fuente del texto (ej. `"700"` para negrita).
`items[].subtitle.text`	`string`	No	Texto del badge de subtítulo (ej. `"UP TO -70%"`). Si está vacío, no se muestra.
`items[].subtitle.color`	`string`	No	Color del texto del badge.
`items[].subtitle.background_color`	`string`	No	Color de fondo del badge.
`items[].options.is_visible`	`boolean`	Sí	Si `false`, el ítem no se renderiza.
`items[].options.is_new`	`boolean`	No	Si `true`, muestra la etiqueta "NEW" junto al título.
`items[].submenuAssetId`	`string`	No	ID del content asset Header Submenu que se despliega al hacer hover sobre el ítem.

Notas y consejos

Tipo de slot y plantilla

Tipo: HTML
Plantilla: slots/html/headerMenu.isml

Arquitectura del menú — cómo se relacionan los assets

El slot headerMenu es el orquestador central. Los content assets que referencia son:

headerMenu (slot)
├── imagesAssetId → headerMenuBanners (content asset)
├── footerAssetId → headerMenuFooter (content asset)
└── menu[].items[].submenuAssetId → headerSubmenu (content asset)
                                      └── incluye menuImages, submenu links, etc.

Cada content asset referenciado se configura de forma independiente en Business Manager.

gender.id: "default" — la sección sin filtro

La sección con id: "default" es la que se muestra cuando no hay ningún filtro de género activo (navegación general). Las secciones con otros IDs ("mujer", "hombre") se activan cuando el usuario selecciona ese género en el menú.

Destacar ítems promocionales

Combina title.color, title.weight y subtitle para dar visibilidad a ítems especiales:

"title": { "text": "OUTLET", "color": "red", "weight": "700" },
"subtitle": { "text": "HASTA -50%", "color": "#ffffff", "background_color": "#e74c3c" }

Vista previa​

Comportamiento​

Configuración​

Propiedades​

Referencias a content assets​

Secciones por género (menu[])​

Ítems de menú (menu[].items[])​

Notas y consejos​