Skip to main content

Submenu

Lista de ítems enlazables que componen el submenú de navegación de escritorio. A diferencia del resto de content assets, este componente es renderizado en el cliente por js/components/menu.js (no por una plantilla ISML).

Cada ítem puede tener título con color y peso de fuente propios, subtítulo opcional, etiqueta "NEW" y control de visibilidad individual.

Vista previa​

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

Comportamiento​

  • Los ítems se renderizan en el orden del array items.
  • Los ítems con options.is_visible: false no se muestran.
  • title.color y title.weight permiten destacar ítems promocionales (ej. texto rojo en negrita).
  • Si subtitle.text tiene valor, se muestra un subtítulo bajo el título del ítem.
  • options.is_new: true muestra una etiqueta "NEW" junto al título.

Configuración​

El JSON se introduce en el cuerpo del content asset en Business Manager → Content Assets.

{
  "items": [
    {
      "link": {
        "url": "$url('Search-Show', 'cgid', 'novedades')$",
        "target": "_self"
      },
      "title": {
        "text": "Novedades",
        "color": "",
        "weight": ""
      },
      "subtitle": {
        "text": "",
        "color": ""
      },
      "options": {
        "is_visible": true,
        "is_new": true
      }
    },
    {
      "link": {
        "url": "$url('Search-Show', 'cgid', 'outlet')$",
        "target": "_self"
      },
      "title": {
        "text": "OUTLET",
        "color": "red",
        "weight": "700"
      },
      "subtitle": {
        "text": "Hasta -50%",
        "color": "#e74c3c"
      },
      "options": {
        "is_visible": true,
        "is_new": false
      }
    },
    {
      "link": {
        "url": "$url('Search-Show', 'cgid', 'proxima-temporada')$",
        "target": "_self"
      },
      "title": {
        "text": "Próxima temporada",
        "color": "",
        "weight": ""
      },
      "subtitle": {
        "text": "",
        "color": ""
      },
      "options": {
        "is_visible": false,
        "is_new": false
      }
    }
  ]
}

Propiedades​

PropiedadTipoObligatorioDescripción
itemsarraySíLista de ítems del submenú. El orden del array define el orden visual.
items[].link.urlstringNoURL de destino. Admite expresiones $url y $httpsUrl de SFCC.
items[].link.targetstringNo"_self" (misma pestaña) o "_blank" (nueva pestaña).
items[].title.textstringSíTexto del ítem. Admite caracteres Unicode (ej. Ó → Ó).
items[].title.colorstringNoColor del título: nombre CSS ("red") o hexadecimal ("#e74c3c"). Si está vacío, usa el color por defecto.
items[].title.weightstringNoPeso de la fuente del título (ej. "700" para negrita). Si está vacío, usa el peso por defecto.
items[].subtitle.textstringNoTexto del subtítulo mostrado bajo el título. Si está vacío, no se renderiza.
items[].subtitle.colorstringNoColor del subtítulo. Si está vacío, usa el color por defecto.
items[].options.is_visiblebooleanSíSi false, el ítem no se muestra en el menú.
items[].options.is_newbooleanNoSi true, muestra la etiqueta "NEW" junto al título.

Notas y consejos​

Renderizado en cliente

Este content asset no usa una plantilla ISML. Es procesado por js/components/menu.js directamente en el navegador. El JSON del body del content asset es parseado y renderizado en el cliente.

$httpsUrl vs $url

Además de $url, los enlaces del submenú admiten $httpsUrl, que fuerza el protocolo HTTPS en la URL generada. Úsalo cuando necesites garantizar que el destino es siempre HTTPS independientemente del entorno:

"url": "$httpsUrl('Search-Show', 'cgid', 'gafas-de-sol', 'prefn1', 'hk_madein', 'prefv1', 'Spain')$"
Destacar ítems promocionales

Combina title.color y title.weight para dar visibilidad a ítems especiales sin necesidad de imágenes:

"title": {
  "text": "OUTLET",
  "color": "red",
  "weight": "700"
}
Expresiones $url para los enlaces
"url": "$url('Search-Show', 'cgid', 'ID_DE_CATEGORIA')$"
"url": "$url('Product-Show', 'pid', 'ID_DE_PRODUCTO')$"
"url": "$url('Page-Show', 'cid', 'ID_DE_PAGINA')$"