Skip to main content

Countdown

Widget que muestra un contador regresivo animado en tiempo real. Permite definir una ventana de tiempo activa (start → end) y personalizar el estilo visual (tipo de layout, negrita, centrado, colores y etiquetas). El contador se oculta automáticamente si la campaña aún no ha empezado o si ya ha expirado.

Vista previa​

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

Comportamiento​

  • Ventana de tiempo activa: El contador solo se muestra si la fecha actual está entre start y end. Si la campaña no ha comenzado todavía o ya ha terminado, el elemento se elimina del DOM automáticamente.
  • Oculto hasta inicializado: El contenedor arranca con display: none y solo se hace visible una vez que el JS valida que el contador es activo, evitando flashes de contenido.
  • Actualización en tiempo real: El contador se recalcula cada segundo.
  • Días opcionales: Si show_days: false, los días no se muestran y las horas pueden superar 23 (ej. "125:30:00" en lugar de "05d 01:30:00").
  • Etiquetas personalizables: Si show_labels: true, se muestran las abreviaturas definidas en el objeto label debajo de cada unidad de tiempo.
  • Colores vía CSS variables: Los colores de texto, fondo y opacidad se aplican mediante variables CSS (--text-color, --bg-color, --bg-opacity).

Configuración​

Content Asset​

El widget se configura mediante un JSON en Business Manager → Content Assets y se incluye en cualquier página mediante <iscontentasset aid="ID_DEL_ASSET" />.

{
  "start": "Jun 01, 2025 10:00:00",
  "end": "Jun 30, 2025 23:59:59",
  "option": {
    "visible": true,
    "type": "normal",
    "show_days": true,
    "show_labels": true,
    "is_bold": true,
    "is_centered": true
  },
  "label": {
    "days": "d",
    "hours": "h",
    "minutes": "m",
    "seconds": "s"
  },
  "color": {
    "text": "#FFFFFF",
    "background": "#000000",
    "background_opacity": "0.8"
  }
}

Propiedades​

Raíz​

PropiedadTipoObligatorioDescripción
startstringSíFecha y hora de inicio de la campaña. Formato: Mmm DD, YYYY HH:MM:SS en inglés (ej. "Jun 01, 2025 10:00:00").
endstringSíFecha y hora de fin de la campaña. Mismo formato que start. El contador desaparece del DOM al alcanzar esta fecha.
optionobjectSíOpciones de visualización del contador.
labelobjectNoEtiquetas de texto para cada unidad de tiempo (solo visibles si option.show_labels: true).
colorobjectNoColores del contador aplicados mediante CSS variables.

option​

PropiedadTipoObligatorioDescripción
option.visiblebooleanSíSi false, el contador no se renderiza en ningún caso aunque las fechas sean válidas.
option.typestringNoEstilo de layout del contador. Valores: "normal" (bloques con separador :), "simple" (elementos inline sin separador).
option.show_daysbooleanNoSi true, muestra los días como unidad separada. Si false, las horas pueden superar 23 sin mostrar días.
option.show_labelsbooleanNoSi true, muestra las etiquetas de label debajo de cada unidad de tiempo.
option.is_boldbooleanNoSi true, aplica font-bold al texto del contador.
option.is_centeredbooleanNoSi true, centra el contenido del contador horizontalmente.

label​

PropiedadTipoObligatorioDescripción
label.daysstringNoAbreviatura de días (ej. "d", "días").
label.hoursstringNoAbreviatura de horas (ej. "h", "horas").
label.minutesstringNoAbreviatura de minutos (ej. "m", "min").
label.secondsstringNoAbreviatura de segundos (ej. "s", "seg").

color​

PropiedadTipoObligatorioDescripción
color.textstringNoColor del texto del contador. Formato hexadecimal ("#FFFFFF") o nombre CSS ("white"). Default: white.
color.backgroundstringNoColor de fondo del contador. Formato hexadecimal o nombre CSS. Default: initial (sin fondo).
color.background_opacitystringNoOpacidad del fondo. Valor entre "0" (transparente) y "1" (opaco). Default: initial.

Notas y consejos​

Ficheros

content/countdown.isml

Formato de fechas

Las fechas deben escribirse en inglés con el formato Mmm DD, YYYY HH:MM:SS:

"start": "Jun 01, 2025 10:00:00",
"end":   "Jun 30, 2025 23:59:59"

Los meses abreviados en inglés: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.

Formato de colores

Se recomienda usar formato hexadecimal para garantizar consistencia visual:

"color": {
  "text": "#FFFFFF",
  "background": "#000000",
  "background_opacity": "0.5"
}
Tipos de layout (option.type)

Solo hay dos tipos activos en el código:

TipoDescripción
"normal"Bloques independientes por unidad de tiempo, separados por :. Es el tipo por defecto.
"simple"Unidades en línea con <span> y etiqueta, sin separadores :.
El contador se elimina del DOM si las fechas no son válidas

Si la fecha actual no está dentro del rango start–end, el elemento desaparece completamente del DOM (no solo se oculta con CSS). Esto significa que no ocupará espacio en la página, pero también que no hay indicador visible de por qué no aparece. Comprueba siempre el formato y el rango de fechas si el contador no se muestra.