Size Guide Apparel

Guía de tallas para productos de ropa (apparel) que se muestra en el PDP. Consta de un botón CTA que abre un modal con la guía, una imagen de referencia, un texto descriptivo y una tabla de medidas con filas y columnas configurables.

El subtítulo del CTA puede variar según el SKU del producto activo, lo que permite adaptar el mensaje a diferentes artículos usando un único content asset.

---

Vista previa

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

---

Comportamiento

• El botón CTA abre un modal con la guía de tallas. El texto del botón viene de texts.cta.
• Subtítulo por SKU: texts.ctaSubtitle es un array de entradas { id, text }. El componente busca la entrada cuyo id coincida con el SKU del producto actual y muestra su text como subtítulo bajo el CTA. Si no hay coincidencia, no se muestra subtítulo.
• texts.description admite HTML completo (párrafos, negritas, listas…).
• La tabla se construye a partir de table.header.columns (tamaños), table.header.rows (medidas) y table.values (datos). El array values tiene una entrada por fila, y cada entrada tiene un valor por columna.

---

Configuración

El JSON se introduce en el cuerpo del content asset en Business Manager → Content Assets.

{
  "image": "https://www.example.com/img/size-chart-diagram.jpg",
  "texts": {
    "cta": "Guía de tallas",
    "ctaSubtitle": [
      {
        "id": "PRODUCT_SKU_1",
        "text": "Subtítulo línea 1<br>Subtítulo línea 2"
      },
      {
        "id": "PRODUCT_SKU_2",
        "text": "Subtítulo línea 1"
      }
    ],
    "title": "Guía de tallas Hawkers",
    "description": "<p>Todas las medidas están en centímetros.</p><p>Para más información contacta con <strong>atención al cliente</strong>.</p>"
  },
  "table": {
    "header": {
      "columns": ["XS", "S", "M", "L", "XL"],
      "rows": ["Pecho", "Cintura", "Cadera"]
    },
    "values": [
      ["80", "84", "88", "92", "96"],
      ["62", "66", "70", "74", "78"],
      ["88", "92", "96", "100", "104"]
    ]
  }
}

---

Propiedades

Imagen y textos

Propiedad	Tipo	Obligatorio	Descripción
image	string	No	URL absoluta de la imagen de referencia de medidas (diagrama corporal, etc.).
texts.cta	string	Sí	Texto del botón CTA que abre la guía de tallas.
texts.ctaSubtitle	array	No	Subtítulos por SKU mostrados bajo el botón CTA. Cada entrada aplica a un producto concreto.
texts.ctaSubtitle[].id	string	Sí	SKU del producto al que aplica el subtítulo.
texts.ctaSubtitle[].text	string	Sí	Texto del subtítulo. Admite HTML inline (ej. <br> para saltos de línea).
texts.title	string	No	Título mostrado dentro del modal de la guía de tallas.
texts.description	string	No	Descripción con soporte de HTML completo (<p>, <strong>, <ul>, etc.).

Tabla de medidas

Propiedad	Tipo	Obligatorio	Descripción
table.header.columns	string[]	Sí	Cabeceras de columna (tamaños): ej. ["XS", "S", "M", "L", "XL"].
table.header.rows	string[]	Sí	Cabeceras de fila (medidas): ej. ["Pecho", "Cintura", "Cadera"].
table.values	array[]	Sí	Datos de la tabla. Un array por fila (mismo orden que rows), con un valor por columna (mismo orden que columns).

---

Notas y consejos

Fichero de plantilla

components/pdp/size-guide-apparel.isml

Estructura de la tabla: filas × columnas

table.values es un array de arrays. El orden es primero filas, luego columnas: el primer array corresponde a la primera fila (rows[0]), y dentro de ese array cada posición corresponde a una columna (columns[0], columns[1], …).

Por ejemplo, con rows: ["Pecho", "Cintura"] y columns: ["S", "M", "L"]:

"values": [
  ["84", "88", "92"],   // fila Pecho:   S=84, M=88, L=92
  ["66", "70", "74"]    // fila Cintura: S=66, M=70, L=74
]

El número de arrays debe coincidir con rows.length, y cada array debe tener columns.length valores.

Subtítulo por SKU: personalización sin duplicar assets

Gracias a ctaSubtitle, un único content asset puede mostrar subtítulos distintos para productos diferentes. Útil cuando varios productos de una misma línea comparten la misma tabla de tallas pero necesitan un texto de contexto diferente:

"ctaSubtitle": [
  { "id": "HK-TSHIRT-S-BLK", "text": "Talla regular — sube una talla si dudas" },
  { "id": "HK-HOODIE-M-WHT", "text": "Talla oversize — mantén tu talla habitual" }
]

La imagen usa URL absoluta, no $staticlink$

A diferencia de otros content assets, image acepta una URL absoluta directa (CDN, servidor externo…). No añadas ?$staticlink$.

HTML en description

El campo description renderiza HTML completo. Puedes estructurar el contenido con párrafos, negritas o listas:

"description": "<p>Medidas en cm.</p><ul><li>Mide por la parte más ancha del pecho.</li><li>Mide en la cintura natural.</li></ul>"