So fügen Sie PrestaShop 8 und 9 einen AJAX-Slide-in-Warenkorb hinzu (ohne das Theme zu bearbeiten)

Wenn ein Kunde in einem Standard-Shop mit PrestaShop 1.7, 8 oder 9 ein Produkt hinzufügt, zeigt das Theme ein Bestätigungs-Popup. Um eine Menge zu ändern, einen Artikel zu entfernen oder einen Gutscheincode einzugeben, muss der Kunde eine separate Warenkorbseite öffnen und danach den Weg zurück zu den Produkten finden.

Ein Slide-in-Warenkorb hält all das auf der Seite, auf der sich der Kunde gerade befindet. Diese Anleitung zeigt, was PrestaShop von Haus aus bietet, welche zwei Wege es zu einem AJAX-Slide-in-Warenkorb gibt und wie die Einrichtung Schritt für Schritt funktioniert, ohne Ihre Theme-Dateien anzufassen.

Was PrestaShop von Haus aus bietet

Der Warenkorb in PrestaShop stammt aus dem Warenkorb-Modul, das mit dem Shop ausgeliefert wird. Im Classic-Theme funktioniert er so:

• Der Kunde klickt auf „In den Warenkorb“, und ein Modal bestätigt, dass das Produkt hinzugefügt wurde.
• Das Modal bietet zwei Buttons: weiter einkaufen oder zur Kasse gehen.
• Jede Änderung am Warenkorb (Menge, Entfernen eines Produkts, ein Gutschein) erfolgt auf der Warenkorbseite, die komplett neu geladen wird.
• Auf dem Smartphone verdeckt das Modal den größten Teil des Bildschirms, und die Warenkorbseite ist ein zusätzlicher Schritt vor dem Checkout.

Dieser Ablauf funktioniert, aber jede Änderung am Warenkorb führt den Kunden von der Produktliste weg. Rund 70 % der Online-Warenkörbe werden abgebrochen, so das Baymard-Institut, und die Schritte zwischen „In den Warenkorb“ und „Bezahlen“ gehören zu den Stellen, an denen Kunden abspringen.

Was ein AJAX-Slide-in-Warenkorb ändert

Ein AJAX-Slide-in-Warenkorb ist ein Panel, das beim Hinzufügen eines Produkts seitlich in den Bildschirm hereinfährt. Die Seite darunter bleibt, wo sie war.

• Mengen werden mit Plus- und Minus-Buttons geändert, ohne dass die Seite neu lädt.
• Produkte werden direkt im Panel entfernt, und die Summen aktualisieren sich sofort.
• Gutscheincodes werden im selben Panel eingegeben.
• Eine Leiste für kostenlosen Versand zeigt, wie viel bis zum Schwellenwert noch fehlt.
• Der Button zur Kasse ist immer nur einen Tipp entfernt.

Weiterlesen: AJAX-Warenkorb vs. Neuladen der Seite in PrestaShop und was das für die Conversion bedeutet →

Zwei Wege zum Slide-in-Warenkorb

Option 1: direkt ins Theme einbauen

Ein Entwickler kann das Warenkorb-Modal durch ein eigenes Panel ersetzen. Dazu müssen die Theme-Templates bearbeitet, die Warenkorb-Events von PrestaShop in JavaScript abgefangen, der Warenkorb-Controller per AJAX aufgerufen und das Ergebnis für Desktop und Mobilgeräte gestaltet werden.

Das bietet volle Kontrolle, aber die Arbeit steckt im Theme. Ein Theme-Update kann sie überschreiben, und jede neue Funktion (Gutscheine im Panel, eine Versandleiste, Produktvorschläge) ist ein weiteres Stück eigener Code, das gepflegt werden muss.

Option 2: ein Modul installieren

Ein Slide-in-Warenkorb-Modul fügt das Panel über PrestaShop-Hooks hinzu. Die Theme-Dateien bleiben unverändert, das Panel übersteht Theme-Updates, und die Optionen werden in den Moduleinstellungen aktiviert, statt programmiert zu werden.

Im weiteren Verlauf dieser Anleitung wird Sliding Cart Block verwendet, unser AJAX-Slide-in-Warenkorb-Modul für PrestaShop 1.7.8, 8 und 9. Bei anderen Modulen sind die Schritte ähnlich: hochladen, konfigurieren, Hooks prüfen, testen.

Schritt für Schritt: Slide-in-Warenkorb hinzufügen, ohne das Theme zu bearbeiten

1. Voraussetzungen prüfen

• PrestaShop 1.7.8 oder neuer, einschließlich PrestaShop 8 und 9.
• PHP 7.2 oder neuer (PrestaShop 9 selbst benötigt PHP 8.1 oder neuer).
• Ein Back-Office-Konto mit der Berechtigung, Module zu verwalten.

Wenn Sie gleichzeitig ein Upgrade auf PrestaShop 9 planen, prüfen Sie zuerst Ihre anderen Module.

Kostenloser PrestaShop-9-Kompatibilitätscheck für Module →

2. Modul hochladen

1. Gehen Sie im Back Office zu Module → Modulmanager.
2. Klicken Sie oben rechts auf „Modul hochladen“.
3. Ziehen Sie die ZIP-Datei des Moduls in den Upload-Bereich.
4. Wenn die Installation abgeschlossen ist, klicken Sie auf „Konfigurieren“.

3. Festlegen, wie sich der Warenkorb öffnet

Die ersten Einstellungen bestimmen, was nach „In den Warenkorb“ passiert:

• Das Warenkorb-Panel nach dem Hinzufügen eines Produkts automatisch öffnen oder geschlossen lassen und nur das Warenkorb-Symbol aktualisieren.
• Eine eigene Einstellung für Smartphones mit einem Breakpoint für die Bildschirmbreite (standardmäßig 480 px). Viele Shops lassen das Panel auf kleinen Bildschirmen geschlossen und öffnen es auf dem Desktop.
• Panel links oder rechts, heller oder dunkler Modus und ein Layout in voller Breite auf Smartphones.
• Eine optionale Seitenleiste, die auf breiten Bildschirmen geöffnet bleibt (standardmäßig ab 1300 px).

4. Festlegen, was der Warenkorb anzeigt

• Mengen-Buttons, Produktbilder und gewählte Attribute (Größe, Farbe).
• Gutscheinfeld und Gesamtersparnis.
• Leiste für kostenlosen Versand. Sie übernimmt den Schwellenwert für kostenlosen Versand aus Ihren Versandeinstellungen, sodass kein Betrag erneut eingegeben werden muss.
• Bis zu drei Belohnungsstufen auf der Fortschrittsleiste, zum Beispiel ein Rabatt, ein Geschenk und kostenloser Versand.
• Produktvorschläge im Panel und im Popup nach dem Hinzufügen zum Warenkorb.
• Ein Hinweis zum Mindestbestellwert, der den Button zur Kasse unterhalb des Mindestbetrags deaktiviert.

5. Hooks prüfen

Das Panel wird über Hooks eingebunden, daher muss kein Template bearbeitet werden. Wenn der Warenkorb nach der Installation nicht erscheint, gehen Sie zu Design → Positionen und prüfen Sie, ob das Modul in displayHeader und displayNav eingehängt ist.

Ist ein anderes Warenkorb-Modul aktiv, kann es einen zweiten Warenkorb oder ein zweites Popup anzeigen. Deaktivieren Sie das andere Modul vor dem Test.

6. Cache leeren und testen

Leeren Sie den PrestaShop-Cache unter Erweiterte Einstellungen → Leistung und testen Sie dann als Kunde:

• Ein Produkt von einer Kategorieseite und von einer Produktseite hinzufügen.
• Im Panel eine Menge ändern und ein Produkt entfernen.
• Einen Gutscheincode einlösen.
• Die Leiste für kostenlosen Versand unter- und oberhalb des Schwellenwerts prüfen.
• Auf einem Smartphone wiederholen und dann eine Testbestellung aufgeben.

Alle Einstellungen erklärt in der Dokumentation zu Sliding Cart Block →

Was Sie nach der Umstellung messen sollten

Vergleichen Sie jeweils vier Wochen vor und nach der Umstellung, getrennt für Desktop und Mobilgeräte:

• Anteil der Warenkorb-Hinzufügungen, die bis zum Checkout gelangen.
• Warenkorbabbruchrate.
• Durchschnittlicher Bestellwert, wenn Sie die Leiste für kostenlosen Versand oder Produktvorschläge aktiviert haben.

So messen Sie Warenkorbabbrüche in PrestaShop →

UX-Muster für den mobilen Warenkorb in PrestaShop →

Häufig gestellte Fragen

Muss ich mein Theme bearbeiten, um einen Slide-in-Warenkorb hinzuzufügen?

Nein. Ein Modul fügt das Panel über PrestaShop-Hooks hinzu, die Theme-Dateien bleiben also, wie sie sind. Bei manchen Themes sind ein paar Zeilen CSS nötig, um Farben oder Abstände anzupassen.

Ersetzt ein Slide-in-Warenkorb die Warenkorbseite?

Nein. Warenkorbseite und Checkout funktionieren weiter wie bisher. Der Slide-in-Warenkorb ist eine zusätzliche Ebene, die die häufigsten Aktionen erledigt, ohne dass die Seite verlassen werden muss.

Funktioniert es mit PrestaShop 9?

Sliding Cart Block funktioniert mit PrestaShop 1.7.8, 8 und 9. Wenn Sie den gesamten Shop aktualisieren, prüfen Sie Ihre anderen Module auf Code, den PrestaShop 9 entfernt hat.

Wird der Shop dadurch langsamer?

Das Panel nutzt einen eigenen AJAX-Controller und lädt nur die Daten, die der Warenkorb braucht. Die Produktseite selbst wird nicht neu geladen, wenn sich der Warenkorb ändert.

Können Kunden im Slide-in-Warenkorb Gutscheincodes verwenden?

Ja. Im Panel lässt sich ein ausklappbares Gutscheinfeld aktivieren, und die Summen aktualisieren sich, sobald der Code eingelöst ist.