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

# Kortingscode-blok

> Het Kortingscode-blok van de Aftersell Cart — laat shoppers vóór de checkout een kortingscode invoeren en toepassen.

> Het **Discount code**-blok is een invoerveld waar shoppers een promocode kunnen invoeren en toepassen in de cart, zodat ze de korting al zien voordat ze naar de checkout gaan.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-discount-code-block-input-apply.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=ac5730766b756fdf99c2fc9f65ac202b" alt="Kortingscode-blok met invoerveld en Apply-knop in de cart drawer" width="1314" height="230" data-path="images/aftersell/cart-discount-code-block-input-apply.png" />
</Frame>

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

* Bij toepassen wordt de code getrimd, in hoofdletters gezet en naar Shopify verzonden. Omdat Shopify het verzoek accepteert ongeacht of de code geldig is, controleert het blok daarna de cart opnieuw om te bevestigen dat de code daadwerkelijk is toegepast.
  * **Geldig** → het veld wordt leeggemaakt en de korting wordt toegepast.
  * **Ongeldig** → het blok toont "Invalid discount code."
* Hoe een code stapelt met andere kortingen (automatische kortingen, andere codes) wordt volledig door Shopify afgehandeld — het blok past de code alleen toe.
* Toegepaste codes worden getoond in het [**Summary**](/nl/aftersell/cart/summary-block)-blok, niet hier.

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

| Instelling      | Wat het regelt                                       | Standaard       |
| --------------- | ---------------------------------------------------- | --------------- |
| **Placeholder** | De placeholdertekst van het invoerveld. Vertaalbaar. | `Discount code` |
| **Button text** | Het label van de toepassen-knop. Vertaalbaar.        | `Apply`         |

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

* **Regio:** midden of onder.
* **Maximum:** 1 per cart-status — de gevulde cart en de lege cart hebben elk hun eigen limiet.
* **Status:** zowel gevuld als leeg.
* Niet standaard toegevoegd. Niet vergrendeld — je kunt het verwijderen of verbergen.

<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                                                                         |
| ---------------------- | ------------------------- | ------------------------------------------------------------------------------------------ |
| `discountCodeInput`    | `string`                  | Huidige waarde van het invoerveld.                                                         |
| `placeholder`          | `string`                  | Placeholder die in het lege invoerveld wordt getoond.                                      |
| `buttonText`           | `string`                  | Label voor de toepassen-knop.                                                              |
| `isValidating`         | `boolean`                 | `true` terwijl een ingediende code wordt gecontroleerd. Schakel je verzendknop hierop uit. |
| `isInvalid`            | `boolean`                 | `true` wanneer de laatst ingediende code is geweigerd.                                     |
| `setDiscountCodeInput` | `(value: string) => void` | Werkt de invoerwaarde bij.                                                                 |
| `handleSubmit`         | `(event: Event) => void`  | Verzendt de huidige code.                                                                  |
| `isLoading`            | `boolean`                 | `true` terwijl de cart nog met zijn eerste fetch bezig is.                                 |

<Warning>
  Koppel zowel `setDiscountCodeInput` als `handleSubmit`. Zonder de eerste kan er niet in het veld worden getypt; zonder de tweede wordt een code nooit toegepast.
</Warning>

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