Popup Pro Newsletter — Vollständige Anleitung

Popup Pro Newsletter zeigt in Ihrem Shopware-Shop ein Newsletter-Anmelde-Popup, das jeden neuen Abonnenten mit einem für die erste Bestellung gültigen Gutscheincode belohnt. Das Ziel ist zweierlei: Ihre Verteilerliste vergrößern und einen Erstkauf auslösen. Das Plugin setzt ausschließlich auf das native Promotion-System von Shopware — es wird keine eigene Datenbank-Entity angelegt — und bietet zwei Code-Modi (individuell pro Abonnent oder fest), einen Rabatt wahlweise prozentual oder als Festbetrag, Zeit- und Scroll-Trigger sowie die Anmeldung über die offizielle Newsletter-Route mit optionalem, DSGVO-konformem Double-Opt-In. Dieser Leitfaden behandelt Installation, Konfiguration, Funktionsweise der Gutscheincodes, Anpassung und Fehlerbehebung. Kompatibel mit Shopware 6.6 und 6.7.

So funktioniert der Gutscheincode

Bei der allerersten Anmeldung eines Besuchers legt das Plugin automatisch eine Shopware-Promotion namens „Popup Newsletter — Welcome“ an, die dem aktuellen Verkaufskanal zugewiesen ist und den in der Konfiguration definierten Rabatt trägt. Anschließend bei jeder Anmeldung:

• im Modus individueller Code (empfohlen) wird ein persönlicher Code on-the-fly erzeugt und über die nativen individuellen Promotion-Codes von Shopware an die Promotion gebunden und an den Besucher zurückgegeben: nicht teilbar, nachverfolgbar und auf eine Einlösung begrenzbar;
• im Modus fester Code trägt die Promotion einen einzigen öffentlichen Code (z. B. WELCOME10), der allen Abonnenten angezeigt wird.

Die Promotion bleibt unter Marketing → Aktionen voll steuerbar: Gültigkeitszeitraum, Bedingungen, erweiterte Regeln. Um das Angebot der allerersten Bestellung vorzubehalten, lassen Sie die Option „eine Einlösung pro Kunde“ aktiviert; für eine striktere Steuerung fügen Sie direkt an der Promotion eine Shopware-Regel hinzu (z. B. „Anzahl der Bestellungen des Kunden = 0″).

Installation

1. Laden Sie das Archiv DataFireflyPopupProNewsletter-v1.0.0.zip aus Ihrem DataFirefly-Konto herunter.
2. Installieren Sie es über Administration → Erweiterungen → Meine Erweiterungen → Erweiterung hochladen oder kopieren Sie den entpackten Ordner nach custom/plugins/.
3. Installieren und aktivieren Sie das Plugin:

   bin/console plugin:refresh
   bin/console plugin:install --activate DataFireflyPopupProNewsletter
   bin/console cache:clear

4. Kompilieren Sie das Theme, um die Popup-Styles einzubinden:

   bin/console theme:compile

Wenn Sie das Plugin selbst neu bauen

Auf einer vollständigen Shopware-Entwicklungsinstallation wird das JS so kompiliert:

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

Dies erzeugt src/Resources/app/storefront/dist/storefront/js/data-firefly-popup-pro-newsletter/data-firefly-popup-pro-newsletter.js. Zippen Sie das Plugin mit diesem dist/-Ordner erneut, bevor Sie es in die Produktion ausrollen.

Konfiguration

Öffnen Sie Erweiterungen → Meine Erweiterungen → Popup Pro Newsletter → ⋯ → Konfigurieren. Die Einstellungen sind in Karten gegliedert.

Allgemein

• Popup aktivieren: schaltet die Anzeige vollständig ein oder aus.

Anzeige

• Anzeige nach Verzögerung (Sekunden): das Popup erscheint nach X Sekunden. 0 deaktiviert diesen Trigger.
• Anzeige nach Scrollen (% der Seite): das Popup erscheint, sobald dieser Scroll-Prozentsatz erreicht ist. 0 deaktiviert diesen Trigger.
• Nicht erneut anzeigen für (Tage): Anzeigefrequenz pro Besucher, browserseitig gespeichert.
• Für eingeloggte Kunden ausblenden: zeigt das Popup bereits eingeloggten Kunden nicht an.

Inhalt

Titel, Untertitel, Platzhalter des E-Mail-Felds, Button-Text, Erfolgsmeldung (verwenden Sie den Platzhalter %code%, um den Code einzufügen), Hinweismeldung bei ausstehender Bestätigung (Double-Opt-In), optionale Bild-URL und Akzentfarbe. Alle diese Texte sind editierbar und übersetzbar.

Gutscheincode

• Code-Modus: individuell (empfohlen) oder fest.
• Fester Code / Präfix: der öffentliche Code im festen Modus oder das Präfix der individuellen Codes im individuellen Modus.
• Rabattart und -wert: prozentual oder Festbetrag, frei wählbarer Wert.
• Eine Einlösung pro Kunde: begrenzt die Promotion auf eine einzige Einlösung, um das Angebot der ersten Bestellung vorzubehalten.
• Double-Opt-In: sendet eine Bestätigungs-E-Mail, bevor der Code ausgegeben wird.

Double-Opt-In und DSGVO

Die Anmeldung läuft über die offizielle Newsletter-Route von Shopware (NewsletterSubscribeRoute), was die Synchronisation mit Ihren bestehenden Empfängern sicherstellt. Wenn Double-Opt-In aktiviert ist, erhält der Besucher seinen Code erst nach Bestätigung seiner Adresse per E-Mail; in der Zwischenzeit wird die anpassbare Hinweismeldung im Popup angezeigt. Es werden keine Drittanbieter-Cookies verwendet: die „Nicht erneut anzeigen“-Speicherung erfolgt browserseitig über localStorage.

Das Popup anpassen

Das Markup ist in views/storefront/component/datafirefly/popup-newsletter.html.twig isoliert und wird aus views/storefront/base.html.twig im Block base_body eingebunden. Um die Popup-Struktur zu ändern, überschreiben Sie dieses Template in Ihrem Theme. Die Styles liegen in app/storefront/src/scss/base.scss, und die Akzentfarbe wird über die CSS-Variable --df-popup-accent gesteuert, die wiederum von der Einstellung „Akzentfarbe“ der Konfiguration gespeist wird. Das Verhalten (Trigger, AJAX, Code-Kopie) übernimmt das Storefront-Plugin PopupNewsletterPlugin.

FAQ und Fehlerbehebung

Das Popup erscheint überhaupt nicht. In nahezu allen Fällen fehlt das vorkompilierte JavaScript: prüfen Sie, ob das installierte ZIP den Ordner dist/ enthält, führen Sie dann theme:compile aus und leeren Sie den Cache. Untersuchen Sie die Seite: das Element .df-popup-newsletter sollte mit dem Attribut hidden im DOM vorhanden sein — das JS macht es sichtbar.

Ich habe es einmal geschlossen und es kommt nicht wieder. Das ist das erwartete Verhalten: das Plugin merkt sich das Schließen für die konfigurierte Anzahl von Tagen über den Schlüssel dfPopupNewsletterDismissedAt im localStorage. Zum erneuten Testen öffnen Sie ein privates Browserfenster oder leeren Sie den lokalen Speicher des Browsers.

Das Popup erscheint, aber ohne Styles. Das Theme wurde nicht neu kompiliert: führen Sie bin/console theme:compile aus.

Der Code wird nicht auf den Warenkorb angewendet. Prüfen Sie unter Marketing → Aktionen, ob die Promotion „Popup Newsletter — Welcome“ aktiv, dem richtigen Verkaufskanal zugewiesen und innerhalb ihres Gültigkeitszeitraums ist. Im individuellen Modus prüfen Sie, ob der individuelle Code nicht bereits verwendet wurde.

Was passiert bei der Deinstallation? Die Promotion und alle ausgegebenen Codes bleiben bewusst erhalten, um im Umlauf befindliche Codes bei Ihren Kunden nicht zu entwerten. Entfernen Sie sie bei Bedarf manuell unter Marketing → Aktionen.

Verlangsamt das Plugin meinen Shop? Nein: keine eigene Entity, keine zusätzliche Abfrage beim Laden der Seiten, eine einzige schlanke JS-Datei und das in Ihr Theme kompilierte SCSS.