> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Empty cart-Block
> Der Empty cart-Block — der Inhalt, der angezeigt wird, wenn ein Käufer keine Artikel hat.
> 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.
## 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
| Einstellung | Was sie steuert | Standard |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text** | Die Leerzustands-Nachricht. Rich Text. | `Your cart is empty.` |
| **Button text** | Die Button-Beschriftung. Unterstützt Inline-HTML-Formatierung. | `Continue shopping` |
| **Button link** | Wohin der Button verlinkt. | `/collections/all` |
| **Background color** | Hintergrundfarbe für den Block. Leer lässt ihn transparent, sodass der eigene Hintergrund des Warenkorbs durchscheint. | `transparent` |
| **Alignment** | Wie Text und Button des Blocks ausgerichtet sind — **Left** oder **Center**. | Center |
| **Fit to height** | Ob der Block die verbleibende Höhe des Warenkorb-Bodys ausfüllt und vertikal zentriert, oder auf Inhaltshöhe sitzt — **Fill remaining height** oder **Fit content**. | Fill remaining height |
## 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?](/de/aftersell/cart/how-carts-work).
* Wird neuen Warenkörben standardmäßig hinzugefügt. Nicht gesperrt — du kannst ihn entfernen oder ausblenden.
## Benutzerdefiniertes Template
Unterstützt ein [benutzerdefiniertes Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Das sind die Props, die er erhält.
| Prop | Typ | Wofür sie ist |
| --------- | -------- | ---------------------------------------------------------------------------------------------------- |
| `text` | `string` | Die Leerer-Warenkorb-Nachricht als bereinigtes HTML. |
| `cta` | `string` | Beschriftung des Call-to-Action-Buttons, als reiner Text. |
| `ctaHtml` | `string` | Beschriftung des Call-to-Action-Buttons als bereinigtes HTML — das, was das Standard-Markup rendert. |
| `href` | `string` | Wohin der Call-to-Action zeigt. |
Dieser Block wird nur gerendert, wenn der Warenkorb leer ist, daher gibt es kein Cart-Objekt in den Props. Rendere `href` als echtes `` 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.
| Einstellung | Was sie steuert | Standard |
| ------------------ | --------------------------------- | -------------- |
| **Font** | Schriftfamilie für die Nachricht. | Erbt vom Theme |
| **Size** | Schriftgröße. | `18px` |
| **Line height** | Multiplikator für die Zeilenhöhe. | `1.3` |
| **Letter spacing** | Zeichenabstand. | Normal |
**Button label** — der Text auf dem Weiter-einkaufen-Button. Die Textfarbe wird im Button-Abschnitt von Design festgelegt.
| Einstellung | Was sie steuert | Standard |
| ------------------ | ----------------------------------------------------------- | -------------- |
| **Size** | Schriftgröße. | `15px` |
| **Weight** | Schriftstärke — Light, Regular, Medium, Semibold oder Bold. | Semibold (600) |
| **Line height** | Multiplikator für die Zeilenhöhe. | `1.47` |
| **Letter spacing** | Zeichenabstand. | Normal |
### 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.
| Einstellung | Zustand | Was sie steuert |
| -------------------- | ------- | ---------------------------------------------------------------------------------------------- |
| **Background color** | Default | Button-Füllung im Ruhezustand. Fällt auf die globale Button-Hintergrundfarbe zurück. |
| **Text color** | Default | Farbe der Button-Beschriftung im Ruhezustand. Fällt auf die globale Button-Textfarbe zurück. |
| **Background color** | Hover | Button-Füllung, wenn ein Kunde darüber hovert. Fällt auf die Standard-Hintergrundfarbe zurück. |
| **Text color** | Hover | Farbe der Button-Beschriftung beim Hovern. Fällt auf die Standard-Textfarbe zurück. |
| **Border color** | — | Farbe des Button-Rahmens (beide Zustände). Fällt auf die globale Button-Rahmenfarbe zurück. |
| **Border radius** | — | Eckenrundung für den Button. Fällt auf den globalen Button-Border-Radius zurück. |
Was sind Design-Einstellungen? Erfahre mehr hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).