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

Le module Kowal_CountdownPromotion ajoute à Magento 2 un compte à rebours de fin de promotion. Le compteur peut être visible sur la liste de catégories ainsi que sur la fiche produit lorsque le produit possède un prix spécial actif et 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.

Exigences

Avant l’installation, assurez-vous que la boutique répond aux exigences :

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

Ajoutez le dépôt Composer Kowal à la configuration du projet :

Les données d’accès au dépôt Composer, à savoir l’adresse e-mail du client et le token de licence, vous seront envoyées par e-mail après l’achat. Elles sont également disponibles dans l’espace client après connexion sur kowal.store. Remplacez TWOJ_EMAIL_KLIENTA par l’adresse e-mail de votre compte, et TWOJ_TOKEN par le token reçu. Exécutez les commandes dans le répertoire racine 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

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 aussi exécuter 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 la liste de catégories.

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 à côté de l’élément indiqué par un sélecteur CSS personnalisé.

Lorsque vous choisissez Custom CSS selector, renseignez le champ Category Custom CSS Selector. L’élément sélectionné doit avoir data-product-id ou se trouver dans une 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 seule la valeur du décompte 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 la plage d’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 dans 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 satisfaction des conditions de promotion,
• 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 aucune limitation.

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 base du texte,
• Label Color - couleur du libellé avant le compteur,
• Timer Color - couleur de la valeur du décompte,
• Border Color - couleur de la bordure,
• Font Size - taille de police.

Les champs de couleur utilisent un sélecteur de couleur 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 la liste de catégories.
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 vidage du cache.
11. La console du navigateur, afin de vérifier l’absence d’erreurs JavaScript.
12. La source HTML brute, afin de vérifier qu’elle ne contient pas d’élément .countdown-promotion prêt à l’emploi.

Limitations connues

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

• special_price,
• special_from_date,
• special_to_date.

Les règles 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 séparée.

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 possède Countdown Promotion = Yes,
• le produit possède 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 endroit

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

Les changements 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.