Alles, was Sie wissen sollten bevor Sie installieren.
Ein detaillierter Blick darauf, wie Sticky In den Warenkorb für PrestaShop funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.
Warum eine Sticky-Schaltfläche zum Kauf
Auf Mobilgeräten scrollen über 60 Prozent der Besucher über die Schaltfläche In den Warenkorb hinaus, ohne zu klicken. Auf dem Desktop ist es bei langen Produktseiten mit detaillierter Beschreibung, Kundenbewertungen und verwandten Produkten fast genauso. Eine Sticky Bar, die dem Besucher folgt, greift diese Kaufabsicht genau dann auf, wenn sie sonst verloren ginge. Die großen Marktplätze, allen voran Amazon, machen das seit Jahren zum Standard.
Eine UX für jede Bildschirmgröße
Auf Mobilgeräten (unter 992 Pixel breit) liegt eine kompakte Leiste am unteren Bildschirmrand, mit voller Unterstützung für die Safe-Area von iPhones mit Notch. Auf dem Desktop stehen zwei Modi im Back-Office zur Wahl: eine schwebende rechte Sidebar, die mit einer dezenten Animation eingeblendet wird, oder eine mittige untere Leiste im Stil der Mobil-Variante. Sie entscheiden je nach Design und Art der Produktseite.
Intelligenter kompakter Variantenwahlschalter
Der kompakte Wahlschalter listet jede verfügbare Kombination mit Preis und Verfügbarkeit auf. Wenn der Kunde aus der Sticky Bar die Variante wechselt, synchronisiert das Modul automatisch die Varianten-UI der Hauptproduktseite (Radio-Buttons oder Auswahllisten), was die native Kombinations-Engine von PrestaShop auslöst: Preis neu berechnet, Bestand geprüft, Bild aktualisiert, genauso als hätte der Kunde die Variante direkt auf der Produktseite ausgewählt.
Saubere Integration, keine Überraschungen
Das Modul nutzt die offiziellen PrestaShop-Hooks und hält sich vom Haupt-DOM Ihres Themes fern. Ein Klick auf In den Warenkorb in der Sticky Bar löst programmatisch die Originalschaltfläche aus, wodurch das Bestätigungsmodal, die updateCart-Events, Erfolgsmeldungen und alle vorhandenen Anpassungen Ihres Themes oder anderer Module erhalten bleiben.
Performance-fokussiert
Kein Framework, keine externen Abhängigkeiten. Das CSS wiegt etwa 7 KB, das JavaScript etwa 12 KB, gzip eingerechnet. Assets werden ausschließlich auf Produktseiten geladen, nie auf der Startseite, dem Katalog oder dem Checkout. Die Sichtbarkeit der Bar steuert der native IntersectionObserver, deutlich effizienter als ein dauerhafter Scroll-Listener.
Vollständige Konfiguration aus dem Back-Office
Alles lässt sich über das PrestaShop-Back-Office einstellen, ohne Code zu ändern: globale Aktivierung, Anzeige je Gerät (Mobilgerät und oder Desktop), Desktop-Modus (schwebende Sidebar oder untere Leiste), oberer Versatz für Themes mit Sticky-Header, Anzeige des Vorschaubildes, des Variantenwahlschalters und der Mengenwahl, sowie eine komplette Farbpalette (Hintergrund, Schaltfläche, Schaltflächentext, Textfarbe, Preisfarbe).
Barrierefreiheit und Best Practices
Die Sticky Bar befolgt die ARIA-Empfehlungen: region-Rolle, eindeutige Beschriftungen für jedes Bedienelement, aria-live-Ankündigungen bei Preisänderungen, sichtbarer Fokus auf allen Schaltflächen, vollständige Tastaturunterstützung. Die Media-Query prefers-reduced-motion deaktiviert Transitions für Nutzer, die empfindlich auf Animationen reagieren. Alle Texte sind übersetzbar.
Es gibt noch keine Rezensionen.