Heading Texts & Countdown

Slot de encabezado de página que combina un bloque de texto (título, descripción y nota legal) con un contador regresivo. Es ideal para páginas de campaña o promoción donde se necesita comunicar un mensaje con fecha límite.

---

Vista previa

Sin imagen disponible aún. Añade una captura en ./img/heading-texts-and-countdown.jpg y descomenta la línea siguiente.

---

Comportamiento

• texts.title se muestra como encabezado de la sección.
• texts.description admite HTML completo (enlaces, negritas, etc.).
• texts.advice se usa habitualmente para el texto legal o condiciones (<sup>*</sup> Condiciones...). Admite HTML inline.
• El bloque countdown sigue la misma estructura que el content asset Countdown: visible on/off, tipo flipdown, etiquetas de unidades y colores.

---

Configuración

El JSON se introduce en el body del content slot de tipo HTML en Business Manager → Content Slots.

{
  "texts": {
    "title": "Título principal",
    "description": "Texto descriptivo con <strong>destacados</strong> y <a href='#'>enlaces</a>.",
    "advice": "<sup>*</sup> Consulta las condiciones en la página de la oferta."
  },
  "countdown": {
    "start": "Jun 02, 2025 10:00:00",
    "end": "Sep 30, 2025 23:59:59",
    "option": {
      "visible": true,
      "type": "flipdown",
      "show_days": true,
      "show_labels": true,
      "is_bold": true
    },
    "label": {
      "days": "d",
      "hours": "h",
      "minutes": "m",
      "seconds": "s"
    },
    "color": {
      "text": "#ffffff",
      "background": "#000000",
      "background_opacity": "0.5"
    }
  }
}

---

Propiedades

Textos (texts)

Propiedad	Tipo	Obligatorio	Descripción
texts.title	string	No	Título principal de la sección.
texts.description	string	No	Descripción con soporte de HTML completo (<strong>, <a>, <em>, etc.).
texts.advice	string	No	Texto legal o de condiciones. Admite HTML inline (ej. <sup>*</sup>).

Contador regresivo (countdown)

Misma estructura que el content asset Countdown:

Propiedad	Tipo	Descripción
countdown.start	string	Fecha de inicio en formato Jan 01, 2025 09:30:00.
countdown.end	string	Fecha de fin en formato Jan 01, 2025 23:59:59. Al superarse, el contador desaparece.
countdown.option.visible	boolean	Si false, el contador no se muestra aunque las fechas sean válidas.
countdown.option.type	string	Tipo de visualización: "flipdown".
countdown.option.show_days	boolean	Muestra el contador de días.
countdown.option.show_labels	boolean	Muestra las etiquetas de unidades (d, h, m, s).
countdown.option.is_bold	boolean	Muestra los números en negrita.
countdown.label.days	string	Etiqueta de días (ej. "d", "días").
countdown.label.hours	string	Etiqueta de horas.
countdown.label.minutes	string	Etiqueta de minutos.
countdown.label.seconds	string	Etiqueta de segundos.
countdown.color.text	string	Color del texto del contador.
countdown.color.background	string	Color de fondo del contador.
countdown.color.background_opacity	string	Opacidad del fondo (valor entre "0" y "1").

---

Notas y consejos

Tipo de slot y plantilla

• Tipo: HTML
• Plantilla: slots/html/headingTextsAndCountdown.isml

Formato de fechas

Las fechas deben introducirse en el siguiente formato:

Jan 01, 2025 09:30:00

Abreviaturas de mes en inglés: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.

Ocultar el countdown sin borrarlo

Pon countdown.option.visible: false para desactivar el contador sin perder la configuración de fechas:

"option": { "visible": false, "type": "flipdown", ... }

HTML en description y advice

Ambos campos admiten HTML. advice se usa habitualmente para el texto legal con superíndice:

"advice": "<sup>*</sup> Oferta válida hasta agotar existencias. No acumulable con otras promociones."