Countdown

Countdown es un componente que permite renderizar un contador regresivo mostrando el tiempo restante hasta una fecha específica. Puede ser configurado con distintas opciones de visibilidad y personalización desde el Site Editor.

countdown-img

Configuración

Agregar la dependencia en tu archivo manifest.json. Ejemplo:
manifest.json
```
1
  "dependencies": {
2
    "cruce.store-components": "4.x"
3
  }
```

Agrega el bloque en tu archivo correspondiente. Ejemplo con todas las props:

1
{
2
  "countdown": {
3
    "props": {
4
      "endDate": "2024-12-31T23:59:59Z",
5
      "showSeconds": true,
6
      "showDividers": true,
7
      "showTimeDescription": true,
8
      "ExpirationComponent": "CustomExpirationComponent",
9
      "TitleComponent": "CustomTitleComponent"
10
    }
11
  }
12
}

Propiedades generales

Prop name	Type	Description	Default value
`endDate`	`String`	La fecha y hora hasta la finalización del contador. Formato ISO 8601	`Timestamp`
`showSeconds`	`Boolean`	Determina si se muestran los segundos en el contador	`true`
`showDividers`	`Boolean`	Determina si se muestran los divisores entre días, horas, minutos y/o segundos.	`true`
`showTimeDescription`	`Boolean`	Determina si se muestra la descripción del tiempo (días, horas, etc.)	`true`
`ExpirationComponent`	`Component`	Componente a mostrar cuando el tiempo ha expirado. *Solo se acepta UN componente y no un conjunto de hijos*	`IO Slot`
`TitleComponent`	`Component`	Componente de título a mostrar sobre el contador *Solo se acepta UN componente y no un conjunto de hijos*	`IO Slot`

Personalización

Para aplicar personalizaciones de CSS en este y otros bloques, sigue las instrucciones dadas en: Using CSS Handles for store customization.

CSS Handles
`appContainer`
`countdown`
`time`
`expiredContent`