GTM — Countdown Promo PLP

Script de la misma familia que Countdown Promo Cart y Countdown Promo PDP, adaptado para la página de listado (PLP). El countdown se inyecta dentro del área de contenido SEO superior (.js-seo-content-top) sin ocultar ningún elemento preexistente.

Arquitectura compartida

La lógica de fechas, el sistema de clases html/js, el skeleton de carga y el cálculo de unidades son idénticos a las variantes Cart y PDP. Esta página documenta únicamente las diferencias.

---

Variables GTM

Variable GTM	Descripción
{{countdown-promo-message-intro}}	Texto introductorio (prefijo countdown-promo-, sin cart- ni pdp-).
{{countdown-promo-start-date}}	Fecha de inicio.
{{countdown-promo-end-date}}	Fecha de fin.
{{countdown-promo-label-days}}	Etiqueta de días.
{{countdown-promo-label-hours}}	Etiqueta de horas.
{{countdown-promo-label-minutes}}	Etiqueta de minutos.
{{countdown-promo-label-seconds}}	Etiqueta de segundos.

---

Flags de configuración

Variable	Valor por defecto	Descripción
gtmCountdownPromoDelay	1000	Declarado pero no utilizado — ver nota de inicialización.
gtmCountdownPromoShowDays	false	Muestra columna de días y calcula horas módulo 24.
gtmCountdownPromoShowIntro	false	Inyecta el párrafo de texto intro.

---

Diferencias respecto a Cart y PDP

Aspecto	Promo Cart	Promo PDP	Promo PLP
Contenedor objetivo	.hw-cart_list-item-first-applicable	label[for='product-details-promotions'] > .hw-accordion__title	.js-seo-content-top
Oculta elementos al activar	Mensaje promo original	Icono + título acordeón	Nada
Control del hellobar	—	Sí (hideHellobar)	—
showIntro por defecto	true	false	false
Clase añadida al contenedor	—	—	gtm-html-countdown-container
Inicialización	setTimeout(delay)	setTimeout(delay)	Inmediata (sin setTimeout)
Fuente números	20px	20px	22px móvil / 32px ≥768px
Fuente etiquetas	8px	8px	10px móvil / 12px ≥768px
Media query responsive	No	No	Sí (@media (min-width: 768px))
Separador :	display: none	Visible	Visible

Delay declarado pero ignorado

La variable gtmCountdownPromoDelay = 1000 existe en el código pero el script llama a fnGtmInitCountdownPromo() directamente, sin el bloque if (delay > 0) setTimeout(...) que sí tienen Cart y PDP. El countdown se ejecuta en cuanto el tag de GTM se dispara.

---

Clase gtm-html-countdown-container

Esta variante es la única que modifica el layout del contenedor al activarse. Cuando el countdown se hace visible, se añade gtm-html-countdown-container a .js-seo-content-top:

.gtm-html-countdown-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* contenido SEO ↔ countdown */
  align-items: center;
  gap: 0 20px;
}

Esto permite que el countdown se posicione al lado del texto SEO existente en lugar de apilarse debajo.

---

Elemento del DOM

Selector	Descripción
.js-seo-content-top	Contenedor donde se inyecta el countdown y al que se añade la clase gtm-html-countdown-container al activarse.

---

Flujo de ejecución

fnGtmInitCountdownPromo()  ← se llama directamente al cargar el tag (sin setTimeout)
  │
  ├─ fnGtmCountdownPromoToPreInitElements()
  │   └─ Busca .js-seo-content-top → container
  │
  ├─ fnGtmCountdownPromoToInjectCode()
  │   └─ Crea div.content + p.intro (si showIntro) + div.countdown (skeleton)
  │       → appended al container, inicialmente con is-hidden
  │
  ├─ fnGtmCountdownPromoToInitElements()
  │   └─ Recupera nodos via gtm-js-* selectors
  │
  └─ fnGtmCountdownPromoToInitCountdown()
      ├─ Si now < startDate → no hace nada
      └─ Si now >= startDate Y diferencia > 0:
          └─ fnGtmCountdownPromoToShowCountdown()
              ├─ Muestra intro (si showIntro) + countdown (quita is-hidden)
              ├─ Añade gtm-html-countdown-container al container
              └─ setInterval 1000ms → fnGtmCountdownPromoToUpdateCountdown()
                  ├─ Recalcula tiempo y actualiza HTML
                  └─ Si diferencia <= 0:
                      └─ fnGtmCountdownPromoToRemoveCountdown()
                          ├─ Elimina intro + countdown del DOM
                          └─ clearInterval
                          (no restaura nada — no había elementos ocultos)