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

> Het Aftersell Cart Header-blok: de titel, het aantal artikelen, het logo en de sluitknop vastgezet bovenaan de drawer.

> Het **Header**-blok is het vastgezette bovenste gedeelte van de cart drawer, dat de drawer een duidelijke titel en een voor de hand liggende manier om te sluiten geeft. Je bepaalt de lay-out door **Title**, **Logo** en **Close button** toe te wijzen aan de linker- en rechtersectie. Omdat de Header bovenaan is vastgezet, blijft hij zichtbaar terwijl de rest van de winkelwagen scrolt.

<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-blok met winkelwagentitel, aantal artikelen en sluitknop bovenaan de drawer" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

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

* De Header is vastgezet bovenaan de drawer en scrolt niet mee met de winkelwagenbody.
* De sluitknop is altijd beschikbaar en sluit de drawer.

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

| Instelling | Wat het regelt                                                                                                                                                                                                                                           | Standaard                    |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**   | Welke elementen in de linkersectie worden weergegeven (`Title`, `Logo`, `Close button`) en in welke volgorde.                                                                                                                                            | `Title`                      |
| **Right**  | Welke elementen in de rechtersectie worden weergegeven (`Title`, `Logo`, `Close button`) en in welke volgorde.                                                                                                                                           | `Close button`               |
| **Title**  | Kop met opgemaakte tekst voor de winkelwagen. Ondersteunt de tokens `{{cart_item_count}}` en `{{total_price}}`.                                                                                                                                          | `Cart • {{cart_item_count}}` |
| **Image**  | Een afbeelding die aan een aangepaste template wordt doorgegeven als `props.logoUrl`. Dit veld verschijnt alleen wanneer een aangepaste template actief is, en de ingebouwde header rendert het nooit. Ondersteunde formaten: WebP, JPEG, PNG, GIF, SVG. | Geen                         |

De titel is vertaalbaar. Als je titel leeg uitvalt (bijvoorbeeld door een niet-ingestelde vertaling), valt de winkelwagen terug op het tonen van **Cart**, zodat de header nooit leeg is.

Elementen verschijnen in de volgorde waarin je ze selecteert, van links naar rechts, en elk element kan tegelijkertijd aan slechts één sectie worden toegewezen.

<div id="placement-and-limits">
  ## Plaatsing en limieten
</div>

* **Regio:** alleen bovenkant.
* **Maximum:** 1 per winkelwagenstaat.
* **Staat:** gevulde en lege winkelwagen (elke staat heeft zijn eigen Header-instantie).
* Standaard toegevoegd aan nieuwe winkelwagens in beide staten. Niet vergrendeld, dus je kunt hem verwijderen of verbergen met de oog-schakelaar.

<div id="custom-template">
  ## Aangepaste template
</div>

Ondersteunt een [aangepaste template](/nl/aftersell/cart/custom-templates) via het tabblad Code, die de ingebouwde markup van dit blok vervangt door jouw JSX. Dit zijn de props die het ontvangt.

<Note>
  `logoUrl` is de enige prop zonder ingebouwd equivalent: de geüploade afbeelding van de Header wordt **alleen ooit gerenderd door een aangepaste template**. Als een merchant een logo heeft ingesteld en het niet zichtbaar is, is dit de reden.
</Note>

| Prop           | Type                                      | Waarvoor het dient                                                                                                                           |
| -------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`        | `string`                                  | De headertitel als gesaneerde HTML, met `{{cart_item_count}}` en `{{total_price}}` al ingevuld.                                              |
| `logoUrl`      | `string \| null`                          | De geüploade headerafbeelding. `null` wanneer de merchant er geen heeft ingesteld.                                                           |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Items geselecteerd voor de linkersectie, in renderingsvolgorde.                                                                              |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Items geselecteerd voor de rechtersectie, in renderingsvolgorde.                                                                             |
| `itemCount`    | `number`                                  | Artikelen in de winkelwagen, zoals de shopper het ziet.                                                                                      |
| `onClose`      | `() => void`                              | Sluit de drawer. Koppel het aan je sluitknop.                                                                                                |
| `isLoading`    | `boolean`                                 | Hier altijd `false`: het blok rendert zijn ingebouwde skeleton tijdens het laden en roept je template pas aan zodra de winkelwagen klaar is. |

<Warning>
  Als je `onClose` nergens aan koppelt, kunnen shoppers de drawer nog steeds sluiten door op de overlay te klikken of op Escape te drukken, maar je header heeft dan geen sluitknop. Neem er altijd een op.
</Warning>

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

Style dit blok via de sectie **Design** in het instellingenpaneel. Dit zijn overrides per blok die bovenop je globale design komen en erop terugvallen wanneer ze leeg zijn.

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

De sectie **Text** in Design regelt de typografie van de winkelwagentitel. Vet en tekstkleur stel je in de Rich Text Editor hierboven in (op het tabblad Settings), niet hier.

| Instelling         | Wat het regelt               | Standaard            |
| ------------------ | ---------------------------- | -------------------- |
| **Font**           | Font family voor de titel.   | Neemt over van thema |
| **Size**           | Lettergrootte.               | `18px`               |
| **Line height**    | Regelhoogtevermenigvuldiger. | `1.3`                |
| **Letter spacing** | Tracking tussen letters.     | Normal               |

Wat zijn design-instellingen? Lees er hier meer over: [Design-instellingen](/nl/aftersell/cart/design-settings).