Preguntas con imagen

Igual que Preguntas Frecuentes, más una imagen de cabecera.

En el panel	tipo en el JSON	Token de la clave
Preguntas con imagen	FAQ_WITH_IMAGE	faq_with_image

Shape

{
  tipo: 'FAQ_WITH_IMAGE';
  titulo: string | null;
  imagen: { url: string; alt: string | null } | null;   // a nivel sección
  items: Array<{
    pregunta: string;
    respuesta: string;
    orden: number;
  }>;
}

La única diferencia con FAQ es imagen, y va a nivel sección, no por item. Los items son idénticos.

Ejemplo

{
  "faq_with_image-product-333333174-cmqxb91mn0007ab1c9dk4mz2p": {
    "tipo": "FAQ_WITH_IMAGE",
    "titulo": "Cuidados del producto",
    "imagen": {
      "url": "https://cdn.example.com/cuidados.jpg",
      "alt": "Etiqueta de cuidados de la prenda"
    },
    "items": [
      {
        "pregunta": "¿Se puede lavar en lavarropas?",
        "respuesta": "Sí, en ciclo delicado y con agua fría.",
        "orden": 0
      }
    ],
    "estado": { "lifecycle": "active", "storefrontVisible": true },
    "orden": 1
  }
}

Renderizar

Lo específico del tipo es la cabecera; el acordeón es el mismo que en Preguntas Frecuentes.

for (const faq of seccionesDeTipo(bundle, 'faq_with_image')) {
  // `imagen` puede ser null: solo se incluyen los assets ya procesados.
  const cabecera = faq.imagen
    ? `<img src="${faq.imagen.url}" alt="${escapar(faq.imagen.alt ?? '')}" loading="lazy">`
    : '';

  contenedor.insertAdjacentHTML(
    'beforeend',
    `<section class="sectionfy-faq-img" data-block="${faq.key}">
       ${cabecera}
       ${faq.titulo ? `<h2>${escapar(faq.titulo)}</h2>` : ''}
       ${renderAcordeon(faq.items)}
     </section>`,
  );
}

Notas

• imagen puede ser null y es un caso normal, no un error. Diseña el layout para que se sostenga sin imagen.
• Si la imagen es decorativa, pasa alt="" en vez de omitir el atributo.