Guide d’installation et de configuration de Countdown Promotion pour Magento 2

Le module Kowal_CountdownPromotion ajoute à Magento 2 un compteur de fin de promotion. Le compteur peut être visible sur le listing de catégorie ainsi que sur la fiche produit lorsque le produit dispose d’un prix spécial actif et d’une date de fin de promotion définie.

Le compteur visible est créé par JavaScript après le chargement de la page. Le backend transmet au frontend uniquement des données techniques, notamment l’ID du produit et le timestamp de fin de promotion.

Prérequis

Avant l’installation, assurez-vous que la boutique respecte les exigences suivantes :

• Magento Open Source ou Adobe Commerce 2.4.x,
• PHP 7.4 ou PHP 8.1+ selon la version de Magento,
• possibilité d’installer des packages Composer de type magento2-module,
• accès à la CLI Magento,
• accès au dépôt du module.

Installation via Composer

Accédez au répertoire racine du projet Magento.

Pour le dépôt Git, ajoutez le dépôt du module à la configuration 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

Après l’installation, Composer placera le module dans le répertoire :

vendor/kowal/module-countdown-promotion

Activation du module dans Magento

Exécutez les commandes Magento depuis le répertoire racine de la boutique :

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

Sur un environnement de production, il faut généralement exécuter également les commandes de déploiement utilisées dans le projet :

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

Configuration du produit

Pour chaque produit sur lequel le compteur doit apparaître :

1. Définissez Countdown Promotion sur Yes.
2. Définissez Special Price.
3. Définissez Special Price To Date.
4. Définissez éventuellement Special Price From Date.

Le compteur n’apparaîtra que si toutes les conditions sont remplies :

• l’attribut countdown_promotion est activé,
• special_price est défini,
• le prix spécial est inférieur au prix régulier,
• special_from_date est vide ou la promotion a déjà commencé,
• special_to_date est défini dans le futur.

Pour les produits configurables, activez Countdown Promotion sur le produit parent. Le module peut utiliser la date de promotion du produit parent ou les dates de promotion actives des produits simples associés lorsque la promotion est définie sur les variantes.

Configuration du module

Les options du module sont disponibles dans le panneau d’administration Magento :

Stores > Configuration > Catalog > Countdown Promotion > Appearance

Après avoir modifié la configuration, videz le cache :

bin/magento cache:flush

Paramètres de position du compteur

Le champ Category Placement définit la position du compteur sur le listing de catégorie.

Options disponibles :

• Below price - compteur sous le prix,
• Bottom of product image - compteur en bas de l’image produit,
• Top of product image - compteur en haut de l’image produit,
• Custom CSS selector - compteur près de l’élément indiqué par un sélecteur CSS personnalisé.

Lorsque vous choisissez Custom CSS selector, complétez le champ Category Custom CSS Selector. L’élément sélectionné doit contenir data-product-id ou se trouver dans la tuile produit contenant .price-box[data-product-id].

Exemples de sélecteurs :

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

Le champ Product Page Custom CSS Selector concerne uniquement la fiche produit. Saisissez le sélecteur de l’élément après lequel le compteur doit être ajouté.

Exemples :

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

Si le champ est vide, le module utilise le sélecteur par défaut :

.product-info-main .price-box

Paramètres des textes et du format de temps

Le champ Text Before Countdown définit le texte avant le compteur, par exemple :

Promocja kończy się za:

Si le champ est vide, le libellé avant le compteur n’est pas affiché et la valeur du compte à rebours est centrée.

Le champ Text Before End Date définit le texte avant la date de fin de promotion, par exemple :

Promocja do:

Si le champ est vide, seule la date est affichée sous le compteur.

Le champ Displayed Time Template permet de choisir l’étendue des unités de temps affichées dans le compteur.

Modèles disponibles :

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

Les symboles des unités de temps peuvent être modifiés avec des champs distincts :

• Days Symbol, par défaut d,
• Hours Symbol, par défaut g,
• Minutes Symbol, par défaut m,
• Seconds Symbol, par défaut s.

Exemple : si vous définissez Hours Symbol sur h, le compteur peut afficher 02d 05h 30m 10s au lieu de 02d 05g 30m 10s.

Afficher le compteur uniquement avant la fin de la promotion

Le champ Show Countdown Days Before End définit combien de jours avant la fin de la promotion le compteur doit devenir visible.

Exemples :

• champ vide - le compteur est affiché immédiatement après que les conditions de promotion sont remplies,
• 1 - le compteur apparaîtra le dernier jour de la promotion,
• 3 - le compteur apparaîtra pendant les 3 derniers jours de la promotion,
• 7 - le compteur apparaîtra pendant les 7 derniers jours de la promotion.

Le champ accepte des nombres entiers. Une valeur vide signifie qu’il n’y a aucune limite.

Paramètres d’apparence

Le module permet de configurer l’apparence du compteur sans modifier le code.

Champs disponibles :

• Background Color - couleur d’arrière-plan,
• Text Color - couleur de texte de base,
• Label Color - couleur du libellé avant le compteur,
• Timer Color - couleur de la valeur du compte à rebours,
• Border Color - couleur de la bordure,
• Font Size - taille de police.

Les champs de couleur utilisent un color picker et enregistrent des valeurs hex, par exemple :

#ffffff#333333#d32f2f

La taille de police est sélectionnée dans une liste :

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

Contrôle après déploiement

Après l’installation et la configuration, vérifiez :

1. Un produit simple avec une promotion active sur la fiche produit.
2. Un produit simple avec une promotion active sur le listing de catégorie.
3. Un produit sans prix spécial actif.
4. Un produit avec une date Special Price To Date dans le passé.
5. Un produit avec un champ Special Price To Date vide.
6. Un produit avec un prix spécial égal ou supérieur au prix régulier.
7. La configuration Show Countdown Days Before End.
8. Différents modèles Displayed Time Template.
9. La modification des symboles des unités de temps.
10. La modification des couleurs et de la taille de police après avoir vidé le cache.
11. La console du navigateur afin de vérifier l’absence d’erreurs JavaScript.
12. Le code source HTML brut afin de vérifier qu’il ne contient pas d’élément prêt à l’emploi .countdown-promotion.

Limitations connues

Le module utilise des promotions basées sur les champs Magento standard :

• special_price,
• special_from_date,
• special_to_date.

Les règles de catalogue, Adobe Commerce Scheduled Updates ainsi que les variantes de produits configurables avec des dates de promotion totalement indépendantes peuvent nécessiter une intégration distincte.

Les thèmes qui modifient fortement le rendu du prix ou la structure de la tuile produit peuvent nécessiter la définition de sélecteurs CSS personnalisés.

Problèmes fréquents

Le compteur n’est pas visible

Vérifiez que :

• le produit a Countdown Promotion = Yes,
• le produit a un Special Price défini,
• le prix spécial est inférieur au prix régulier,
• Special Price To Date est défini dans le futur,
• Special Price From Date n’indique pas une date future,
• le cache Magento a été vidé,
• pour la catégorie, le sélecteur CSS défini pointe vers le bon élément produit.

Le compteur est au mauvais emplacement

Modifiez Category Placement ou définissez votre propre Category Custom CSS Selector. Sur la fiche produit, utilisez Product Page Custom CSS Selector.

Les modifications d’apparence ne sont pas visibles

Videz le cache Magento :

bin/magento cache:flush

En production, il peut également être nécessaire de rafraîchir les assets statiques conformément au processus de déploiement de la boutique.