Page Stories

Página editorial que presenta una colección de historias o artículos en formato de tarjeta. Consta de dos zonas:

Cabecera (header) — título y descripción de la página.
Historias (items) — listado de tarjetas, cada una con imagen clicable, título, descripción y uno o varios botones CTA con colores totalmente configurables.

Vista previa

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

Comportamiento

Cabecera: el title y description se muestran en la parte superior de la página. Ambos son opcionales; si están vacíos, la zona de cabecera puede no renderizarse.
Imagen de tarjeta: la imagen (image.source) se envuelve en un enlace hacia image.link.url. Si url está vacío, la imagen no es clicable.
Botones: cada tarjeta puede tener varios botones (buttons[]). Cada botón tiene texto, enlace y paleta de colores completa (normal + hover) totalmente independiente.
Orden de tarjetas: los ítems se renderizan en el orden en que aparecen en el array items.

Configuración

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

{
  "header": {
    "title": "Nuestras historias",
    "description": "Descubre las campañas y colecciones que definen la temporada."
  },
  "items": [
    {
      "title": "Colección Verano 2025",
      "description": "El sol, la arena y las gafas perfectas para cada momento. Conoce los estilos que marcarán el verano.",
      "image": {
        "source": "pages/stories/summer25-cover.jpg?$staticlink$",
        "alt": "Colección Verano 2025",
        "link": {
          "url": "$url('Search-Show', 'cgid', 'verano-2025')$",
          "target": "_self"
        }
      },
      "buttons": [
        {
          "text": "Descubrir la colección",
          "link": {
            "url": "$url('Search-Show', 'cgid', 'verano-2025')$",
            "target": "_self"
          },
          "color": {
            "text": "#ffffff",
            "background": "#000000",
            "border": "#000000",
            "hover": {
              "text": "#000000",
              "background": "#ffffff",
              "border": "#000000"
            }
          }
        }
      ]
    },
    {
      "title": "Edición Limitada Festival",
      "description": "Diseños exclusivos para los que viven la música. Disponibilidad limitada.",
      "image": {
        "source": "pages/stories/festival-cover.jpg?$staticlink$",
        "alt": "Edición Limitada Festival",
        "link": {
          "url": "$url('Search-Show', 'cgid', 'edicion-limitada')$",
          "target": "_blank"
        }
      },
      "buttons": [
        {
          "text": "Ver modelos",
          "link": {
            "url": "$url('Search-Show', 'cgid', 'edicion-limitada')$",
            "target": "_blank"
          },
          "color": {
            "text": "#000000",
            "background": "#cdff03",
            "border": "#cdff03",
            "hover": {
              "text": "#ffffff",
              "background": "#000000",
              "border": "#000000"
            }
          }
        },
        {
          "text": "Más info",
          "link": {
            "url": "$url('Page-Show', 'cid', 'festival-info')$",
            "target": "_self"
          },
          "color": {
            "text": "#000000",
            "background": "transparent",
            "border": "#000000",
            "hover": {
              "text": "#ffffff",
              "background": "#000000",
              "border": "#000000"
            }
          }
        }
      ]
    }
  ]
}

Propiedades

Cabecera (`header`)

Propiedad	Tipo	Obligatorio	Descripción
`header.title`	`string`	No	Título principal de la página.
`header.description`	`string`	No	Subtítulo o descripción de la página.

Historias (`items[]`)

Propiedad	Tipo	Obligatorio	Descripción
`items[].title`	`string`	No	Título de la tarjeta.
`items[].description`	`string`	No	Texto descriptivo de la tarjeta.
`items[].image.source`	`string`	Sí	Ruta de la imagen de la tarjeta. Debe terminar en `?$staticlink$`.
`items[].image.alt`	`string`	No	Texto alternativo de la imagen (accesibilidad y SEO).
`items[].image.link.url`	`string`	No	URL de destino al hacer clic en la imagen. Admite expresiones `$url` de SFCC.
`items[].image.link.target`	`string`	No	`"_self"` (misma pestaña) o `"_blank"` (nueva pestaña).
`items[].buttons`	`array`	No	Lista de botones CTA de la tarjeta. Puede tener varios.
`items[].buttons[].text`	`string`	Sí	Texto visible del botón.
`items[].buttons[].link.url`	`string`	No	URL de destino del botón. Admite expresiones `$url` de SFCC.
`items[].buttons[].link.target`	`string`	No	`"_self"` o `"_blank"`.
`items[].buttons[].color.text`	`string`	No	Color del texto del botón (valor CSS).
`items[].buttons[].color.background`	`string`	No	Color de fondo del botón.
`items[].buttons[].color.border`	`string`	No	Color del borde del botón.
`items[].buttons[].color.hover.text`	`string`	No	Color del texto en hover.
`items[].buttons[].color.hover.background`	`string`	No	Color de fondo en hover.
`items[].buttons[].color.hover.border`	`string`	No	Color del borde en hover.

Notas y consejos

Fichero de plantilla

pages/stories.isml

Expresiones $url para los enlaces

Usa expresiones $url de SFCC para que los enlaces funcionen en todos los entornos:

"url": "$url('Search-Show', 'cgid', 'ID_DE_CATEGORIA')$"
"url": "$url('Product-Show', 'pid', 'ID_DE_PRODUCTO')$"
"url": "$url('Page-Show', 'cid', 'ID_DE_PAGINA')$"

Varios botones por tarjeta

El campo buttons es un array: puedes añadir tantos botones como necesites en cada tarjeta con estilos distintos. El ejemplo siguiente muestra un botón sólido y uno con fondo transparente (tipo "outlined"):

"buttons": [
  {
    "text": "Ver colección",
    "color": { "background": "#000000", "text": "#ffffff", ... }
  },
  {
    "text": "Más información",
    "color": { "background": "transparent", "text": "#000000", ... }
  }
]

Imagen clicable vs botón con el mismo enlace

image.link.url y buttons[].link.url son independientes. Lo habitual es que apunten al mismo destino, pero puedes hacer que la imagen lleve a la categoría general y el botón a una página de detalle de campaña, por ejemplo.

Imágenes: recuerda ?$staticlink$

Todas las rutas de imagen deben terminar en ?$staticlink$ para que SFCC resuelva correctamente la URL estática del cartucho:

"source": "pages/stories/mi-imagen.jpg?$staticlink$"

Vista previa​

Comportamiento​

Configuración​

Propiedades​

Cabecera (header)​

Historias (items[])​

Notas y consejos​