Guía de instalación y configuración de Countdown Promotion para Magento 2

El módulo Kowal_CountdownPromotion añade a Magento 2 un contador de fin de promoción. El contador puede mostrarse en el listado de categorías y en la ficha de producto cuando el producto tiene un precio especial activo y una fecha de fin de promoción configurada.

El contador visible se genera mediante JavaScript después de cargar la página. El backend transmite al frontend únicamente datos técnicos, entre ellos el ID del producto y el timestamp de fin de la promoción.

Requisitos

Antes de la instalación, asegúrate de que la tienda cumple los requisitos:

• Magento Open Source o Adobe Commerce 2.4.x,
• PHP 7.4 o PHP 8.1+ según la versión de Magento,
• posibilidad de instalar paquetes Composer de tipo magento2-module,
• acceso a la CLI de Magento,
• acceso al repositorio del módulo.

Instalación mediante Composer

Ve al directorio raíz del proyecto Magento.

Para el repositorio Git, añade el repositorio del módulo a la configuración de Composer:

composer config --global --auth github-oauth.github.com composer config repositories.kowal-countdown-promotion vcs https://github.com/kowalco/countdown-promotioncomposer require kowal/module-countdown-promotion

Tras la instalación, Composer colocará el módulo en el directorio:

vendor/kowal/module-countdown-promotion

Activación del módulo en Magento

Ejecuta los comandos de Magento desde el directorio raíz de la tienda:

bin/magento module:enable Kowal_CountdownPromotionbin/magento setup:upgradebin/magento cache:flush

En el entorno de producción, normalmente también se deben ejecutar los comandos de despliegue utilizados en el proyecto:

bin/magento setup:di:compilebin/magento setup:static-content:deploy -fbin/magento indexer:reindexbin/magento cache:flush

Configuración del producto

Para cada producto en el que deba aparecer el contador:

1. Configura Countdown Promotion en Yes.
2. Configura Special Price.
3. Configura Special Price To Date.
4. Opcionalmente, configura Special Price From Date.

El contador aparecerá solo cuando se cumplan todas las condiciones:

• el atributo countdown_promotion está activado,
• special_price está configurado,
• el precio especial es inferior al precio regular,
• special_from_date está vacío o la promoción ya ha comenzado,
• special_to_date está configurado en el futuro.

Para productos configurables, activa Countdown Promotion en el producto principal. El módulo puede usar la fecha de promoción del producto principal o las fechas de promoción activas de los productos simples asociados, cuando la promoción esté configurada en las variantes.

Configuración del módulo

Las opciones del módulo están disponibles en el panel de administración de Magento:

Stores > Configuration > Catalog > Countdown Promotion > Appearance

Después de cambiar la configuración, limpia la caché:

bin/magento cache:flush

Ajustes de posición del contador

El campo Category Placement define la posición del contador en el listado de categorías.

Opciones disponibles:

• Below price - contador debajo del precio,
• Bottom of product image - contador en la parte inferior de la imagen del producto,
• Top of product image - contador en la parte superior de la imagen del producto,
• Custom CSS selector - contador junto al elemento indicado mediante un selector CSS propio.

Cuando selecciones Custom CSS selector, completa el campo Category Custom CSS Selector. El elemento seleccionado debe tener data-product-id o estar dentro de la tarjeta de producto que contiene .price-box[data-product-id].

Selectores de ejemplo:

.price-box[data-product-id].product-item-info .price-box[data-product-id].product-item-details .price-box[data-product-id]

El campo Product Page Custom CSS Selector se aplica solo a la ficha de producto. Introduce el selector del elemento después del cual debe añadirse el contador.

Ejemplos:

.product-info-main .product-info-price#custom-price-target

Si el campo está vacío, el módulo utiliza el selector predeterminado:

.product-info-main .price-box

Ajustes de textos y formato de tiempo

El campo Text Before Countdown establece el texto antes del contador, por ejemplo:

Promocja kończy się za:

Si el campo está vacío, la etiqueta antes del contador no se muestra y el propio valor de la cuenta atrás se centra.

El campo Text Before End Date establece el texto antes de la fecha de fin de la promoción, por ejemplo:

Promocja do:

Si el campo está vacío, debajo del contador se muestra solo la fecha.

El campo Displayed Time Template permite elegir el rango de unidades de tiempo que se muestran en el contador.

Plantillas disponibles:

• 00d 00g 00m 00s,
• 00d 00g 00m,
• 00d 00g,
• 00d,
• 00g 00m 00s,
• 00m 00s.

Los símbolos de las unidades de tiempo pueden modificarse mediante campos independientes:

• Days Symbol, por defecto d,
• Hours Symbol, por defecto g,
• Minutes Symbol, por defecto m,
• Seconds Symbol, por defecto s.

Ejemplo: si configuras Hours Symbol como h, el contador puede mostrar 02d 05h 30m 10s en lugar de 02d 05g 30m 10s.

Mostrar el contador solo antes del fin de la promoción

El campo Show Countdown Days Before End define cuántos días antes del fin de la promoción debe hacerse visible el contador.

Ejemplos:

• campo vacío - el contador se muestra inmediatamente después de cumplirse las condiciones de la promoción,
• 1 - el contador aparecerá el último día de la promoción,
• 3 - el contador aparecerá durante los últimos 3 días de la promoción,
• 7 - el contador aparecerá durante los últimos 7 días de la promoción.

El campo acepta números enteros. Un valor vacío significa que no hay limitación.

Ajustes de aspecto

El módulo permite configurar el aspecto del contador sin realizar cambios en el código.

Campos disponibles:

• Background Color - color de fondo,
• Text Color - color base del texto,
• Label Color - color de la etiqueta antes del contador,
• Timer Color - color del valor de la cuenta atrás,
• Border Color - color del borde,
• Font Size - tamaño de fuente.

Los campos de color utilizan un color picker y guardan valores hex, por ejemplo:

#ffffff#333333#d32f2f

El tamaño de fuente se selecciona desde una lista:

• 12px,
• 14px,
• 16px,
• 18px.

Comprobación tras la implementación

Después de la instalación y configuración, comprueba:

1. Producto simple con promoción activa en la ficha de producto.
2. Producto simple con promoción activa en el listado de categorías.
3. Producto sin precio especial activo.
4. Producto con la fecha Special Price To Date en el pasado.
5. Producto con Special Price To Date vacío.
6. Producto con un precio especial igual o superior al precio regular.
7. La configuración Show Countdown Days Before End.
8. Diferentes plantillas Displayed Time Template.
9. El cambio de símbolos de las unidades de tiempo.
10. El cambio de colores y tamaño de fuente después de limpiar la caché.
11. La consola del navegador para comprobar que no haya errores JavaScript.
12. El código fuente HTML sin procesar para comprobar que no contiene un elemento .countdown-promotion ya generado.

Limitaciones conocidas

El módulo utiliza promociones basadas en los campos estándar de Magento:

• special_price,
• special_from_date,
• special_to_date.

Las reglas de catálogo, Adobe Commerce Scheduled Updates y las variantes de productos configurables con fechas de promoción completamente independientes pueden requerir una integración aparte.

Los temas que modifican de forma significativa el renderizado del precio o la estructura de la tarjeta de producto pueden requerir la configuración de selectores CSS propios.

Problemas frecuentes

El contador no es visible

Comprueba si:

• el producto tiene Countdown Promotion = Yes,
• el producto tiene Special Price configurado,
• el precio especial es inferior al precio regular,
• Special Price To Date está configurado en el futuro,
• Special Price From Date no indica una fecha futura,
• la caché de Magento se ha limpiado,
• para la categoría, el selector CSS configurado apunta al elemento de producto correcto.

El contador está en una ubicación incorrecta

Cambia Category Placement o configura un Category Custom CSS Selector propio. En la ficha de producto, utiliza Product Page Custom CSS Selector.

Los cambios de aspecto no son visibles

Limpia la caché de Magento:

bin/magento cache:flush

En producción, también puede ser necesario actualizar los assets estáticos conforme al proceso de despliegue de la tienda.