Was ist ein Cart Drawer?

Ein Cart Drawer ist ein Panel, das über der aktuellen Seite eingeblendet wird und den Inhalt des Warenkorbs zeigt, ohne auf eine eigene Warenkorbseite zu wechseln. Geöffnet wird es über das Warenkorb-Symbol in der Kopfzeile und meist auch automatisch nach dem Hinzufügen eines Artikels. Das Panel listet Positionen, Mengen und Gesamtsumme, häufig ergänzt um Fortschrittsanzeigen wie eine Schwelle für versandkostenfreie Lieferung, und enthält eine primäre Aktion in Richtung Checkout. Auf mobil ausgerichteten Storefronts ist es das übliche Warenkorb-Muster.

Definition

Ein Cart Drawer ist ein Darstellungsmuster, kein eigenes Warenkorbsystem. Der zugrunde liegende Warenkorbzustand bleibt identisch, ob er im Panel, auf einer eigenen Warenkorbseite oder in einem Dropdown-Mini-Warenkorb gerendert wird. Varianten unterscheiden sich im Auslöser, in der Frage, ob das Panel nach dem Hinzufügen automatisch öffnet, und im Umfang sekundärer Inhalte wie Gutscheinfeld, Empfehlungen oder Versandschätzung. Die Anforderungen an Barrierefreiheit sind streng: Das Panel ist eine modale Fläche, der Fokus muss hineinwandern, die Escape-Taste muss schließen, der Hintergrund darf nicht scrollen. Häufigster Fehler ist eine Überfrachtung mit Angeboten, weil sie den Weg zum Checkout verzögert.

Warum es zählt

In einer entkoppelten Storefront liegt der Warenkorb hinter einer Commerce-API und wird über eine Warenkorb-Kennung in der Browsersitzung angesprochen. Das Panel greift auf einen gemeinsamen clientseitigen Warenkorbzustand zu, sodass jede Komponente, die den Warenkorb verändert, etwa eine Produktkachel, ein Mengenwähler oder ein Bundle-Modul, genau ein Update und ein Neuzeichnen auslöst. Die umgebende Seite kann statisch gerendert und am Edge gecacht werden, während der Warenkorb zur Laufzeit separat geladen wird. So bleiben kundenspezifische Daten aus dem gecachten Dokument heraus. Optimistische Updates halten das Panel reaktionsschnell, maßgeblich für Preis, Bestand und Aktionen bleibt die Serverantwort.

Anwendungsfälle

Auf der Produktdetailseite öffnet das Panel nach dem Hinzufügen und bestätigt den Artikel, ohne die Seite zu verlassen, was Sitzungen mit mehreren Artikeln unterstützt. In Listenansichten lassen sich Produkte auf gleiche Weise nacheinander hinzufügen. Im Panel können ein Fortschrittsbalken zur Versandschwelle, ein kompakter Upgrade-Vorschlag oder ein Gutscheinfeld platziert werden, solange die Checkout-Schaltfläche das auffälligste Element bleibt. Auf kleinen Bildschirmen nimmt das Panel in der Regel die volle Höhe des Sichtfensters ein, mit Summe und primärer Aktion fixiert am unteren Rand. Ein zusätzlicher Verweis auf die vollständige Warenkorbseite bleibt sinnvoll, sobald viele Positionen oder Bearbeitungsschritte anfallen.

Verwandt

Mehr dazu: Cart Abandonment · Checkout Optimization.