PrestaShop Design & Navigation

DataFirefly SideCart — Seitlicher Warenkorb für PrestaShop 8

Der Warenkorb, der die Produktseite nicht mehr verlässt.

Schluss mit der Weiterleitung zu /warenkorb, die den Kaufimpuls bricht. SideCart lässt ein Warenkorb-Panel von der Seite des Bildschirms gleiten, sobald ein Produkt hinzugefügt wird. Der Kunde sieht, was er gerade hinzugefügt hat, die Zwischensumme aktualisiert sich in Echtzeit, und er kann weiter in Ihrem Shop stöbern, ohne dass die Seite neu geladen wird. Die Standard-UX des modernen E-Commerce, in fünf Minuten Installation auf Ihrem PrestaShop 8.

PrestaShop 8.0+ PHP 8.0+ Ohne Neuladen 100 % konfigurierbar Mobile-first Multi-Theme
  • 30 Tage Rückgaberecht
  • 12 Monate Updates
  • 24-h-Support
www.datafirefly.com/de/
SC
v1.0.0 · aktualisiert 2024-12-19
Was es leistet

Die Kurzfassung.

01

Sofortige Öffnung beim Hinzufügen

Das Panel gleitet vom Rand, sobald ein Produkt zum Warenkorb hinzugefügt wird — kein Neuladen, kein Kontextverlust. Der Kunde bleibt auf der Produktseite.

02

Alles ist konfigurierbar

Position (links / rechts), Hauptfarbe, abdunkelndes Overlay, Auto-Öffnung beim Hinzufügen, Auto-Schließen mit konfigurierbarer Verzögerung, Anzeige der Zwischensumme, Steuern und Versand.

03

Kompatibel mit Ihrem Theme

Verbindet sich mit den Standard-PrestaShop-8-Hooks (displayHeader, actionCartUpdateQuantityBefore, displayAfterBodyOpeningTag). Funktioniert mit Classic, Hummingbird und den meisten kommerziellen Themes.

04

Native Performance

Minifiziertes und ausschließlich frontend-geladenes CSS und JS. Keine externe Abhängigkeit, kein schweres Framework. Null-Impact auf die Core Web Vitals.

Die ausführliche Fassung

Alles, was Sie wissen sollten bevor Sie installieren.

Ein detaillierter Blick darauf, wie DataFirefly SideCart — Seitlicher Warenkorb für PrestaShop 8 funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.

§ 01

Warum ein seitlicher Warenkorb?

Von 100 Besuchern, die auf „In den Warenkorb“ klicken, wie viele landen auf der Warenkorb-Seite und brechen ab? Viele. Die Weiterleitung bricht den Moment, in dem der Kaufimpuls am stärksten ist. SideCart löst das: der Kunde sieht seinen Warenkorb sich füllen, ohne die Produktseite zu verlassen, und kann entweder weiter shoppen oder mit einem Klick zum Checkout. Das ist das Standard-UX-Pattern von Amazon, Shopify und jedem Shop, der die Konversion ernst nimmt.

§ 02

Was der Kunde sieht

Ein 380-px-Panel, das von der rechten Seite gleitet (auch links konfigurierbar) mit einer flüssigen Animation. Innen: die Liste der Produkte mit Bild, Name, Variante, Einzelpreis und Mengensteuerung. Unten die in Echtzeit aktualisierte Zwischensumme, plus optional MwSt und geschätzte Lieferung. Zwei Aktions-Buttons: Warenkorb-Detail ansehen oder direkt zum Checkout. Das Overlay hinter dem Panel ist klickbar zum Schließen.

§ 03

Konfiguration in 5 Minuten

Installieren Sie das ZIP über den PrestaShop-Modul-Manager, dann gehen Sie in Module → DataFirefly SideCart → Konfigurieren. Eine einzige Einstellungsseite mit: Aktivieren / Deaktivieren, Position (Links / Rechts), Auto-Öffnung beim Hinzufügen (Ja / Nein), Overlay (Ja / Nein), Auto-Schließen (Ja / Nein) + Verzögerung in Sekunden, Hauptfarbe (Color Picker) und drei Boxen zur Anzeige von Zwischensumme / MwSt / Versand. Speichern, fertig live.

§ 04

Architektur und Performance

Das Modul nutzt die nativen PrestaShop-8-Hooks (displayHeader für die Assets, actionCartUpdateQuantityBefore zur Erkennung der Hinzufügungen, displayAfterBodyOpeningTag zur Injektion des Panels). Das CSS macht weniger als 10 KB gzippt, das JS weniger als 8 KB. Keine externe Abhängigkeit — kein jQuery erforderlich, kein Framework. Der Impact auf die Core Web Vitals ist null oder negativ (das Eliminieren der Weiterleitung zu /warenkorb verbessert das wahrgenommene LCP).

§ 05

Multi-Shop-Kompatibilität

Vollständig PrestaShop-Multi-Shop-kompatibel: jeder Sub-Shop kann seine eigene Konfiguration haben (andere Farbe, andere Position, aktivierte oder nicht aktivierte Hooks). Die Konfigurationsvariablen werden über Configuration::updateValue mit dem Standard-Multi-Shop-Kontext gespeichert.

§ 06

Mobile und Barrierefreiheit

Auf Mobile (< 768 px) erstreckt sich das Panel auf den Vollbildmodus für maximale Lesbarkeit. Das Schließen ist über die Esc-Taste, den X-Button in der Ecke, den Klick auf das Overlay oder den seitlichen Swipe (wo das Gerät es unterstützt) möglich. Alle interaktiven Elemente haben ARIA-Labels, und der Fokus wird im Panel gefangen, wenn es geöffnet ist.