Skip to main content
Der Header-Block ist der fixierte obere Bereich des Cart-Drawers und gibt dem Drawer einen klaren Titel sowie einen offensichtlichen Weg, ihn zu schließen. Du steuerst sein Layout, indem du Title, Logo und Close button dem linken und dem rechten Bereich zuweist. Da der Header oben fixiert ist, bleibt er sichtbar, während der Rest des Warenkorbs scrollt.
Header-Block mit Warenkorb-Titel, Artikelanzahl und Schließen-Element am oberen Rand des Drawers

​
Verhalten

  • Der Header ist am oberen Rand des Drawers fixiert und scrollt nicht mit dem Warenkorb-Body.
  • Das Schließen-Element ist immer verfügbar und schließt den Drawer.

​
Einstellungen

Der Titel ist übersetzbar. Wenn dein Titel leer aufgelöst wird (zum Beispiel bei einer nicht gesetzten Übersetzung), fällt der Warenkorb auf die Anzeige von Cart zurück, damit der Header nie leer ist. Elemente erscheinen in der Reihenfolge, in der du sie auswählst, von links nach rechts, und jedes Element kann jeweils nur einem Bereich zugewiesen werden.

​
Platzierung und Limits

  • Region: nur oben.
  • Maximum: 1 pro Warenkorb-Zustand.
  • Zustand: gefüllter und leerer Warenkorb (jeder Zustand hat seine eigene Header-Instanz).
  • Wird neuen Warenkörben standardmäßig in beiden Zuständen hinzugefügt. Nicht gesperrt — du kannst ihn also entfernen oder mit dem Augen-Toggle 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.
logoUrl ist die eine Prop ohne integriertes Gegenstück: Das hochgeladene Bild des Headers wird ausschließlich von einem benutzerdefinierten Template gerendert. Wenn ein Händler ein Logo gesetzt hat und es nicht angezeigt wird, ist das der Grund.
Wenn du onClose mit nichts verdrahtest, können Käufer den Drawer zwar weiterhin durch Klicken auf das Overlay oder Drücken von Escape schließen, aber dein Header hat keinen Schließen-Button. Baue immer einen ein.

​
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 des Warenkorb-Titels steuern. Fett und Textfarbe werden im Rich-Text-Editor darüber (im Settings-Tab) festgelegt, nicht hier. Was sind Design-Einstellungen? Erfahre mehr hier: Design-Einstellungen.