Call to Action Banner

Un banner simple: título, texto, imagen y un botón. A diferencia del resto, su contenido vive a nivel sección — no tiene items.

En el panel	tipo en el JSON	Token de la clave
Call to Action Banner	CALL_TO_ACTION_BANNER	call_to_action_banner

Shape

{
  tipo: 'CALL_TO_ACTION_BANNER';
  titulo: string | null;
  texto: string | null;
  imagen: { url: string; alt: string | null } | null;
  boton: {
    etiqueta: string;   // no vacía si hay botón
    url: string;
  } | null;
  items: [];            // siempre vacío en este tipo
}

boton no tiene nueva_pestana

A diferencia de enlace en Carrusel de imágenes, el botón del banner es solo { etiqueta, url }. Abrir en pestaña nueva es decisión del tema.

items viene como array vacío, por consistencia con el resto de las secciones. Este tipo no lo usa.

Ejemplo

{
  "call_to_action_banner-home-general-cmr5j29xw0006pq3rt7yn8bd4": {
    "tipo": "CALL_TO_ACTION_BANNER",
    "titulo": "Súmate al club",
    "texto": "10% de descuento en tu primera compra y envíos gratis todo el año.",
    "imagen": {
      "url": "https://cdn.example.com/banner-club.jpg",
      "alt": "Personas comprando en la tienda"
    },
    "boton": {
      "etiqueta": "Quiero sumarme",
      "url": "https://mitienda.com/club"
    },
    "items": [],
    "estado": { "lifecycle": "active", "storefrontVisible": true },
    "orden": 5
  }
}

Renderizar

Cada parte es condicional, porque las cuatro pueden faltar:

for (const banner of seccionesDeTipo(bundle, 'call_to_action_banner')) {
  contenedor.insertAdjacentHTML(
    'beforeend',
    `<section class="sectionfy-cta" data-block="${banner.key}">
       ${
         banner.imagen
           ? `<img src="${banner.imagen.url}"
                   alt="${escapar(banner.imagen.alt ?? '')}" loading="lazy">`
           : ''
       }
       <div class="sectionfy-cta__cuerpo">
         ${banner.titulo ? `<h2>${escapar(banner.titulo)}</h2>` : ''}
         ${banner.texto ? `<p>${escapar(banner.texto)}</p>` : ''}
         ${
           banner.boton
             ? `<a class="sectionfy-cta__boton" href="${banner.boton.url}">
                  ${escapar(banner.boton.etiqueta)}
                </a>`
             : ''
         }
       </div>
     </section>`,
  );
}

Notas

• Un banner podría llegar con solo titulo. Renderiza cada parte de forma condicional, como en el ejemplo.
• Si boton existe, etiqueta está garantizada no vacía. No necesitas un texto de respaldo.
• No recorras items: en este tipo siempre está vacío.