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

El móduloKowal_CountdownPromotionañ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 tipomagento2-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 e-mail los datos de acceso al repositorio Composer, dirección de e-mail del cliente y token de licencia, tras 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 correo electrónico 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.store
composer 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_CountdownPromotion
bin/magento setup:upgrade
bin/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:compile
bin/magento setup:static-content:deploy -f
bin/magento indexer:reindex
bin/magento cache:flush

Configuración del producto

Para cada producto en el que deba aparecer el contador:

1. ConfiguraCountdown PromotionenYes.
2. ConfiguraSpecial Price.
3. ConfiguraSpecial Price To Date.
4. Opcionalmente, configuraSpecial Price From Date.

El contador solo aparecerá si se cumplen todas las condiciones:

• el atributocountdown_promotionestá activado,
• special_priceestá configurado,
• el precio especial es inferior al precio regular,
• special_from_dateestá vacío o la promoción ya ha comenzado,
• special_to_dateestá configurado en el futuro.

Para productos configurables, activaCountdown Promotionen 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

CampoCategory Placementdetermina 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 seleccionesCustom CSS selector, completa el campoCategory Custom CSS Selector. El elemento seleccionado debe tenerdata-product-ido 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]

CampoProduct Page Custom CSS Selectorse 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

CampoText 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.

CampoText 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.

CampoDisplayed Time Templatepermite 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 defectod,
• Hours Symbol, por defectog,
• Minutes Symbol, por defectom,
• Seconds Symbol, por defectos.

Ejemplo: si configurasHours Symbolenh, el contador puede mostrar02d 05h 30m 10sen lugar de02d 05g 30m 10s.

Mostrar el contador solo antes de que finalice la promoción

CampoShow Countdown Days Before Enddetermina 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 fechaSpecial Price To Dateen el pasado.
5. Producto conSpecial Price To Date.
6. Producto con un precio especial igual o superior al precio regular.
7. La configuraciónShow Countdown Days Before End.
8. Diferentes plantillas deDisplayed 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.

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 más frecuentes

El contador no es visible

Comprueba si:

• el producto tieneCountdown Promotion = Yes,
• el producto tiene configuradoSpecial Price,
• el precio especial es inferior al precio regular,
• Special Price To Dateestá configurado en el futuro,
• Special Price From Dateno 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

CambiaCategory Placemento configura tu propioCategory Custom CSS Selector. En la ficha de producto, utilizaProduct 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.