CTA Banner Doped

Banner promocional de alto impacto que combina imagen responsive (mobile/desktop), bloque de texto configurable (logo, título, subtítulo, textos de apoyo), botones con colores completamente personalizables y un countdown integrado opcional. El texto puede situarse fuera de la imagen (layout por defecto) o superpuesto sobre ella activando text_over_banner.

Vista previa

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

Comportamiento

Imagen responsive: Usa <picture> con <source media="(min-width: 48em)"> para mostrar la imagen de desktop en pantallas ≥768 px y la de mobile por defecto. Proporciones de referencia: 542 × 784 px (mobile) y 1082 × 338 px (desktop).
Prioridad de carga: Si priority: true, la imagen principal recibe fetchPriority="high" (LCP prioritario). Si false, se carga con loading="lazy". Úsalo en el banner que aparece primero en el viewport sin scroll.
Ancho completo: Si fullwidth: true, el banner ocupa todo el ancho del viewport sin contenedor limitador. Si false, queda centrado dentro del ancho máximo de página.
Texto sobre banner: Si text_over_banner.mobile.active o text_over_banner.desktop.active son true, el bloque de textos y botones se posiciona sobre la imagen. La posición se controla mediante clases CSS: top / center / bottom en mobile y left / center / right en desktop. El color y el tamaño de la capa se aplican mediante CSS custom properties.
Enlace en toda la imagen: Si link.url tiene valor, la imagen entera se envuelve en un <a>.
Textos opcionales: Cada elemento de texto (logo, title, subtitle, primary, secondary, tertiary) se renderiza independientemente. title y subtitle aceptan etiquetas HTML semánticas (h1–h6, div). Todos admiten HTML en content.
Botones con temas de color: Cada botón define sus propios colores de texto y fondo en estado normal y hover, aplicados mediante CSS custom properties.
Countdown integrado: El countdown sigue las mismas reglas que el content asset standalone: se oculta fuera del rango de fechas y se elimina del DOM si las fechas no son válidas.
Tertiary siempre al final: El texto tertiary se renderiza siempre después de los botones y el countdown, independientemente de su posición en el JSON.

Configuración

Content Asset

El widget se configura mediante un JSON en Business Manager → Content Assets y se incluye en cualquier página mediante <iscontentasset aid="ID_DEL_ASSET" />.

{
  "fullwidth": false,
  "priority": false,
  "text_over_banner": {
    "mobile": {
      "active": false,
      "size": 0,
      "position": "bottom"
    },
    "desktop": {
      "active": false,
      "size": 0,
      "position": "right"
    },
    "color": "transparent"
  },
  "link": {
    "url": "$url('Search-Show', 'cgid', 'gafas-sol')$",
    "target": "_self"
  },
  "images": {
    "mobile": "pages/banners/cta/img/banner-mobile.jpg?$staticlink$",
    "desktop": "pages/banners/cta/img/banner-desktop.jpg?$staticlink$"
  },
  "text": {
    "is_centered": false,
    "logo": {
      "visible": false,
      "url": {
        "mobile": "images/logos/logo-promo.svg?$staticlink$",
        "desktop": "images/logos/logo-promo.svg?$staticlink$"
      }
    },
    "title": {
      "visible": true,
      "tag": "h2",
      "content": "Nueva <strong>colección</strong> verano",
      "color": "#FFFFFF",
      "is_bold": false
    },
    "subtitle": {
      "visible": false,
      "tag": "div",
      "content": "",
      "color": "#FFFFFF",
      "is_bold": false
    },
    "primary": {
      "visible": true,
      "content": "Descubre nuestra nueva colección de verano.",
      "color": "#FFFFFF"
    },
    "secondary": {
      "visible": false,
      "content": "",
      "color": "#FFFFFF"
    },
    "tertiary": {
      "visible": false,
      "content": "",
      "color": "#FFFFFF"
    },
    "klarna": {
      "visible": false
    }
  },
  "buttons": [
    {
      "visible": true,
      "text": "Comprar ahora",
      "link": {
        "url": "$url('Search-Show', 'cgid', 'gafas-sol')$",
        "target": "_self"
      },
      "color": {
        "text": {
          "default": "#000000",
          "hover": "#FFFFFF"
        },
        "background": {
          "default": "#FFFFFF",
          "hover": "#000000"
        }
      }
    }
  ],
  "countdown": {
    "start": "Jun 01, 2025 10:00:00",
    "end": "Jun 30, 2025 23:59:59",
    "option": {
      "visible": false,
      "type": "normal",
      "show_days": true,
      "show_labels": true,
      "is_bold": false,
      "is_centered": false
    },
    "label": {
      "days": "d",
      "hours": "h",
      "minutes": "m",
      "seconds": "s"
    },
    "color": {
      "text": "#FFFFFF",
      "background": "#000000",
      "background_opacity": "0.8"
    }
  }
}

Propiedades

Raíz

Propiedad	Tipo	Obligatorio	Descripción
`fullwidth`	`boolean`	No	Si `true`, el banner ocupa todo el ancho del viewport. Si `false` (default), queda centrado con ancho máximo de página.
`priority`	`boolean`	No	Si `true`, la imagen principal recibe `fetchPriority="high"`. Usar solo en el primer banner visible sin scroll (LCP).
`text_over_banner`	`object`	No	Configuración del texto superpuesto sobre la imagen. Ver tabla a continuación.
`link`	`object`	No	Enlace que envuelve toda la imagen del banner.
`images`	`object`	Sí	Rutas de las imágenes mobile y desktop.
`text`	`object`	No	Bloque de texto completo: logo, título, subtítulo y textos de apoyo.
`buttons`	`array`	No	Array de botones CTA con colores individuales.
`countdown`	`object`	No	Contador regresivo integrado. Ver documentación de Countdown.

`text_over_banner`

Propiedad	Tipo	Obligatorio	Descripción
`text_over_banner.mobile.active`	`boolean`	No	Si `true`, el bloque de texto se superpone sobre la imagen en mobile.
`text_over_banner.mobile.size`	`number`	No	Tamaño de la zona de texto superpuesto en mobile (CSS custom property `--size-mobile`). Entero, por ejemplo `50`.
`text_over_banner.mobile.position`	`string`	No	Posición vertical del texto en mobile. Valores: `"top"`, `"center"`, `"bottom"` (default).
`text_over_banner.desktop.active`	`boolean`	No	Si `true`, el bloque de texto se superpone sobre la imagen en desktop.
`text_over_banner.desktop.size`	`number`	No	Tamaño de la zona de texto superpuesto en desktop (CSS custom property `--size-desktop`).
`text_over_banner.desktop.position`	`string`	No	Posición horizontal del texto en desktop. Valores: `"left"`, `"center"`, `"right"` (default).
`text_over_banner.color`	`string`	No	Color de fondo de la zona de texto superpuesta. Formato hex o nombre CSS. Default: `"transparent"`.

`link`

Propiedad	Tipo	Obligatorio	Descripción
`link.url`	`string`	No	URL de destino del banner completo. Admite expresiones `$url` de SFCC. Si está vacío, la imagen no es clicable.
`link.target`	`string`	No	Comportamiento del enlace: `"_self"` (misma pestaña) o `"_blank"` (nueva pestaña). Default: `"_self"`.

`images`

Propiedad	Tipo	Obligatorio	Descripción
`images.mobile`	`string`	Sí	Imagen principal para mobile (viewport < 768 px). Referencia: 542 × 784 px. Debe terminar en `?$staticlink$`.
`images.desktop`	`string`	Sí	Imagen para desktop (viewport ≥ 768 px). Referencia: 1082 × 338 px. Debe terminar en `?$staticlink$`.

`text`

Propiedad	Tipo	Obligatorio	Descripción
`text.is_centered`	`boolean`	No	Si `true`, centra horizontalmente todo el bloque de texto y los botones.
`text.logo`	`object`	No	Logo adicional renderizado como `<picture>` sobre el título. Requiere `url.mobile` no vacío para activarse.
`text.logo.visible`	`boolean`	No	Si `true` y `url.mobile` no está vacío, muestra el logo.
`text.logo.url.mobile`	`string`	No	Ruta de la imagen del logo para mobile. Debe terminar en `?$staticlink$`.
`text.logo.url.desktop`	`string`	No	Ruta de la imagen del logo para desktop. Debe terminar en `?$staticlink$`.
`text.title`	`object`	No	Título principal del banner.
`text.title.visible`	`boolean`	No	Si `true` y `content` no está vacío, muestra el título.
`text.title.tag`	`string`	No	Etiqueta HTML del título: `"h1"`–`"h6"` o `"div"`. Default: `"div"`.
`text.title.content`	`string`	No	Contenido del título. Admite HTML (negritas, saltos de línea, etc.).
`text.title.color`	`string`	No	Color del texto. Formato hexadecimal o nombre CSS. Default: `currentColor`.
`text.title.is_bold`	`boolean`	No	Si `true`, aplica `font-bold` al título mediante clase Tailwind.
`text.subtitle`	`object`	No	Subtítulo del banner. Mismas propiedades que `title` (incluye `tag`, `content`, `color`, `is_bold`).
`text.primary`	`object`	No	Texto de apoyo principal. Siempre se renderiza como `<div>`. Admite `content` con HTML.
`text.primary.visible`	`boolean`	No	Si `true` y `content` no está vacío, muestra el texto.
`text.primary.content`	`string`	No	Texto principal. Admite HTML.
`text.primary.color`	`string`	No	Color del texto. Formato hexadecimal. Default: `currentColor`.
`text.secondary`	`object`	No	Texto secundario de apoyo. Mismas propiedades que `primary` (`visible`, `content`, `color`). Tamaño de fuente menor.
`text.tertiary`	`object`	No	Texto terciario. Mismas propiedades que `primary`. Se renderiza después de los botones y el countdown.
`text.klarna`	`object`	No	Widget de Klarna. Solo requiere `visible: true` para activarse; no tiene contenido propio configurable aquí.

`buttons[]`

Cada elemento del array define un botón CTA independiente.

Propiedad	Tipo	Obligatorio	Descripción
`buttons[].visible`	`boolean`	No	Si `true` y `text` no está vacío, el botón se renderiza.
`buttons[].text`	`string`	Sí	Texto del botón.
`buttons[].link.url`	`string`	Sí	URL de destino. Admite expresiones `$url` de SFCC.
`buttons[].link.target`	`string`	No	`"_self"` (misma pestaña) o `"_blank"` (nueva pestaña).
`buttons[].color.text.default`	`string`	No	Color del texto en estado normal. Default: `currentColor`.
`buttons[].color.text.hover`	`string`	No	Color del texto al hacer hover. Default: `transparent`.
`buttons[].color.background.default`	`string`	No	Color de fondo en estado normal. Default: `transparent`.
`buttons[].color.background.hover`	`string`	No	Color de fondo al hacer hover. Default: `transparent`.

Notas y consejos

Ficheros

Plantilla de contenido
Componente

content/ctaBannerDoped.isml

components/cta/bannerDoped.isml

Imágenes y $staticlink$

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

"images": {
  "mobile":  "pages/banners/cta/img/banner-mobile.jpg?$staticlink$",
  "desktop": "pages/banners/cta/img/banner-desktop.jpg?$staticlink$"
}

Las dimensiones de referencia son 542 × 784 px para mobile y 1082 × 338 px para desktop.

Etiquetas semánticas para title y subtitle

El campo tag de title y subtitle permite controlar la jerarquía SEO del encabezado. Usa "h1" solo si es el único H1 de la página; en el resto de casos usa "h2"–"h6" o "div":

"title": {
  "visible": true,
  "tag": "h2",
  "content": "Nueva colección verano",
  "color": "#000000"
}

Enlaces dinámicos ($url)

Usa expresiones $url de SFCC para garantizar que los enlaces funcionen en todos los entornos (Sandbox, Staging, Producción):

"link": {
  "url": "$url('Search-Show', 'cgid', 'gafas-sol')$",
  "target": "_self"
}

Colores en formato hexadecimal

Todos los campos de color aceptan nombres CSS ("white", "transparent") pero se recomienda usar hexadecimal para garantizar consistencia visual en todos los entornos:

"color": {
  "text": {
    "default": "#000000",
    "hover": "#FFFFFF"
  },
  "background": {
    "default": "#FFFFFF",
    "hover": "#000000"
  }
}

Posición del texto superpuesto

Cuando text_over_banner.mobile.active o text_over_banner.desktop.active son true, el bloque de texto flota sobre la imagen mediante clases CSS:

Dispositivo	Valores de `position`
Mobile	`"top"`, `"center"`, `"bottom"`
Desktop	`"left"`, `"center"`, `"right"`

Prioridad de imagen (LCP)

Activa priority: true solo en el banner que aparece en el viewport sin necesidad de scroll (LCP). Usar priority: true en todos los banners anula su propósito y penaliza el rendimiento.

El countdown se elimina del DOM si las fechas no son válidas

El countdown integrado sigue exactamente las mismas reglas que el content asset standalone: si la fecha actual está fuera del rango start–end, el elemento desaparece del DOM (no solo se oculta). Si el countdown no aparece, comprueba el formato de las fechas (Mmm DD, YYYY HH:MM:SS en inglés) y que option.visible sea true.

Vista previa​

Comportamiento​

Configuración​

Content Asset​

Propiedades​

Raíz​

text_over_banner​

link​

images​

text​

buttons[]​

Notas y consejos​