Installation & Konfiguration
DasPopUp in Shopware 6 einrichten
Installation
- Plugin-Ordner in
custom/plugins/Sven_dasPopUp/ablegen - Plugin-Liste aktualisieren:
bin/console plugin:refresh - Plugin installieren und aktivieren:
bin/console plugin:install --activate Sven_dasPopUp - Storefront-Assets kompilieren:
bin/console theme:compile - Cache leeren:
bin/console cache:clear
Nach der Installation kann das Popup unter Erweiterungen > Meine Erweiterungen > DasPopUp > Konfigurieren eingerichtet werden.
Konfiguration
Alle Einstellungen finden Sie unter Erweiterungen > Meine Erweiterungen > DasPopUp > Konfigurieren. Die Konfiguration ist in vier Bereiche aufgeteilt:
Popup-Inhalt
Definieren Sie den Inhalt und das Formular, das im Popup angezeigt wird:
| Einstellung | Typ | Beschreibung | Standard |
|---|---|---|---|
| popupImage | Media-Auswahl | Bild, das im Popup angezeigt wird (z.B. Banner, Produktbild) | — |
| popupImageLink | Text | Optionaler Link, der beim Klick auf das Popup-Bild geöffnet wird | — |
| content | Text-Editor | HTML-Inhalt des Popups (WYSIWYG-Editor) | Abonnieren Sie unseren Newsletter |
| formType | Auswahl | Art des Formulars: noform (kein Formular), newsletter (Newsletter-Anmeldung), contact (Kontaktformular) |
— |
Grundeinstellungen
Steuern Sie Sichtbarkeit, Position, Modus und Layout des Popups:
| Einstellung | Typ | Beschreibung | Standard |
|---|---|---|---|
| show | Bool | Popup anzeigen (Ein/Aus) | — |
| showCookie | Bool | Cookie setzen, um Popup nur einmal anzuzeigen | — |
|
DSGVO-Hinweis: Wenn
showCookie aktiviert ist, wird ein Cookie im Browser gesetzt. Dies muss in der Datenschutzerklärung und im Cookie-Consent berücksichtigt werden. |
|||
| popupDesign | Auswahl | Position des Popups: lightbox (zentriert mit Overlay), bottomLeft (unten links), bottomRight (unten rechts), bottomCenter (unten mittig) |
— |
| mode | Auswahl | Auslöser: normal (nach Verzögerungszeit) oder exit intent (wenn Maus den Viewport verlässt) |
— |
| popupLayout | Auswahl | Desktop-Layout: Anordnung von Bild und Inhalt | — |
| popupLayoutMobile | Auswahl | Mobile-Layout: Anordnung von Bild und Inhalt auf mobilen Geräten | — |
| contentAlignHorizontal | Auswahl | Horizontale Ausrichtung des Inhalts: start, center, end |
— |
| contentAlignVertical | Auswahl | Vertikale Ausrichtung des Inhalts: start, center, end |
— |
| popupCloseButton | Auswahl | Position des Schließen-Buttons: outside (außerhalb) oder inside (innerhalb des Popups) |
— |
| overlayClickSetsHasShown | Bool | Klick auf Overlay schließt Popup und markiert es als „bereits angezeigt“ | — |
| desktopPopupWidth | Text | Breite des Popups auf Desktop | 600px |
| desktopPopupHeight | Text | Höhe des Popups auf Desktop | 300px |
| mobilePopupWidth | Text | Breite des Popups auf mobilen Geräten | 300px |
| mobilePopupHeight | Text | Höhe des Popups auf mobilen Geräten | 300px |
Farben & Design
Passen Sie das visuelle Erscheinungsbild des Popups an:
| Einstellung | Typ | Beschreibung | Standard |
|---|---|---|---|
| popupColor | Farbe | Hintergrundfarbe des Popup-Containers | #FFFFFF |
| popupColorOpacity | Zahl | Deckkraft der Popup-Hintergrundfarbe (0–1) | 1 |
| contentBackgroundColor | Farbe | Hintergrundfarbe des Inhaltsbereichs | #FFFFFF |
| contentBackgroundOpacity | Zahl | Deckkraft des Inhaltsbereich-Hintergrunds (0–1) | 1 |
| contentMargin | Text | Außenabstand des Inhaltsbereichs (CSS-Margin) | 0px |
| contentPadding | Text | Innenabstand des Inhaltsbereichs (CSS-Padding) | 15px |
| contentRadius | Text | Eckenradius des Inhaltsbereichs (CSS-Border-Radius) | 30px 0px 0px 30px |
| overlayColor | Farbe | Farbe des Hintergrund-Overlays (nur bei Lightbox) | #000000 |
| overlayOpacity | Zahl | Deckkraft des Overlays (0–1) | 0.6 |
Verhalten
Steuern Sie, wann und wie das Popup erscheint:
| Einstellung | Typ | Beschreibung | Standard |
|---|---|---|---|
| cacheMode | Auswahl | Art der Speicherung: cookie (bleibt über Sessions hinweg) oder session (nur für aktuelle Sitzung) |
— |
| cookieTime | Zahl | Gültigkeit des Cookies in Tagen. 0 = bei jedem Besuch anzeigen. |
30 |
| delayTime | Zahl | Verzögerung in Sekunden, bevor das Popup angezeigt wird (nur im Normal-Modus) | 1 |
| animation | Auswahl | Einblend-Animation: noEffect, bounceIn, fadeIn, flipIn, jackInTheBox, tada, zoomIn |
— |
| categories | Entity-Select | Popup nur auf bestimmten Kategorieseiten anzeigen. Leer = auf allen Seiten. | — |
| startDate | Datum/Zeit | Startdatum der Popup-Anzeige. Leer = sofort aktiv. | — |
| endDate | Datum/Zeit | Enddatum der Popup-Anzeige. Leer = kein Enddatum. | — |
| customStyle | Textarea | Eigenes CSS, das dem Popup hinzugefügt wird. Erlaubt vollständige Design-Anpassungen. | — |
Tipp: Mit dem Feld
customStyle können Sie beliebiges CSS einfügen, um das Popup über die Standardoptionen hinaus anzupassen — z.B. eigene Schriftarten, Button-Styles oder responsive Anpassungen.