Sticky Add to Cart für PrestaShop — Komplettanleitung

Überblick

DataFirefly Sticky Add to Cart zeigt eine dauerhaft sichtbare „In den Warenkorb“-Leiste auf den Produktseiten Ihres PrestaShop-8- oder 9-Shops. Auf Mobilgeräten dockt eine kompakte Leiste am unteren Bildschirmrand an. Auf dem Desktop gleitet eine schwebende Sidebar von rechts ein (oder wahlweise eine untere Leiste identisch zur mobilen Variante). Die Leiste enthält einen kompakten Variantenwahlschalter, eine Mengenwahl und den in Echtzeit aktualisierten Preis.

Das Hinzufügen zum Warenkorb erfolgt über eine direkte AJAX-Anfrage an den Warenkorb-Controller von PrestaShop: Das Modul manipuliert niemals das Formular oder die native Schaltfläche Ihres Themes und garantiert so eine konfliktfreie Koexistenz.

Installation

1. Öffnen Sie in Ihrem PrestaShop-Back-Office Module > Modul-Manager.
2. Klicken Sie auf Modul hochladen und wählen Sie die Datei dfstickyaddtocart.zip.
3. Klicken Sie nach der Installation auf Konfigurieren.
4. Leeren Sie den PrestaShop-Cache: Erweiterte Einstellungen > Leistung > Cache leeren.

Konfiguration

Alle Einstellungen finden Sie unter Module > Modul-Manager > DataFirefly Sticky Add to Cart > Konfigurieren.

Anzeige

• Modul aktivieren — globaler Schalter.
• Auf Mobilgeräten anzeigen — aktiviert die untere Leiste auf Bildschirmen unter 992 px.
• Auf Desktop anzeigen — aktiviert die Anzeige auf Bildschirmen ab 992 px.
• Desktop-Layout — zwei Modi: Schwebende Sidebar (rechts), eine 320-px-Karte, die vom rechten Rand einfährt, oder Untere Leiste, identisch zur mobilen Darstellung, aber auf 1280 px zentriert.
• Oberer Versatz Desktop (px) — Abstand zwischen dem oberen Fensterrand und der schwebenden Sidebar. Erhöhen Sie den Wert, wenn Ihr Theme einen Sticky-Header besitzt (Standard: 90 px).

Inhalt der Leiste

• Produktbild anzeigen — Miniatur des Titelbildes.
• Variantenwahlschalter anzeigen — kompakte Auswahlliste der Kombinationen (automatisch ausgeblendet, wenn das Produkt keine besitzt).
• Mengenwahl anzeigen — Minus- / Plus-Schalter (auf dem Desktop sichtbar; auf Mobilgeräten bleibt die Menge bei 1, um die Kompaktheit zu wahren).
• Ausblenden, wenn Hauptschaltfläche sichtbar — die Leiste erscheint erst, wenn die ursprüngliche „In den Warenkorb“-Schaltfläche den Viewport verlässt (empfohlen). Deaktivieren Sie die Option für eine dauerhaft sichtbare Leiste.

Farben

• Hintergrundfarbe — Hintergrund der Leiste (Standard: Weiß).
• Schaltflächenfarbe — Warenkorb-Schaltfläche (Standard: Teal #2fb5d2).
• Schaltflächentextfarbe — Beschriftung der Schaltfläche.
• Textfarbe — Produktname und Beschriftungen.
• Preisfarbe — optional; wenn leer, wird die Schaltflächenfarbe verwendet.

Funktionsweise

Sichtbarkeitserkennung

Das Modul beobachtet den ursprünglichen „In den Warenkorb“-Block mit der IntersectionObserver-API des Browsers. Sobald dieser Block den Viewport verlässt (der Nutzer hat gescrollt), erscheint die Sticky-Leiste mit einer Gleitanimation. Sobald er wieder sichtbar wird, verschwindet die Leiste. Dieser Mechanismus ist browsernativ und verursacht keinerlei Performance-Kosten beim Scrollen.

Variantenwahlschalter

Bei Produkten mit Kombinationen listet der kompakte Wahlschalter jede Variante mit Preis und Verfügbarkeit auf (ausverkaufte Varianten sind deaktiviert). Die Auswahl ist lokal zur Sticky-Leiste: Sie verändert nicht die Varianten-UI der Hauptseite. Wechselt der Kunde die Variante auf der Hauptseite, synchronisiert sich die Sticky-Leiste automatisch über das PrestaShop-Event updatedProduct.

In den Warenkorb

Ein Klick auf die Sticky-Schaltfläche sendet eine AJAX-POST-Anfrage direkt an den Warenkorb-Controller von PrestaShop (derselbe Endpunkt, den das Theme nutzt), mit der in der Leiste gewählten Variante und Menge. Bei Erfolg löst das Modul das Event updateCart aus: Der Warenkorb-Zähler im Header und die Warenkorb-Vorschau Ihres Themes aktualisieren sich normal, und die Sticky-Schaltfläche zeigt ein Bestätigungshäkchen.

Mobile Darstellung

Auf Mobilgeräten passt sich die Leiste automatisch an:

• Produkt ohne Varianten — eine einzige Zeile: Miniatur, Name, Preis und Schaltfläche. Unter 600 px weicht die Beschriftung dem Warenkorb-Icon; unter 380 px wird die Miniatur ausgeblendet.
• Produkt mit Varianten — zwei Zeilen: Miniatur, Name, Preis und Schaltfläche in der ersten; Variantenwahlschalter in voller Breite in der zweiten.

Die Leiste berücksichtigt die safe-area-inset-bottom-Zone von iPhones mit Notch und die Präferenz prefers-reduced-motion animationsempfindlicher Nutzer.

Theme-Kompatibilität

Das Modul verwendet die Standard-CSS-Selektoren des Classic-Themes und seiner Ableitungen: .product-add-to-cart, .add-to-cart, button[data-button-action="add-to-cart"], form#add-to-cart-or-refresh. Die große Mehrheit der Markt-Themes folgt diesen Konventionen.

Verwendet Ihr Theme andere Klassen, befinden sich die zwei anzupassenden Funktionen am Anfang der Datei views/js/dfstickyaddtocart.js: getMainBtn() (Selektor der nativen Schaltfläche) und getMainForm() (Selektor des Produktformulars). Das sind die einzigen beiden Berührungspunkte mit Ihrem Theme.

Fehlerbehebung

Die Leiste erscheint nicht

1. Prüfen Sie, ob das Modul in seiner Konfiguration aktiviert ist und die Anzeige für das getestete Gerät (mobil / Desktop) aktiv ist.
2. Leeren Sie den PrestaShop-Cache (Erweiterte Einstellungen > Leistung) und laden Sie die Seite mit Strg+Umschalt+R neu.
3. Wenn die Option „Ausblenden, wenn Hauptschaltfläche sichtbar“ aktiv ist, erscheint die Leiste erst nach dem Scrollen über die ursprüngliche Schaltfläche hinaus — das ist das erwartete Verhalten.
4. Prüfen Sie in der Browser-Konsole, ob kein JavaScript-Fehler eines anderen Moduls die Seitenausführung blockiert.

Das Hinzufügen zum Warenkorb funktioniert nicht

1. Öffnen Sie die Browser-Konsole: Das Modul protokolliert seine Fehler mit dem Präfix [dfsticky].
2. Prüfen Sie im Netzwerk-Tab die POST-Anfrage an den Warenkorb-Controller: HTTP-Status und Antwortinhalt zeigen die genaue Ursache (ausverkauft, Mindestmenge usw.).
3. Das Modul toleriert PHP-Warnungen in Entwicklungsumgebungen (es extrahiert das JSON auch dann, wenn Warnungen davorstehen), eine saubere Produktionsumgebung bleibt jedoch empfohlen.

Die Sidebar überlappt den Theme-Header

Erhöhen Sie den Wert Oberer Versatz Desktop (px) in der Konfiguration, bis die Sidebar unter Ihrem Sticky-Header sitzt.

Technische FAQ

Verlangsamt das Modul die Seiten?

Nein. Die Assets (etwa 7 KB CSS und 12 KB JavaScript) werden nur auf dem product-Controller geladen. Keine externe Bibliothek, kein Scroll-Listener: Die Sichtbarkeit steuert IntersectionObserver.

Ist es Multistore-kompatibel?

Ja. Alle Werte werden über die Configuration-Klasse von PrestaShop mit dem nativen Multistore-Kontext gespeichert: Jeder Shop kann eigene Farben und Einstellungen haben.

Welche Hooks werden verwendet?

actionFrontControllerSetMedia (Asset-Registrierung), displayFooterProduct (Markup-Rendering) und displayHeader (kritisches Anti-Flash-Mikro-CSS).

Sind die Texte übersetzbar?

Ja. Alle Zeichenketten laufen über das Übersetzungssystem von PrestaShop. Das Modul wird in Französisch, Englisch, Spanisch und Deutsch ausgeliefert; weitere Sprachen fügen Sie unter International > Übersetzungen hinzu.

Versionsverlauf

1.0.3

• Tolerante Analyse der Antworten des Warenkorb-Controllers: Das JSON wird auch dann korrekt extrahiert, wenn PHP-Warnungen davorstehen (Entwicklungsumgebungen).
• Anfragekörper im URL-encoded-Format, identisch zur nativen Serialisierung des Themes, für maximale Kompatibilität.
• Endgültige Entfernung jeglicher programmatischer Auslösung der nativen Schaltfläche: Beide Schaltflächen sind nun völlig unabhängig.

1.0.2

• Entfernung des Renderings des vom Warenkorb-Controller zurückgegebenen Bestätigungs-Modals, das auf manchen Seiten eine unsichtbare, klickblockierende Ebene hinterlassen konnte. Die Bestätigung läuft über das Event updateCart und das Häkchen der Sticky-Schaltfläche.
• Defensive Bereinigung verwaister Modals beim Seitenladen.

1.0.1

• Umstellung auf direktes AJAX-Hinzufügen zum Warenkorb: Das Modul verändert das Produktformular nicht mehr und hängt nicht mehr vom DOM-Zustand des Themes ab.
• DOM-Referenzen werden zur Laufzeit aufgelöst, um den Austausch des Formulars durch die Kombinations-Engine zu überstehen.
• Sicherheits-Reset der Ladeanzeige.

1.0.0

• Erste Version: Sticky-Leiste für Mobil und Desktop, kompakter Variantenwahlschalter, Mengenwahl, Farbanpassung, ARIA-Barrierefreiheit, Multistore, FR/EN/ES/DE.