Features
Zweispaltiges Layout
Desktop: Das Formular (Adresse, Versand, Zahlung) befindet sich links, die Bestellübersicht rechts als sticky Sidebar — sie bleibt beim Scrollen sichtbar.
Tablet: Zweispaltig bis ca. 768 px, darunter einspaltig.
Mobil: Die Bestellübersicht klappt per Toggle auf („Zusammenfassung anzeigen"), das Formular erscheint darunter. Der „Jetzt bestellen"-Button ist immer sichtbar und erhält scroll-margin-bottom, um fixed-position-Elemente (Cookie-Banner, Benachrichtigungsleisten) nicht zu überdecken.
Master-Switch
Über Allgemein → One-Page-Checkout aktivieren lässt sich das komplette Plugin je Verkaufskanal abschalten — der Shopware-Standard-Checkout rendert dann ohne jegliche Plugin-Eingriffe (praktisch für A/B-Vergleiche gegen den Standard oder zur Fehlersuche).
AJAX Versand- und Zahlungsartwechsel
Das Umschalten der Versandart oder Zahlungsart aktualisiert die Bestellübersicht (Versandkosten, Gesamtpreis) ohne Seitenreload via AJAX. Das JS-Plugin liest den Rohwert direkt aus data-shipping-price — kein JavaScript-seitiges Text-Parsing, kein Überschreiben anderer Preis-Zeilen.
Die gewählte Versand- und Zahlungsart werden als Hidden Inputs synchronisiert und beim Absenden des Registrierungsformulars mitübertragen — auch im Gast-Checkout.
Cross-Selling im Checkout
Zeigt im Checkout Produkte an, die in Shopware nativ als Cross-Selling für die Artikel im Warenkorb hinterlegt sind — im ESN-Stil unter der Überschrift „Das könnte dir auch gefallen". Seit v1.3.1 ist ein runder Warenkorb-Icon-Button der Standard (per Einstellung auf den „Hinzufügen"-Textbutton zurückschaltbar); Icon und Button-Farbe sind konfigurierbar.
- Position konfigurierbar: Aus / Links (im Checkout-Hauptbereich) / Rechts (zwischen Gutscheincode und Bestellübersicht, mit Trennlinie). Standard: Rechts.
- Varianten-Produkte: zeigen ein Varianten-Dropdown (im Stil der Länderauswahl) mit der Zeile „Wähle aus X Optionen" (ab v1.3.0); die erste Variante ist vorausgewählt, sodass der Button immer aktiv ist.
- Titelfarbe konfigurierbar (ab v1.3.0): Standard neutral, per Colorpicker anpassbar — Theme-Linkfarben schlagen nicht mehr durch.
- Hinzufügen ohne Reload: Der Button fügt das Produkt per AJAX hinzu und aktualisiert Warenkorb, Summen und den Gratisversand-Balken direkt an Ort und Stelle — kein Seitenreload, kein Scroll-Sprung. Die Standard-Meldung „Produkt zum Warenkorb hinzugefügt" wird angezeigt.
- Bereits im Warenkorb liegende Produkte werden ausgeblendet. Die maximale Anzahl ist konfigurierbar (Standard 4).
- Funktioniert mit AtlKatanaTheme und Child-Themes (z. B. WurzenerTheme).
Cross-Selling-Gruppen werden ganz normal im Shopware-Produkt unter Cross-Selling gepflegt. Das Plugin zeigt nur aktive Gruppen der Warenkorb-Produkte an.
Off-Canvas-Warenkorb
Wertet den seitlichen Warenkorb (Off-Canvas) im ESN-Stil auf — unabhängig vom Checkout, alle Schalter ab Werk aus (ab v1.3.0, Feinschliff ab v1.3.1):
- Gratisversand-Fortschrittsbalken ganz oben — nutzt den Schwellenwert der Gratisversand-Karte, auch wenn der Balken im Checkout ausgeschaltet ist.
- Sticky „Zur Kasse"-Bereich — bleibt beim Scrollen sichtbar, vorhandene Express-Buttons (PayPal/Amazon Pay) inklusive.
- Zahlungsarten-Icons unter dem Button, regelgefiltert wie im Checkout.
- Cross-Selling-Slider am Ende des Warenkorbs (kompakte Karten, runder Warenkorb-Icon-Button); „Hinzufügen" aktualisiert den Off-Canvas ohne Neuladen.
- Minimalistischer Kopf & Gutschein-Design (ab v1.3.1, Opt-in): großer „Warenkorb"-Titel mit schlichtem X statt des Theme-Schließen-Balkens, dezentes Gutschein-Feld, ESN-artige Warenkorb-Zeilen (Bild-Kachel, getrennte Mengen-Stepper, Mülleimer-Icon) und die Gesamtsumme direkt im „Zur Kasse"-Button (aktualisiert sich bei jeder Änderung).
- „Warenkorb anzeigen"-Link abschaltbar (ab v1.3.1, Standard an).
Das ESN-Kopf-Design stylt Theme-Markup um und ist deshalb bewusst Opt-in — nach dem Aktivieren im eigenen Theme prüfen.
Newsletter-Opt-in
Optional lässt sich im Checkout eine Newsletter-Checkbox einblenden. Sie ist standardmäßig nicht vorausgewählt (DSGVO-konform). Hakt der Kunde sie an, wird er nach der Bestellung per Double-Opt-in (Bestätigungsmail) für den Newsletter angemeldet.
Ein Fehler bei der Newsletter-Anmeldung bricht die Bestellung nie ab. Die Checkbox erscheint auf der Adress-/Registrierungsseite.
Adress-Autovervollständigung
Beim Tippen der Straße werden passende Adressen vorgeschlagen; eine Auswahl füllt Straße, PLZ und Ort automatisch aus. Reduziert Tippfehler und Abbrüche.
- Anbieter konfigurierbar: Google Places oder Geoapify (jeweils eigener API-Key).
- Standard: aus. Ohne gültigen Key bleibt das normale Tippen unverändert (Soft-Fail, keine Fehler).
- Befüllt wird nur Straße/PLZ/Ort — Land und Bundesland bleiben unangetastet.
Der API-Key ist clientseitig im Browser sichtbar. Beschränken Sie ihn in der Anbieter-Konsole per HTTP-Referrer auf Ihre Domain.
Gratisversand-Fortschrittsbalken
Zeigt im Checkout einen Fortschrittsbalken „Nur noch X € bis zum kostenlosen Versand!" mit einem Balken in der Primärfarbe — ganz oben in der Bestellübersicht. Ist die Schwelle erreicht, wechselt die Meldung zu „Super – du erhältst kostenlosen Versand! 🎉".
Der Schwellenwert wird manuell pro Sales-Channel eingetragen (Shopware kennt keinen globalen Gratisversand-Schwellenwert — Versandkosten laufen über den Rule-Builder). Der Balken aktualisiert sich automatisch, wenn sich der Warenkorb ändert.
Tragen Sie als Schwelle exakt den Betrag ein, ab dem Ihre Versandkosten-Regel kostenlosen Versand gewährt, damit Balken und tatsächliche Versandkosten zusammenpassen.
Minimaler Header & dunkle Variante
Der Checkout zeigt standardmäßig einen minimalen Header (nur Logo + Warenkorb-Icon). Optional kann stattdessen der normale Header/Footer des aktiven Themes angezeigt werden (Einstellung „Minimalen Checkout-Header verwenden").
Dunkler Header (ESN-Stil): Auf Wunsch wird der Header dunkel — schwarzer Hintergrund mit weißem Warenkorb-Icon, auf Desktop und Mobil. Da ein dunkles Logo auf schwarzem Grund unsichtbar wäre, lässt sich ein separates helles/weißes Logo für den dunklen Header hinterlegen (Fallback auf das normale Logo, wenn leer).
Wunschlieferdatum
Eigenes, integriertes Wunschlieferdatum (seit v1.0.28): Kundinnen und Kunden wählen optional per Kalender, ab wann geliefert werden soll.
- Vorlaufzeit global konfigurierbar und zusätzlich je Produkt über ein Zusatzfeld — das späteste Produkt im Warenkorb bestimmt das früheste wählbare Datum.
- Gesperrte Wochentage (z. B. Sonntag) und maximaler Vorausbuchungszeitraum einstellbar.
- Optional als Pflichtfeld.
- Alle Regeln werden serverseitig durchgesetzt (auch beim Absenden der Bestellung) — manipulierte oder veraltete Eingaben können sie nicht umgehen.
- Das gewählte Datum wird an der Bestellung gespeichert (Zusatzfeld) und ist in Bestell-E-Mails und im Admin sichtbar.
Kompatibilität: Alternativ unterstützt das Plugin weiterhin das DtgsDeliveryDate-Plugin — dessen Panel rendert sauber und passend gestylt im One-Page-Checkout.
Adress-Split: Straße & Hausnummer
Getrennte Felder für Straße und Hausnummer (bessere Datenqualität für Versanddienstleister). Konfigurierbar unter Adresse (Straße/Hausnummer):
- Split komplett abschaltbar (ein klassisches Straßenfeld)
- Hausnummer optional machbar — für Märkte, in denen Adressen keine Hausnummer haben
Gast-Checkout mit Inline-Registrierung
Der Checkout beginnt mit einer E-Mail-Eingabe. Per Toggle kann der Nutzer wählen:
- Als Gast fortfahren — kein Passwort erforderlich
- Kundenkonto erstellen — Passwortfeld wird eingeblendet
- Anmelden — Login-Formular erscheint inline
Nach der Registrierung wird der Kontext inkl. gewählter Versand- und Zahlungsart auf den neuen Kundensession-Token übertragen, und der Warenkorb wird neu berechnet — so dass Lieferkosten korrekt in die Bestellung einfließen.
Express Checkout (PayPal)
Der PayPal Express-Button erscheint oberhalb des Formulars und leitet den Nutzer direkt zu PayPal weiter — ohne Adresseingabe im Shop.
Voraussetzungen:
- SwagPayPal installiert und konfiguriert (API-Zugangsdaten hinterlegt)
- „Express Checkout" im SwagPayPal-Plugin aktiviert
- In der Plugin-Konfiguration: Allgemein → Express Checkout anzeigen = ✅
Warenkorb-Reservierungstimer
Ein 10-Minuten-Countdown signalisiert Dringlichkeit. Bei Ablauf blendet sich der Timer per Fade-Animation aus und wird aus dem DOM entfernt.
Für B2B-Shops empfiehlt sich das Deaktivieren des Timers unter Allgemein → Warenkorb-Reservierungstimer anzeigen, da lange Bestellvorgänge mit Genehmigungsschritten üblich sind.
Floating Labels
Alle Eingabefelder verwenden das Bootstrap-5-Floating-Label-Pattern: Der Label-Text schwebt nach oben, sobald der Nutzer tippt oder ein Feld befüllt ist. Das JS-Plugin transformiert alle Standard-Formularfelder automatisch, ohne Twig-Anpassungen zu erfordern.
Unterstützte Felder:
- Alle Standardfelder (Vorname, Nachname, E-Mail, Straße, PLZ, Ort, …)
- Firmenfelder (Firma, Abteilung, USt-IdNr.)
- Telefonnummer
- Geburtstag
- DHL Packstation / Postfiliale / Paketshop (inkl. async-Fallback, siehe unten)
Custom Select-Dropdowns
Native <select>-Elemente werden durch vollständig gestylte Custom-Dropdowns ersetzt:
- Suche — erscheint automatisch ab 8 Optionen
- Tastaturnavigation — Pfeiltasten, Home/End, Buchstaben-Vorauswahl
- Alphabetische Sortierung — locale-aware (
localeCompare) - ARIA-konform — Screen-Reader-kompatibel
- MutationObserver — reagiert auf dynamisch nachgeladene Optionen (30-ms-Debounce)
Gutschein / Aktionscode
Das Gutschein-Feld erscheint in der Bestellübersicht. Der „Anwenden"-Button ist deaktiviert, solange das Eingabefeld leer ist (inkl. Paste-Erkennung). In der Plugin-Konfiguration unter Allgemein → Gutschein-Feld anzeigen kann das Feld vollständig ausgeblendet werden.
Benefits und Advantages
Benefits (Sidebar, unterhalb der Bestellübersicht): 3 Trust-Badges mit je Icon, Titel und Beschreibung. Inhalt und Icons frei konfigurierbar. 15 SVG-Icons zur Auswahl.
Advantages (oberhalb des Formulars): Bis zu 2 Punkte mit optionalem Bild. Textinhalt über Shopware-Snippets pflegbar.
TrustedShops-Integration
TrustedShops-Widgets und andere über die Theme-Konfiguration eingebundene Scripts werden auf den Checkout-Schrittseiten (Adresse, Bestätigung, Warenkorb) nicht geladen. Auf der Danke-Seite laden sie normal — Conversion-Tracking bleibt vollständig erhalten.
DHL Packstation / Postfiliale / Paketshop
Das Plugin ist vollständig kompatibel mit dem DHL-Plugin:
- Floating Labels greifen auf alle DHL-injizierten Formularfelder
- Placeholder-Texte bleiben sichtbar (korrekte CSS-Spezifität)
- Für DHL-Plugins, die ihre Formulare asynchron nachladen: 1,2-Sekunden-Fallback für zuverlässige DOM-Mutation-Erkennung
Bankverbindung auf der Danke-Seite
Für Zahlungsarten wie „Vorkasse / Überweisung" zeigt das Plugin die Bankverbindung direkt auf der Danke-Seite an — inkl. vorausgefülltem Verwendungszweck (Vorname Nachname + #Bestellnummer). Keine E-Mail-Template-Anpassung erforderlich.
Die anzuzeigenden Zahlungsarten werden in der Plugin-Konfiguration unter Allgemein → Bankverbindung bei Zahlungsarten ausgewählt.
Responsive Design
| Breakpoint | Verhalten |
|---|---|
| ≥ 992 px (Desktop) | Zweispaltig, sticky Sidebar |
| 768–991 px (Tablet) | Zweispaltig, sticky Sidebar |
| < 768 px (Mobil) | Einspaltig, Zusammenfassung als Toggle |
Logo-Größen lassen sich pro Breakpoint separat konfigurieren (Höhe + max-Breite).
Formularvalidierung
- Clientseitige Validierung beim Absenden (HTML5 + Bootstrap
was-validated) - Auto-Scroll zum ersten fehlerhaften Feld
- Fokus wird automatisch auf das erste ungültige Eingabefeld gesetzt
- Fehlermeldungen in DE und EN per Snippet konfigurierbar
Scroll-Wiederherstellung
Beim Absenden des Formulars wird die aktuelle Scroll-Position in sessionStorage gespeichert. Nach einem Seitenreload (z. B. nach Validierungsfehlern) springt die Seite zur vorherigen Position — der Nutzer muss nicht erneut nach unten scrollen.
Scrollbar-Breiten-Kompensation
Das Plugin misst die Browser-Scrollbalken-Breite und injiziert sie als CSS Custom Property --qubix-scrollbar-width. Damit können fixed-width-Layouts Layout-Shifts bei Modal-Öffnungen vermeiden. Der Wert wird bei resize automatisch neu berechnet (200-ms-Debounce).
Warenkorb-Erinnerung (Recovery)
Abgebrochene Checkouts automatisch per E-Mail zurückholen — mit Flow-Builder-Trigger, One-Click-Wiedereinstiegs-Link und Admin-Auswertung. → Ausführlich: Warenkorb-Erinnerung
Checkout-Analytics & A/B-Tests
Conversion-Rate, Funnel, Verweildauer und Recovery-KPIs direkt in der Administration — plus A/B-Tests für Checkout-Varianten mit Signifikanz-Prüfung. Messung serverseitig und pseudonym (keine Cookies). → Ausführlich: Checkout-Analytics & A/B-Tests
Bestellbestätigungs-Seite
Aufgeräumte Danke-Seite mit Bestellnummer, Karte zur Lieferadresse, Zahlungs- und Versandinformationen sowie optionaler Bankverbindung bei Vorkasse.
