> ## 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.
# Lege winkelwagen-blok
> Het Lege winkelwagen-blok — de content die wordt getoond wanneer een shopper geen artikelen heeft.
> Het **Lege winkelwagen**-blok is de content die wordt getoond wanneer de winkelwagen geen artikelen bevat, meestal een bericht en een knop om verder te winkelen, zodat een lege drawer toch nuttig en on-brand blijft. Het verschijnt alleen in de **lege staat** van de winkelwagen; andere blokken (zoals Header) kunnen er in diezelfde staat naast staan.
## Gedrag
* Het blok verschijnt alleen wanneer de winkelwagen leeg is. Zodra een shopper een artikel toevoegt, schakelt de winkelwagen over naar de gevulde staat en wordt dit blok vervangen door je lay-out voor een gevulde winkelwagen.
* In de editor is de CTA-link inactief, zodat je tijdens het ontwerpen niet wordt weggenavigeerd als je erop klikt.
## Instellingen
| Instelling | Wat het regelt | Standaard |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| **Empty cart text** | Het lege-staat-bericht. Opgemaakte tekst. | `Your cart is empty.` |
| **Button text** | Het knoplabel. Ondersteunt inline HTML-opmaak. | `Continue shopping` |
| **Button link** | Waar de knop naartoe linkt. | `/collections/all` |
| **Background color** | Achtergrondkleur voor het blok. Leeg laat het transparant, zodat de achtergrond van de winkelwagen zelf zichtbaar blijft. | `transparent` |
| **Alignment** | Hoe de tekst en de knop van het blok worden uitgelijnd — **Left** of **Center**. | Center |
| **Fit to height** | Of het blok de resterende hoogte van de winkelwagenbody vult en verticaal centreert, of op contenthoogte blijft — **Fill remaining height** of **Fit content**. | Fill remaining height |
## Plaatsing en limieten
* **Regio:** body.
* **Maximum:** 1 per winkelwagenstaat.
* **Staat:** alleen lege winkelwagen. Dit blok verschijnt niet in de gevulde staat. Nieuwe winkelwagens bevatten in de lege staat standaard ook een Header; zie [Hoe werken winkelwagens?](/nl/aftersell/cart/how-carts-work).
* Standaard toegevoegd aan nieuwe winkelwagens. Niet vergrendeld — je kunt het verwijderen of verbergen.
## Aangepaste template
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.
| Prop | Type | Waarvoor het dient |
| --------- | -------- | ---------------------------------------------------------------------------------------- |
| `text` | `string` | Het lege-winkelwagenbericht als gesaneerde HTML. |
| `cta` | `string` | Label van de call-to-action-knop, als platte tekst. |
| `ctaHtml` | `string` | Label van de call-to-action-knop als gesaneerde HTML — wat de ingebouwde markup rendert. |
| `href` | `string` | Waar de call-to-action naar verwijst. |
Dit blok wordt alleen gerenderd wanneer de winkelwagen leeg is, dus er zit geen cart-object in de props. Render `href` als een echte `` in plaats van een gescripte navigatie, en `text` met `dangerouslySetInnerHTML`, aangezien het al gesaneerde HTML is.
## Design
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.
### Text
De sectie **Text** in Design regelt de typografie van twee elementen. Gebruik de kiezer **Text element** om ertussen te wisselen.
**Message** — de tekst van het lege-staat-bericht. 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 het bericht. | Neemt over van thema |
| **Size** | Lettergrootte. | `18px` |
| **Line height** | Regelhoogtevermenigvuldiger. | `1.3` |
| **Letter spacing** | Tracking tussen letters. | Normal |
**Button label** — de tekst op de knop voor verder winkelen. Tekstkleur stel je in de sectie Button van Design in.
| Instelling | Wat het regelt | Standaard |
| ------------------ | ------------------------------------------------------- | -------------- |
| **Size** | Lettergrootte. | `15px` |
| **Weight** | Fontgewicht — Light, Regular, Medium, Semibold of Bold. | Semibold (600) |
| **Line height** | Regelhoogtevermenigvuldiger. | `1.47` |
| **Letter spacing** | Tracking tussen letters. | Normal |
### Knop
Met de sectie **Button** kun je de CTA-knop onafhankelijk van het globale knopdesign stylen. Gebruik de **Default / Hover**-schakelaar om tussen de twee staten te wisselen.
| Instelling | Staat | Wat het regelt |
| -------------------- | ------- | --------------------------------------------------------------------------------------------- |
| **Background color** | Default | Knopvulling in de ruststaat. Valt terug op de globale achtergrondkleur van knoppen. |
| **Text color** | Default | Kleur van het knoplabel in de ruststaat. Valt terug op de globale tekstkleur van knoppen. |
| **Background color** | Hover | Knopvulling wanneer een klant eroverheen zweeft. Valt terug op de standaard achtergrondkleur. |
| **Text color** | Hover | Kleur van het knoplabel bij hover. Valt terug op de standaard tekstkleur. |
| **Border color** | — | Randkleur van de knop (beide staten). Valt terug op de globale randkleur van knoppen. |
| **Border radius** | — | Hoekafronding van de knop. Valt terug op de globale border radius van knoppen. |
Wat zijn design-instellingen? Lees er hier meer over: [Design-instellingen](/nl/aftersell/cart/design-settings).