SW Shopware 6 Shopware Débutant

Popup Pro Newsletter — Guide complet

Installer, configurer et exploiter Popup Pro Newsletter : popup d'inscription newsletter offrant un code promo sur la 1ère commande, codes uniques par abonné via les promotions natives, déclencheurs délai/scroll et double opt-in RGPD, pour Shopware 6.6 et 6.7.

Mis à jour Version du module 1.0.0

Popup Pro Newsletter affiche sur votre boutique Shopware un popup d’inscription à la newsletter qui récompense chaque nouvel abonné avec un code promo valable sur sa première commande. L’objectif est double : faire croître votre liste de diffusion et déclencher une première vente. Le plugin s’appuie exclusivement sur le système de promotions natif de Shopware — aucune entité de base de données personnalisée n’est créée — et propose deux modes de code (unique par abonné ou fixe), une remise paramétrable en pourcentage ou en montant, des déclencheurs par délai et par défilement, ainsi qu’une inscription via la route newsletter officielle avec double opt-in optionnel conforme au RGPD. Ce guide couvre l’installation, la configuration, le fonctionnement des codes promo, la personnalisation et le dépannage. Compatible Shopware 6.6 et 6.7.

Le storefront de Shopware ne compile plus le JavaScript des plugins à la volée depuis la 6.6. Le ZIP que vous installez doit contenir le dossier dist/ du JS pré-compilé. Le ZIP distribué par DataFirefly l’inclut déjà ; si vous reconstruisez le plugin vous-même, lisez attentivement la section Installation ci-dessous.

Comment fonctionne le code promo

Au tout premier enregistrement d’un visiteur, le plugin crée automatiquement une promotion Shopware nommée « Popup Newsletter — Welcome », assignée au canal de vente courant, avec la remise définie dans la configuration. Ensuite, à chaque inscription :

  • en mode code unique (recommandé), un code individuel est généré à la volée et rattaché à la promotion via les codes individuels de promotion natifs de Shopware, puis renvoyé au visiteur : non partageable, traçable et limitable à une seule utilisation ;
  • en mode code fixe, la promotion porte un code unique public (type WELCOME10) affiché à tous les abonnés.

La promotion reste entièrement pilotable dans Marketing → Promotions : période de validité, conditions, règles avancées. Pour réserver l’offre à la toute première commande, gardez l’option « une utilisation par client » activée ; pour un ciblage plus strict, ajoutez une règle Shopware (par exemple « nombre de commandes du client = 0 ») directement sur la promotion.

Installation

  1. Téléchargez l’archive DataFireflyPopupProNewsletter-v1.0.0.zip depuis votre compte DataFirefly.
  2. Installez-la via Administration → Extensions → Mes extensions → Charger l’extension, ou copiez le dossier décompressé dans custom/plugins/.
  3. Installez et activez le plugin : 
    bin/console plugin:refresh
bin/console plugin:install --activate DataFireflyPopupProNewsletter
bin/console cache:clear
  4. Compilez le thème pour intégrer les styles du popup : 
    bin/console theme:compile

Le theme:compile est du PHP pur : il fonctionne sur un hébergement mutualisé (o2switch, etc.). En revanche, la compilation du JavaScript (build-storefront.sh) nécessite Node et beaucoup de mémoire — elle n’est pas faite pour le mutualisé. C’est pourquoi le JS est livré pré-compilé dans le ZIP : vous n’avez jamais à lancer le build sur votre serveur de production.

Si vous reconstruisez le plugin vous-même

Sur une installation Shopware de développement complète, le JS se compile ainsi :

bin/console plugin:refresh
bin/console plugin:install --activate DataFireflyPopupProNewsletter
bash bin/build-storefront.sh

Cela génère src/Resources/app/storefront/dist/storefront/js/data-firefly-popup-pro-newsletter/data-firefly-popup-pro-newsletter.js. Rezippez le plugin avec ce dossier dist/ avant de le déployer en production.

Configuration

Ouvrez Extensions → Mes extensions → Popup Pro Newsletter → ⋯ → Configurer. Les réglages sont organisés en cartes.

Général

  • Activer le popup : active ou désactive entièrement l’affichage.

Affichage

  • Afficher après un délai (secondes) : le popup apparaît au bout de X secondes. 0 désactive ce déclencheur.
  • Afficher après défilement (% de la page) : le popup apparaît une fois ce pourcentage de scroll atteint. 0 désactive ce déclencheur.
  • Ne plus afficher pendant (jours) : fréquence d’affichage par visiteur, mémorisée côté navigateur.
  • Masquer pour les clients connectés : n’affiche pas le popup aux clients déjà connectés.

Les deux déclencheurs (délai et scroll) sont cumulables : le popup s’affiche dès que le premier des deux est atteint. Pour un déclenchement uniquement au scroll, mettez le délai à 0, et inversement.

Contenu

Titre, sous-titre, placeholder du champ e-mail, texte du bouton, message de succès (utilisez le placeholder %code% pour insérer le code), message d’attente de confirmation (double opt-in), URL d’illustration optionnelle et couleur d’accent. Tous ces textes sont éditables et traduisibles.

Code promo

  • Mode de code : unique (recommandé) ou fixe.
  • Code fixe / préfixe : le code public en mode fixe, ou le préfixe des codes individuels en mode unique.
  • Type et valeur de remise : pourcentage ou montant fixe, valeur libre.
  • Une utilisation par client : limite la promotion à un seul usage pour réserver l’offre à la première commande.
  • Double opt-in : envoie un e-mail de confirmation avant de délivrer le code.

Double opt-in et RGPD

L’inscription passe par la route newsletter officielle de Shopware (NewsletterSubscribeRoute), ce qui garantit la synchronisation avec vos destinataires existants. Lorsque le double opt-in est activé, le visiteur reçoit son code seulement après avoir confirmé son adresse par e-mail ; le message d’attente personnalisable s’affiche entre-temps dans le popup. Aucun cookie tiers n’est utilisé : la mémorisation « ne plus afficher » est stockée côté navigateur via localStorage.

Le double opt-in est recommandé pour la conformité RGPD : il atteste du consentement explicite de l’abonné. Vous pouvez l’activer ou le désactiver à tout moment dans la configuration.

Personnaliser le popup

Le rendu est isolé dans views/storefront/component/datafirefly/popup-newsletter.html.twig, injecté depuis views/storefront/base.html.twig dans le bloc base_body. Pour modifier la structure du popup, surchargez ce template dans votre thème. Les styles sont dans app/storefront/src/scss/base.scss et la couleur d’accent est pilotée par la variable CSS --df-popup-accent, elle-même alimentée par le réglage « couleur d’accent » de la configuration. Le comportement (déclencheurs, AJAX, copie du code) est géré par le plugin storefront PopupNewsletterPlugin.

FAQ et dépannage

Le popup ne s’affiche pas du tout. Dans la quasi-totalité des cas, c’est que le JavaScript pré-compilé n’est pas présent : vérifiez que le ZIP installé contient bien le dossier dist/, puis lancez theme:compile et videz le cache. Inspectez la page : l’élément .df-popup-newsletter doit être présent dans le DOM avec l’attribut hidden — c’est le JS qui le révèle.

Je l’ai fermé une fois et il ne revient plus. C’est le comportement attendu : le plugin mémorise la fermeture pendant le nombre de jours configuré, via la clé dfPopupNewsletterDismissedAt du localStorage. Pour retester, ouvrez une fenêtre de navigation privée ou videz le stockage local du navigateur.

Le popup s’affiche mais sans styles. Le thème n’a pas été recompilé : lancez bin/console theme:compile.

Le code n’est pas appliqué au panier. Vérifiez dans Marketing → Promotions que la promotion « Popup Newsletter — Welcome » est active, assignée au bon canal de vente et dans sa période de validité. En mode unique, contrôlez que le code individuel n’a pas déjà été utilisé.

Que se passe-t-il à la désinstallation ? La promotion et les codes déjà distribués sont volontairement conservés afin de ne pas invalider des codes en circulation chez vos clients. Supprimez-les manuellement depuis Marketing → Promotions si nécessaire.

Le plugin ralentit-il ma boutique ? Non : aucune entité custom, aucune requête supplémentaire au chargement des pages, un seul fichier JS léger et le SCSS compilé dans votre thème.

Cette page vous a-t-elle été utile ?

Toujours bloqué ? Contactez le support