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

# Checkout-knop-blok

> Het Checkout-knop-blok van de Aftersell Cart: de verplichte footer-CTA die shoppers naar de checkout stuurt.

> Het **Checkout button**-blok is de primaire call-to-action in de cart-footer die shoppers naar de checkout brengt en hun een duidelijk, prominent pad van de cart naar de checkout geeft. Het is een verplicht blok.

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

* De knop bepaalt een **gelokaliseerde, marktcorrecte checkout-URL**, zodat shoppers in de checkout van de juiste markt terechtkomen. Als die niet bepaald kan worden, valt hij terug op de standaard `/checkout`-link.
* Met **Go to cart page instead of checkout** ingeschakeld linkt de knop in plaats daarvan naar `/cart`.
* Klikken navigeert via JavaScript zodat de eigen cart-afhandeling van een thema het niet kan onderscheppen, terwijl intenties voor een nieuw tabblad (Cmd/Ctrl-klik, middelklik) worden gerespecteerd.
* De klik verstuurt het SDK-[`checkout`-event](/nl/aftersell/cart/sdk-events), waarop je je kunt abonneren.

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

| Instelling                              | Wat het regelt                                                                      | Standaard                    |
| --------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | Platte-tekstlabel ingevoerd in een tekstveld. Ondersteunt `{{total_price}}`.        | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Stuurt shoppers naar je `/cart`-pagina in plaats van rechtstreeks naar de checkout. | Uit                          |

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

* **Regio:** onder.
* **Maximum:** 1 per cart-status.
* **Status:** alleen gevulde cart.
* **Vergrendeld en standaard toegevoegd.** De Checkout-knop kan niet worden verwijderd of verborgen, alleen verplaatst binnen de footer.

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

| Prop        | Type                  | Waarvoor het dient                                                                                                                      |
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | Het knoplabel als gesaneerde HTML, met `{{total_price}}` ingevuld.                                                                      |
| `href`      | `string \| undefined` | De checkout-URL. `undefined` in de editorvoorvertoning, waar er niets is om naartoe te navigeren.                                       |
| `isLoading` | `boolean`             | Hier altijd `false`: het blok rendert zijn ingebouwde skeleton tijdens het laden en roept jouw template pas aan zodra de cart klaar is. |

<Warning>
  **Een aangepaste checkout-knop verliest checkout-tracking.** De ingebouwde knop koppelt een klik-handler die het SDK-[`checkout`-event](/nl/aftersell/cart/sdk-events#checkout) verstuurt en de conversie registreert voor [cart-analytics](/nl/aftersell/cart/analytics). Die handler wordt niet doorgegeven aan aangepaste templates, dus navigeren via alleen `href` slaat beide over.

  Als je het event nodig hebt, verstuur het dan zelf vanuit een `onClick` vóór de navigatie. Attributierapportage kan op deze manier nog steeds niet worden hersteld, dus geef de voorkeur aan het herstylen van de ingebouwde knop met [designinstellingen](/nl/aftersell/cart/design-settings) of [aangepaste CSS](/nl/aftersell/cart/custom-css), tenzij je echt andere markup nodig hebt.
</Warning>

Render `href` zoals het is in plaats van er een standaardwaarde aan te geven. Een `<a>` zonder `href` is inert, wat in de editor het juiste gedrag is.

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

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

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