Preguntas Frecuentes

Un bloque de preguntas y respuestas.

En el panel	`tipo` en el JSON	Token de la clave
Preguntas Frecuentes	`FAQ`	`faq`

Shape

{
  tipo: 'FAQ';
  titulo: string | null;
  items: Array<{
    pregunta: string; // requerido
    respuesta: string; // requerido
    orden: number;
  }>;
}

Más los campos comunes a todas las secciones (estado, orden, indice, nombre_personalizado), descritos en la estructura de la respuesta.

Ejemplo

{
  "faq-product-333333174-cmqic4kt5000ieq2bk3hbiat3": {
    "tipo": "FAQ",
    "titulo": "Preguntas frecuentes",
    "items": [
      {
        "pregunta": "¿Hacen envíos a todo el país?",
        "respuesta": "Sí, con despacho en 24 a 72 horas hábiles.",
        "orden": 0
      },
      {
        "pregunta": "¿Puedo cambiar el talle?",
        "respuesta": "Tienes 30 días para cambios sin cargo.",
        "orden": 1
      }
    ],
    "estado": { "lifecycle": "active", "storefrontVisible": true },
    "orden": 0
  }
}

Renderizar

Un acordeón nativo con <details> cubre el caso sin JavaScript de interacción:

for (const faq of seccionesDeTipo(bundle, 'faq')) {
  const items = faq.items
    .slice()
    .sort((a, b) => a.orden - b.orden)
    .map(
      (item) => `
        <details class="sectionfy-faq__item">
          <summary>${escapar(item.pregunta)}</summary>
          <div>${escapar(item.respuesta)}</div>
        </details>
      `,
    )
    .join('');

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

Notas

También aparece en una categoría concreta. El comerciante puede agregar preguntas a una categoría puntual, y entonces el segundo segmento de la clave es category y el tercero es el ID de esa categoría:
```
"faq-category-40622990-cmtacpz3y0001srlqdor0qjoz": {
  "titulo": "Preguntas Frecuentes",
  "items": [{ "pregunta": "¿Hacen envíos?", "respuesta": "Sí.", "orden": 0 }],
  "estado": { "lifecycle": "active", "storefrontVisible": true },
  "orden": 0,
  "tipo": "FAQ"
}
```
El shape y el código de render son idénticos — pídelo en /{token}/category/{id}. No hay FAQs en la página de categoría global (/{token}/category-page): ese alcance no las admite.
Puede haber varios bloques en la misma página. Cuando hay dos o más, cada uno trae indice para que los distingas.
Si en vez de usar tipo analizas la clave, compara por token exacto: startsWith('faq') también matchea Preguntas con imagen (faq_with_image), que es otro tipo con otro shape.
pregunta y respuesta son strings requeridos: no hace falta guardar contra null.