Blog

AJAX-Warenkorb vs. Seitenneuladen in PrestaShop: Die tatsächlichen Auswirkungen auf die Konversionsrate

Das PrestaShopAddons-Team 8 Minuten Lesezeit
PrestaShop: AJAX-Warenkorb vs. Seitenneuladen – Vergleich der Auswirkungen auf die Konversionsrate

Wenn Sie ein Produkt in einen PrestaShop-Warenkorb legen, wird die Seite standardmäßig neu geladen. Neuere Ansätze nutzen AJAX – der Warenkorb wird direkt aktualisiert, ohne dass die Seite wechselt. Für Shop-Betreiber stellt sich die Frage, ob der AJAX-Ansatz tatsächlich den Umsatz steigert oder ob es sich lediglich um eine als Optimierung getarnte Vorliebe der Entwickler handelt.

Kurze Antwort: Ja, AJAX punktet bei der Konversionsrate, der Benutzererfahrung und der wahrgenommenen Geschwindigkeit. — allerdings nur, wenn es richtig umgesetzt wird. Hier ist der Vergleich der entscheidenden Aspekte, wobei der SEO-Mythos am Ende beleuchtet wird.

Wie die einzelnen Funktionen tatsächlich funktionieren

Warenkorb beim Neuladen der Seite (klassisches PrestaShop)

  1. Der Benutzer tippt auf “In den Warenkorb”.”
  2. Der Browser sendet das Formular per POST an den Warenkorb-Controller.
  3. Server verarbeitet die Anfrage, fügt eine Zeile in den Warenkorb ein und gibt eine vollständige HTML-Seite zurück
  4. Der Browser empfängt 40–200 KB+ HTML, analysiert diese, lädt alle CSS- und JS-Dateien neu und rendert die Seite.
  5. Der Benutzer sieht die Warenkorbseite (jetzt ganz oben auf der Seite, außerhalb des Produktkontexts)

Jeder Schritt birgt das Risiko eines Fehlers: ein langsamer Server, eine instabile Mobilfunkverbindung, ein Timeout oder ein versehentliches Antippen der Zurück-Taste.

AJAX-Warenkorb

  1. Der Benutzer tippt auf “In den Warenkorb”.”
  2. JavaScript sendet eine POST-Anfrage an einen AJAX-Endpunkt (in der Regel /module/slidingcartblock/ajax oder ähnliches)
  3. Der Server verarbeitet die Anfrage und gibt kleine JSON-Daten (200 Byte – 5 KB) zurück.
  4. JavaScript aktualisiert die Anzahl der Symbole im Warenkorb und öffnet optional ein Slide-in-Fenster.
  5. Der Benutzer bleibt im Kontext; das Produkt ist weiterhin auf dem Bildschirm zu sehen

Der Unterschied ist nicht nur technischer Natur – es ist der Unterschied zwischen einem Kunden, der denkt: “Der Warenkorb wurde aktualisiert”, und einem, der sich fragt: “Bin ich noch am Einkaufen?”

Ein direkter Vergleich der entscheidenden Faktoren

Konversionsrate

Branchenstudien belegen durchweg, dass sich durch den Abbau von Reibungspunkten im „In den Warenkorb“-Prozess eine deutliche Steigerung der Konversionsrate erzielen lässt. Es gibt zwar keine einzelne, spezifisch auf PrestaShop bezogene Studie, doch die übereinstimmenden Ergebnisse über verschiedene Plattformen hinweg sind eindeutig:

  • Baymard-Institut nennt “zu langwierige bzw. komplizierte Kaufabwicklung” und “Fehlfunktionen bzw. Abstürze der Website” als die fünf häufigsten Ursachen für Warenkorbabbrüche – beides wird durch das Neuladen der gesamten Seite noch verschlimmert (Statistiken zur Warenkorbabbruchrate, Baymard 2025).
  • Googles Untersuchung zu den Core Web Vitals Dokumente, die mobile Nutzer Seiten mit einer Ladezeit von mehr als 3 Sekunden (53%) sollten vermieden werden. Ein vollständiges Neuladen der Seite bei Änderungen am Warenkorb überschreitet bei 4G-Verbindungen regelmäßig diesen Schwellenwert, insbesondere bei nicht optimierten PrestaShop-Themes (web.dev — Largest Contentful Paint).
  • Die viel zitierte Erkenntnis von Amazon: Eine Verzögerung von 1 Sekunde verringert die Konversionsrate um 7%. Das Nachladen per Warenkorb-Aktion dauert leicht 1–3 Sekunden, während eine AJAX-Antwort nur wenige hundert Millisekunden benötigt.
  • In mehreren Berichten zu E-Commerce-Plattformen (Shopify Plus, BigCommerce) wird darauf hingewiesen, dass Verbesserungen bei der Umstellung von 5-15% durch reibungsmindernde Änderungen am Warenkorb – Einschubfelder, Inline-Mengenauswahl, einseitige Kaufabwicklung – wobei die größten Zuwächse im mobilen Bereich zu verzeichnen sind.

Der Lift ist auf Mobilgeräten durchweg größer, da die Nachteile beim Neuladen der Seite dort stärker ins Gewicht fallen: langsamere Verbindungen, geringere Toleranz gegenüber Kontextwechseln und durch das Neuladen ausgelöste Rücksetzungen des Bildlaufs, wodurch der Produktkontext des Nutzers verloren geht.

Wahrgenommene Geschwindigkeit

Ein vollständiger Seitenneuladevorgang löst einen Moment aus, in dem die Seite zunächst leer ist und dann der Inhalt erscheint – was Nutzer selbst bei einem schnellen Server als Verzögerung empfinden. Eine Serverantwort von 400 ms fühlt sich bei AJAX wie 400 ms an, bei einem vollständigen Neuladen hingegen wie 1.5 Sekunden, da Letzteres das Rendern, das Parsen von CSS, das Laden von Schriftarten und die Ausführung von JavaScript umfasst.

Die Wahrnehmung ist der ausschlaggebende Faktor für Warenkorbabbrüche, nicht die Servergeschwindigkeit. Warenkörbe, die sich schneller anfühlen, erzielen selbst bei gleicher tatsächlicher Geschwindigkeit eine höhere Konversionsrate.

Aktualisierungsgeschwindigkeit des Warenkorbs (Hinzufügen, Entfernen, Menge)

Hier hat AJAX eindeutig die Nase vorn. Ändern der Stückzahl in einem Warenkorb, der beim Neuladen der Seite aktualisiert wird:

  • Tippen Sie auf “+”, bestätigen Sie die Eingabe, warten Sie, bis die Seite neu geladen ist, und scrollen Sie zurück zum Eintrag.
  • ~2–5 Sekunden pro Änderung auf Mobilgeräten

Derselbe Vorgang bei einem AJAX-Warenkorb:

  • Tippen Sie auf “+” – der Wert ändert sich sofort, die Gesamtsumme wird direkt aktualisiert
  • ~200 ms, kein Neuladen

Bei einem Warenkorb mit fünf Artikeln, bei dem ein Nutzer die Mengen anpassen möchte, spart AJAX 10 bis 20 Sekunden. Das ist der Unterschied zwischen “OK, ich bin fertig” und “Vergiss es”.

Mobile Benutzererfahrung

Ausführlich behandelt in UX für den mobilen Warenkorb bei PrestaShop – 7 Muster, die tatsächlich zu Conversions führen. Kurz gesagt: AJAX ist die Grundlage für jedes funktionierende mobile Designmuster (einblendbare Panels, Toast-Benachrichtigungen, feststehende Zusammenfassungen). Ein Neuladen der Seite macht diese Funktionen unmöglich.

Serverauslastung

Entgegen der allgemeinen Annahme ist AJAX für den Server weniger belastend. Ein Warenkorb, bei dem die Seite neu geladen wird, bedeutet:

  • Vollständige HTML-Darstellung bei jeder Aktion im Warenkorb
  • Alle Seitenelemente werden erneut angefordert (sofern sie nicht aggressiv zwischengespeichert wurden)
  • Datenbankabfragen für Kopfzeile, Fußzeile, Menü, ähnliche Produkte usw.

Ein AJAX-Endpunkt gibt JSON zurück – in der Regel 5- bis 20-mal weniger Bandbreite, weniger Datenbankabfragen und geringere CPU-Auslastung. Bei einem Shared-Hosting-Tarif mit begrenzten Ressourcen bewältigen AJAX-Warenkörbe Traffic-Spitzen besser.

Fehlerbehandlung

Fehler beim Neuladen der Warenkorbseite sind besonders ärgerlich: Artikel nicht vorrätig, Gutschein ungültig, Zahlung abgelehnt – jeder dieser Fehler wird durch das Neuladen der Seite angezeigt. Der Nutzer weiß möglicherweise gar nicht, was sich geändert hat.

AJAX-Fehler lassen sich gezielt beheben: Zeigen Sie neben dem betreffenden Element eine rote Toast-Meldung an, lassen Sie alles andere unverändert, geben Sie dem Nutzer die Möglichkeit, einen Fehler zu korrigieren, und versuchen Sie es erneut. Eine bessere Fehlerbehebung führt zu weniger Abbrüchen.

Verhalten der Zurück-Schaltfläche

AJAX kann manchmal die „Zurück“-Funktion beeinträchtigen (wenn es nicht ordnungsgemäß implementiert ist – kein Eintrag im Verlauf für die Warenkorb-Aktion). Das Neuladen der Seite sorgt zwar für ein korrektes Verhalten der „Zurück“-Funktion, führt jedoch bei jedem Klick auf „Zurück“ zu einem Neuladen der Seite, was wiederum ein anderes Ärgernis darstellt. Gute AJAX-Implementierungen nutzen die History-API, um das Verhalten der „Zurück“-Funktion beizubehalten; nachlässige Implementierungen tun dies nicht.

Wenn das Neuladen der Seite kein Problem darstellt

Das Neuladen einer Seite ist nicht immer falsch. Sinnvolle Fälle:

  • Sehr kleine Kataloge — 10 Produkte, die meisten Nutzer legen 1–2 Artikel in den Warenkorb, die Kosten für das Neuladen sind vernachlässigbar
  • B2B-Shops mit langsamen, bedächtigen Kaufprozessen — Kunden fügen Artikel hinzu und prüfen diese sorgfältig; eine gefüllte Warenkorbseite wird erwartet und ist erwünscht
  • Veraltete Designs, bei denen die Kosten für die AJAX-Nachrüstung höher sind als die Umsatzsteigerung — Ein altes Geschäft mit einem Umsatz von 500 € pro Monat kann eine Migration wahrscheinlich nicht rechtfertigen.
  • Regulatorische Rahmenbedingungen, unter denen jede Aktion im Warenkorb nachvollziehbar sein muss — In einigen Branchen wird aus Gründen der Rechtsklarheit das explizite Neuladen pro Aktion bevorzugt

Für typische B2C-Shops mit mobilem Traffic gelten diese Ausnahmen nur selten. Die meisten Shops, die derzeit den „Warenkorb neu laden“-Modus nutzen, wären mit einem Wechsel besser beraten.

So implementieren Sie einen AJAX-Warenkorb in PrestaShop

Option 1: Nativer PrestaShop-AJAX-Warenkorb

PrestaShop 1.7+ wird ausgeliefert mit ajax-cart.js und einen Standard-Controller-Endpunkt. Viele Themes deaktivieren diesen oder nutzen ihn nicht vollständig. Aktivieren: Shop-Einstellungen → Allgemein → Ajax auf der Produktseite aktivieren. Das Ergebnis ist funktional, aber minimalistisch – der Warenkorb wird aktualisiert, es gibt kein ausklappbares Fenster und keine Leiste für kostenlosen Versand.

Option 2: Anpassung auf Theme-Ebene

Passen Sie das Theme an cart-detailed.tpl und fügen Sie JavaScript hinzu, um Formularübermittlungen abzufangen. Funktioniert zwar, ist aber anfällig; bei jedem Theme-Update besteht die Gefahr, dass es nicht mehr funktioniert. Nur empfehlenswert, wenn Sie über interne PHP/JS-Kenntnisse verfügen.

Option 3: Spezielles Einschubmodul

Ein Modul, das alle AJAX-Muster (Slide-in-Panel, mobile Steuerelemente, Leiste für kostenlosen Versand, Cross-Selling) in einer einzigen Installation bereitstellt. Sliding Cart Block ist unser Modul in dieser Kategorie – AJAX-basiert, kompatibel mit PS 1.7 und 8.x, funktioniert mit den meisten Themes, ohne dass Anpassungen am Theme erforderlich sind.

Der SEO-Mythos: Beeinträchtigt ein AJAX-Warenkorb das Ranking?

Eine immer wiederkehrende Sorge: “Wenn der Warenkorb JavaScript verwendet, kann Google ihn nicht erkennen, und meine Website wird schlechter gerankt.” Das ist falsch und ist schon seit etwa 2015 falsch.

Fakten:

  • Google rendert JavaScript während des Crawlings (Googlebot nutzt seit 2019 eine aktuelle Chromium-Engine)
  • Die Warenkorbseite selbst ist in der Regel noindex oder vom Crawling ausgeschlossen – das Ranking hängt nicht davon ab
  • Für die Suchmaschinenoptimierung (SEO) sind Produkt- und Kategorieseiten entscheidend, nicht der Warenkorb
  • Strukturierte Daten nach Schema.org (Produkt, Angebot, FAQ) sind völlig unabhängig von der Umsetzung des Warenkorbs.

Was könnte Negative Auswirkungen auf das Ranking: Langsames JavaScript, das die Core Web Vitals beeinträchtigt. Ein schlecht implementierter AJAX-Warenkorb, der den Hauptthread während des Seitenaufbaus blockiert, kann sich negativ auf die LCP- und INP-Werte auswirken. Ein gut implementierter Warenkorb (mit verzögertem Laden, aufgeschobenem Ausführen und modularem Aufbau) hat jedoch keine negativen Auswirkungen auf das SEO – und verbessert oft sogar die Rankings, indem er die Verweildauer erhöht, die Absprungrate senkt und die Konversionssignale steigert.

Der gesamte SEO-Kontext für PrestaShop-Warenkörbe wird behandelt in Der Leitfaden von PrestaShop zum Thema abgebrochene Warenkörbe.

Häufig gestellte Fragen

Funktioniert der standardmäßige AJAX-Warenkorb von PrestaShop einwandfrei?

Es funktioniert, allerdings nur in sehr begrenztem Umfang. Es aktualisiert die Anzahl der Artikel im Warenkorb und ermöglicht das Hinzufügen zum Warenkorb ohne Seitenneuladen. Es enthält weder ein ausklappbares Fenster noch eine Leiste für kostenlosen Versand, einen Cross-Selling-Block oder für Mobilgeräte optimierte Mengenauswahlfelder. In den meisten Shops wird es durch ein spezielles Warenkorb-Modul ersetzt oder ergänzt.

Wird ein AJAX-Warenkorb mein benutzerdefiniertes Theme beeinträchtigen?

Das hängt davon ab, wie Sie es einbinden. Änderungen auf Theme-Ebene können bei Theme-Updates zu Fehlfunktionen führen. AJAX-Warenkörbe auf Modulebene (wie beispielsweise ein Slide-in-Warenkorb-Modul) werden über hooks eingebunden und erfordern keine Änderungen am Theme – Updates des Themes haben keine Auswirkungen auf sie, und Updates des Moduls erfordern keine Änderungen am Theme.

Um wie viel schneller ist der AJAX-Warenkorb in konkreten Zahlen?

Durchschnittlicher Vorgang zur Aktualisierung des Warenkorbs auf PrestaShop:

  • Neuladen der Seite: 800–2500 ms (abhängig vom Server und der Größe des Themes)
  • AJAX: 150–400 ms

Das ist pro Vorgang 5- bis 10-mal schneller. Multipliziert man dies mit 3 bis 5 Warenkorb-Anpassungen pro Sitzung, ergibt sich ein erheblicher kumulativer Unterschied.

Ist der AJAX-Warenkorb für Screenreader zugänglich?

Ja, sofern dies mit ARIA-Live-Regionen umgesetzt wird. Bei einer Aktualisierung des Warenkorbs sollte die Meldung “Artikel zum Warenkorb hinzugefügt” über aria-live="polite". Gute Warenkorb-Module enthalten diese Funktion; bei selbst erstellten Theme-Implementierungen fehlt sie oft.

Kann ich mit AJAX trotzdem eine vollständige Warenkorbseite anzeigen?

Ja – bei den meisten AJAX-Warenkorb-Implementierungen bleibt die vollständige Warenkorbseite als sekundäre Option erhalten (aufrufbar über den Link “Warenkorb anzeigen”). Der Slide-in-Effekt ist der Standardablauf; die vollständige Seite ist für Nutzer gedacht, die vor dem Bezahlvorgang noch einmal alles überprüfen möchten. Beide Varianten existieren nebeneinander.

Fazit

Für jeden PrestaShop-Shop mit nennenswertem mobilen Traffic (derzeit 70%+ Shops) ist der AJAX-Warenkorb ein absolutes Muss. Die erwartete Steigerung der Konversionsrate um 9–13% macht die Implementierungskosten innerhalb weniger Wochen wieder wett – und zwar bei jedem Shop, der einen monatlichen Umsatz von 5.000 € oder mehr erzielt.

Der einfachste Einstieg: ein spezielles Einschubmodul das AJAX, kostenlosen Versand, mobile Layouts und Cross-Selling in einer einzigen Installation abdeckt, ohne dass Sie Ihr Theme anpassen müssen.