Skip to main content

Footer

Widget configurable que define la estructura completa del pie de página (footer) de la web. Permite gestionar de manera centralizada el logotipo, los enlaces a redes sociales, las columnas de navegación agrupadas, los enlaces de carácter legal y la información de copyright.

Vista previa​

Estructura del footer

Comportamiento​

  • El footer se renderiza globalmente en el layout principal de todas las páginas del sitio.
  • La estructura y los enlaces se cargan dinámicamente a partir del JSON configurado en el content asset footer.
  • Cada elemento del menú de enlaces y redes sociales soporta la propiedad "visible": false para ocultarse selectivamente sin borrar su configuración.
  • Las URLs de navegación admiten 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')$
  • Enlace al content asset de los iconos de métodos de pago (contentAssetIdForPaymentIcons) para desacoplar el listado de métodos soportados.

Configuración​

Content Asset​

El content asset se configura mediante un JSON en Business Manager → Content Assets con el ID footer.

{
  "logo": {
    "image": "images/logo-hawkers-black.svg?$staticlink$",
    "alt": "Hawkers"
  },
  "socialMedia": [
    {
      "visible": true,
      "title": "Instagram",
      "image": "images/socialMedia/instagram-icon.svg?$staticlink$",
      "link": {
        "url": "https://www.instagram.com/hawkersco",
        "target": "_blank"
      }
    }
  ],
  "groupLinks": [
    {
      "title": "collections",
      "items": [
        {
          "visible": true,
          "title": "Sunglasses",
          "link": {
            "url": "$url('Search-Show', 'cgid', 'gafas-de-sol')$",
            "target": "_self"
          }
        }
      ]
    }
  ],
  "legalLinks": {
    "title": "legal",
    "items": [
      {
        "visible": true,
        "title": "Cookies",
        "link": {
          "url": "$url('Page-Show', 'cid', 'cookies')$",
          "target": "_self"
        }
      }
    ]
  },
  "contentAssetIdForPaymentIcons": "footer-payment-method-icons",
  "copyright": "Hawkers Group. All rights reserved."
}

Propiedades​

PropiedadTipoObligatorioDescripción
logoobjectSíContiene la información del logotipo (image con staticlink y texto alt).
socialMediaarrayNoLista de enlaces a redes sociales con icono (image), URL y target.
groupLinksarraySíBloques de enlaces agrupados por columnas (ej. Ayuda, Colecciones, Compañía).
legalLinksobjectNoBloque específico de enlaces legales (Términos, Privacidad, Cookies) con su título.
contentAssetIdForPaymentIconsstringNoID del content asset que contiene y renderiza los iconos de métodos de pago.
copyrightstringNoTexto de propiedad intelectual o derechos reservados del pie de página.

Notas y consejos​

Ficheros

components/footer/pageFooter.isml

Imágenes con staticlink

Todas las URLs de imágenes y SVGs que apunten a recursos locales del cartucho deben terminar con ?$staticlink$ para que SFCC las resuelva correctamente de forma estática.

Enlaces dinámicos ($url)

Para evitar romper enlaces cuando cambien los dominios o el entorno (staging/producción), utiliza la sintaxis $url de SFCC para generar rutas dinámicas:

  • Categoria: $url('Search-Show', 'cgid', 'ID_DE_CATEGORIA')$
  • Producto: $url('Product-Show', 'pid', 'ID_DE_PRODUCTO')$
  • Página estática: $url('Page-Show', 'cid', 'ID_DE_PAGE')$
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).