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 finalización de la promoción configurada.

El contador visible se crea 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 finalización 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.

Añade el repositorio Composer de Kowal a la configuración del proyecto:

Recibirás por correo electrónico los datos de acceso al repositorio Composer, es decir, la dirección de e-mail del cliente y el token de licencia, después de la compra. También están disponibles en el panel de cliente tras iniciar sesión en kowal.store. Sustituye TWOJ_EMAIL_KLIENTA por la dirección de e-mail de tu cuenta y TWOJ_TOKEN por el token recibido. Ejecuta los comandos en el directorio raíz de Magento.

composer config repositories.kowal composer https://repo.kowal.storecomposer config http-basic.repo.kowal.store 'TWOJ_EMAIL_KLIENTA' 'TWOJ_TOKEN'composer require kowal/module-countdown-promotion

Después de 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 un entorno de producción, normalmente también deben ejecutarse 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 como Yes.
2. Configura Special Price.
3. Configura Special Price To Date.
4. Opcionalmente, configura Special Price From Date.

El contador solo aparecerá si se cumplen 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 cache:

bin/magento cache:flush

Ajustes de posición del contador

El campo Category Placement determina 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 una tarjeta de producto que contenga .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 únicamente a la ficha de producto. Introduce el selector del elemento tras el 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 valor de la cuenta atrás queda centrado.

El campo Text Before End Date establece el texto antes de la fecha de finalización 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 cambiarse 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 de que finalice la promoción

El campo Show Countdown Days Before End determina cuántos días antes del final 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á en los últimos 3 días de la promoción,
• 7 - el contador aparecerá en 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 apariencia

El módulo permite configurar la apariencia del contador sin 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 de una lista:

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

Comprobación tras el despliegue

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

1. Producto simple con una promoción activa en la ficha de producto.
2. Producto simple con una 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 de Displayed Time Template.
9. El cambio de los símbolos de las unidades de tiempo.
10. El cambio de colores y tamaño de fuente después de limpiar la cache.
11. La consola del navegador, para comprobar que no haya errores JavaScript.
12. El código fuente HTML sin procesar, para comprobar que no contenga un elemento .countdown-promotion ya preparado.

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 configurado Special Price,
• 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 cache de Magento se ha limpiado,
• para la categoría, el selector CSS configurado apunta al elemento de producto correcto.

El contador está en una posición incorrecta

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

Los cambios de apariencia no son visibles

Limpia la cache de Magento:

bin/magento cache:flush

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