Grid Promocional

Una grilla de celdas promocionales. Cada celda es una imagen con textos y un botón opcionales.

En el panel	tipo en el JSON	Token de la clave
Grid Promocional	GRID_PROMOCIONAL	grid_promocional

Shape

{
  tipo: 'GRID_PROMOCIONAL';
  titulo: string | null;
  items: Array<{
    imagen: string; // URL suelta, requerida
    titulo?: string;
    subtitulo?: string;
    texto_boton?: string;
    url_boton?: string; // solo http/https
    orden: number;
  }>;
}

Dos excepciones en el mismo tipo

imagen es un string, no { url, alt }. Es el único tipo así, y como no hay alt en el contrato, lo tienes que derivar tú — lo razonable es usar titulo.

Los campos de texto son opcionales, no nullables. No vienen como null: directamente no aparecen en el objeto. Verifica con ?. o con in, no comparando contra null.

Ejemplo

{
  "grid_promocional-home-general-cmr3k81ap0002fg7dq1x8pl4c": {
    "tipo": "GRID_PROMOCIONAL",
    "titulo": "Destacados de temporada",
    "items": [
      {
        "imagen": "https://cdn.example.com/promo-1.jpg",
        "titulo": "Hasta 30% off",
        "subtitulo": "Solo esta semana",
        "texto_boton": "Ver ofertas",
        "url_boton": "https://mitienda.com/ofertas",
        "orden": 0
      },
      {
        "imagen": "https://cdn.example.com/promo-2.jpg",
        "orden": 1
      }
    ],
    "estado": { "lifecycle": "active", "storefrontVisible": true },
    "orden": 0
  }
}

La segunda celda es el caso mínimo: solo imagen y orden. Ningún otro campo está presente en el objeto.

Sin color de fondo

El “Color de fondo” de esta sección se eliminó del panel y de la API. Ya no hay ningún campo de color en el contrato: el contenedor es transparente y hereda el fondo de tu página. Si tu código leía un backgroundColor de versiones anteriores (/api/public/grid-promocional), ignóralo: puede seguir llegando durante la transición, pero no tiene efecto.

Renderizar

function renderCelda(item) {
  // No hay alt en el contrato: derivarlo del título, o vacío si es decorativa.
  const alt = escapar(item.titulo ?? '');

  // El botón necesita las dos partes para ser usable.
  const boton =
    item.url_boton && item.texto_boton
      ? `<a class="sectionfy-grid__cta" href="${item.url_boton}">${escapar(item.texto_boton)}</a>`
      : '';

  return `<li class="sectionfy-grid__celda">
            <img src="${item.imagen}" alt="${alt}" loading="lazy">
            ${item.titulo ? `<h3>${escapar(item.titulo)}</h3>` : ''}
            ${item.subtitulo ? `<p>${escapar(item.subtitulo)}</p>` : ''}
            ${boton}
          </li>`;
}

Notas

• El botón necesita las dos partes. texto_boton sin url_boton (o al revés) no alcanza para un CTA usable.
• url_boton está restringida a http y https en el contrato, así que no recibirás javascript: ni data: por esa vía.
• Está pensada para pocas celdas, pero no asumas una cantidad fija: lee items.length y adapta las columnas.