> ## 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.

# Header-Block

> Der Header-Block des Aftersell Cart: Titel, Artikelanzahl, Logo und Schließen-Element, fixiert am oberen Rand des Drawers.

> 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.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="Header-Block mit Warenkorb-Titel, Artikelanzahl und Schließen-Element am oberen Rand des Drawers" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

<div id="behavior">
  ## Verhalten
</div>

* 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.

<div id="settings">
  ## Einstellungen
</div>

| Einstellung | Was sie steuert                                                                                                                                                                                                                                                      | Standard                     |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**    | Welche Elemente im linken Bereich gerendert werden (`Title`, `Logo`, `Close button`) und in welcher Reihenfolge.                                                                                                                                                     | `Title`                      |
| **Right**   | Welche Elemente im rechten Bereich gerendert werden (`Title`, `Logo`, `Close button`) und in welcher Reihenfolge.                                                                                                                                                    | `Close button`               |
| **Title**   | Rich-Text-Überschrift für den Warenkorb. Unterstützt die Tokens `{{cart_item_count}}` und `{{total_price}}`.                                                                                                                                                         | `Cart • {{cart_item_count}}` |
| **Image**   | Ein Bild, das einem benutzerdefinierten Template als `props.logoUrl` bereitgestellt wird. Dieses Feld erscheint nur, während ein benutzerdefiniertes Template aktiv ist, und der integrierte Header rendert es nie. Unterstützte Formate: WebP, JPEG, PNG, GIF, SVG. | Keins                        |

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.

<div id="placement-and-limits">
  ## Platzierung und Limits
</div>

* **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.

<div id="custom-template">
  ## Benutzerdefiniertes Template
</div>

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.

<Note>
  `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.
</Note>

| Prop           | Typ                                       | Wofür sie ist                                                                                                                                       |
| -------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`        | `string`                                  | Der Header-Titel als bereinigtes HTML, mit bereits aufgelösten `{{cart_item_count}}` und `{{total_price}}`.                                         |
| `logoUrl`      | `string \| null`                          | Das hochgeladene Header-Bild. `null`, wenn der Händler keins gesetzt hat.                                                                           |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Für den linken Bereich ausgewählte Elemente, in Render-Reihenfolge.                                                                                 |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Für den rechten Bereich ausgewählte Elemente, in Render-Reihenfolge.                                                                                |
| `itemCount`    | `number`                                  | Artikel im Warenkorb, wie sie der Käufer sieht.                                                                                                     |
| `onClose`      | `() => void`                              | Schließt den Drawer. Verdrahte sie mit deinem Schließen-Element.                                                                                    |
| `isLoading`    | `boolean`                                 | Hier immer `false`: Der Block rendert sein integriertes Skeleton während des Ladens und ruft dein Template erst auf, wenn der Warenkorb bereit ist. |

<Warning>
  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.
</Warning>

<div id="design">
  ## Design
</div>

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.

<div id="text">
  ### Text
</div>

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.

| Einstellung        | Was sie steuert                   | Standard       |
| ------------------ | --------------------------------- | -------------- |
| **Font**           | Schriftfamilie für den Titel.     | Erbt vom Theme |
| **Size**           | Schriftgröße.                     | `18px`         |
| **Line height**    | Multiplikator für die Zeilenhöhe. | `1.3`          |
| **Letter spacing** | Zeichenabstand.                   | Normal         |

Was sind Design-Einstellungen? Erfahre mehr hier: [Design-Einstellungen](/de/aftersell/cart/design-settings).