Skip to main content
Der Empty cart-Block ist der Inhalt, der angezeigt wird, wenn der Warenkorb keine Artikel enthält — typischerweise eine Nachricht und ein Weiter-einkaufen-Button —, damit ein leerer Drawer trotzdem nützlich und markenkonform ist. Er erscheint nur im leeren Zustand des Warenkorbs; andere Blöcke (wie der Header) können in demselben Zustand neben ihm stehen.
Empty cart-Block mit einer Leerzustands-Nachricht und einem Weiter-einkaufen-Call-to-Action

​
Verhalten

  • Der Block erscheint nur, wenn der Warenkorb leer ist. Sobald ein Käufer einen Artikel hinzufügt, wechselt der Warenkorb in seinen gefüllten Zustand und dieser Block wird durch dein Layout für den gefüllten Warenkorb ersetzt.
  • Im Editor ist der CTA-Link inaktiv, damit ein Klick dich beim Designen nicht wegnavigiert.

​
Einstellungen

​
Platzierung und Limits

  • Region: Body.
  • Maximum: 1 pro Warenkorb-Zustand.
  • Zustand: nur leerer Warenkorb. Dieser Block erscheint nicht im gefüllten Zustand. Neue Warenkörbe enthalten im leeren Zustand standardmäßig auch einen Header; siehe Wie funktionieren Warenkörbe?.
  • Wird neuen Warenkörben standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.

​
Benutzerdefiniertes Template

Unterstützt ein benutzerdefiniertes Template über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Das sind die Props, die er erhält.
Dieser Block wird nur gerendert, wenn der Warenkorb leer ist, daher gibt es kein Cart-Objekt in den Props. Rendere href als echtes <a> statt einer per Script gesteuerten Navigation, und text mit dangerouslySetInnerHTML, da es bereits bereinigtes HTML ist.

​
Design

Style diesen Block über seinen Design-Abschnitt im Einstellungs-Panel. Das sind blockspezifische Overrides, die über deinem globalen Design liegen und darauf zurückfallen, wenn sie leer sind.

​
Text

Der Abschnitt Text in Design lässt dich die Typografie zweier Elemente steuern. Verwende den Text element-Picker, um zwischen ihnen zu wechseln. Message — der Text der Leerzustands-Nachricht. Fett und Textfarbe werden im Rich-Text-Editor darüber (im Settings-Tab) festgelegt, nicht hier. Button label — der Text auf dem Weiter-einkaufen-Button. Die Textfarbe wird im Button-Abschnitt von Design festgelegt.

​
Button

Der Button-Abschnitt lässt dich den CTA-Button unabhängig vom globalen Button-Design stylen. Verwende den Default / Hover-Umschalter, um zwischen den beiden Zuständen zu wechseln. Was sind Design-Einstellungen? Erfahre mehr hier: Design-Einstellungen.