Zum Hauptinhalt springen

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.

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.

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.

tipp

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​

BreakpointVerhalten
≥ 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).