Header - Submenu

Widget configurable que permite añadir una barra de enlaces de navegación secundaria (submenu) justo debajo del menú principal en el header de la web. Es ideal para destacar campañas temporales, nuevas colecciones, colaboraciones especiales o enlaces de interés recurrente para el usuario.

---

Vista previa

---

Comportamiento

• Se renderiza de forma integrada en la cabecera general del sitio, habitualmente debajo de las categorías principales.
• Se controla a nivel global de visibilidad mediante la propiedad "visible": true/false en el JSON.
• Los enlaces del menú se cargan dinámicamente, permitiendo cambiar el orden, añadir o quitar elementos directamente desde el content asset sin modificar código.
• Soporta tanto URLs estáticas o externas como 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 (habitualmente header-submenu).

{
  "visible": true,
  "links": [
    {
      "url": "$url('Search-Show', 'cgid', 'gafas-de-sol')$",
      "target": "_self",
      "text": "Novedades"
    },
    {
      "url": "$url('Search-Show', 'cgid', 'bestsellers')$",
      "target": "_self",
      "text": "Bestsellers"
    },
    {
      "url": "$url('Page-Show', 'cid', 'colaboraciones')$",
      "target": "_self",
      "text": "Colaboraciones"
    }
  ]
}

---

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
visible	boolean	Sí	Si es true, muestra la barra del submenu en la cabecera. Si es false, la oculta por completo.
links	array	Sí	Lista con los objetos de enlace que se renderizarán de izquierda a derecha.
links[].url	string	Sí	Dirección de redirección del enlace. Soporta sintaxis $url de SFCC.
links[].target	string	No	Comportamiento del navegador al hacer clic ("_self" o "_blank").
links[].text	string	Sí	Etiqueta o texto legible que se muestra al usuario en el menú.

---

Notas y consejos

Ficheros

Plantilla

components/header/headerSubmenu.isml

Incluido en

components/header/menu.isml o components/header/pageHeader.isml

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.

Control del target

El atributo target en los enlaces determina cómo se abren al pulsar sobre ellos:

• "_self": Abre el enlace en la misma pestaña (recomendado para navegación interna).
• "_blank": Abre el enlace en una nueva pestaña (recomendado para redes sociales o enlaces externos).