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

# Product add-on-blok

> Het Aftersell Cart Product add-on-blok: bied één specifiek product aan als quick add in de drawer.

> Het **Product add-on**-blok biedt één specifiek product dat jij kiest aan als add-on in de winkelwagen, waarmee je één bekend product (een garantie, een sample, een bestseller) promoot als quick add direct in de winkelwagen.

<Info>
  Anders dan [**Upsells**](/nl/aftersell/cart/upsells-block), dat producten toont die door een strategie zijn gekozen, toont de Product add-on altijd exact het product dat jij kiest.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="Product add-on-blok dat een extra product aanbiedt dat de shopper aan de winkelwagen kan toevoegen" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

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

* **Als er geen live variant kan worden bepaald** — het product is niet ingesteld, gearchiveerd of niet op voorraad — rendert het blok **niets** in plaats van een dode knop.
* De bedieningsknop weerspiegelt of de add-on-regel van *dit blok zelf* in de winkelwagen zit, dus uitschakelen verwijdert de regel die het blok heeft toegevoegd (en heeft geen invloed op hetzelfde product dat elders is toegevoegd).
* Een vergelijkingsprijs (compare-at) wordt doorgestreept wanneer er een echte prijsverlaging is; het "% off"-label wordt verborgen als de korting afgerond onder de 1% uitkomt.
* De add-on-afbeelding valt terug op de uitgelichte afbeelding van het product wanneer de gekozen variant er geen heeft.

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

| Instelling       | Wat het regelt                                                                                               | Standaard                             |
| ---------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
| **Display type** | Hoe de toevoegknop verschijnt: **Toggle** of **Checkbox**.                                                   | Toggle                                |
| **Product**      | De productvariant die je aanbiedt — één kiezer dekt beide. Afbeelding en prijs komen van de gekozen variant. | Geen                                  |
| **Title**        | Kop met opgemaakte tekst.                                                                                    | `<strong>{{product_title}}</strong>`  |
| **Price label**  | De prijsregel.                                                                                               | `{{price}}`                           |
| **Description**  | Ondersteunende tekst.                                                                                        | `Add {{product_title}} to your order` |

**Title**, **Price label** en **Description** ondersteunen alle drie dezelfde vier tokens: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` en `{{savings}}`.

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

* **Regio:** body of onderkant.
* **Maximum:** 3 per winkelwagenstaat — de gevulde winkelwagen en de lege winkelwagen krijgen elk hun eigen limiet.
* **Staat:** zowel gevulde als lege winkelwagen.
* 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.

<div id="content">
  ### Content
</div>

| Prop                      | Type             | Waarvoor het dient                                                                                                          |
| ------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `addonTitle`              | `string`         | Titel als platte tekst. Gebruik het voor de alt-tekst en `aria-label`, en als fallback wanneer er geen opgemaakte titel is. |
| `addonTitleHtml`          | `string`         | Gesaneerde titel-HTML met opgemaakte tekst. Leeg wanneer er geen is.                                                        |
| `descriptionHtml`         | `string`         | Gesaneerde beschrijvings-HTML met opgemaakte tekst. Leeg wanneer er geen is.                                                |
| `formattedPrice`          | `string`         | Prijs-label in valutanotatie. Leeg wanneer niet getoond.                                                                    |
| `formattedCompareAtPrice` | `string`         | Geformatteerde compare-at-prijs (adviesprijs) van de variant. Leeg wanneer er geen echte besparing is.                      |
| `savings`                 | `string`         | Besparingslabel in hele procenten, bijvoorbeeld `25%`. Leeg wanneer er geen besparing is.                                   |
| `priceHtml`               | `string \| null` | Gesaneerde prijs-HTML met opgemaakte tekst uit het speciale prijsveld. `null` wanneer leeg.                                 |
| `ctaText`                 | `string`         | Knoplabel, voor het formaat `button`.                                                                                       |
| `imageUrl`                | `string`         | Productafbeelding. Leeg wanneer er geen is.                                                                                 |
| `productUrl`              | `string`         | URL van de productpagina. Leeg wanneer er geen is; link in dat geval de afbeelding en titel niet.                           |

<div id="state-and-actions">
  ### Staat en acties
</div>

| Prop           | Type                                 | Waarvoor het dient                                                                                                     |
| -------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| `variantId`    | `number \| null`                     | Opgeloste variant. `null` wanneer er geen live variant is, omdat het product niet is ingesteld of niet op voorraad is. |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | Hoe de koper de add-on toevoegt. Vertak je markup hierop.                                                              |
| `isEnabled`    | `boolean`                            | Of de add-on momenteel in de winkelwagen zit.                                                                          |
| `isAdding`     | `boolean`                            | `true` terwijl het toevoegen of verwijderen bezig is. Schakel je bedieningsknop hierop uit.                            |
| `handleAdd`    | `() => void`                         | Voegt de add-on toe. Voor het formaat `button`.                                                                        |
| `handleToggle` | `() => void`                         | Schakelt de add-on in en uit de winkelwagen. Voor `checkbox` en `toggle`.                                              |
| `isLoading`    | `boolean`                            | `true` terwijl de winkelwagen nog met zijn eerste fetch bezig is.                                                      |

<Warning>
  `format` bepaalt welke handler van toepassing is: `handleAdd` voor `button`, `handleToggle` voor `checkbox` en `toggle`. Een `variantId` van `null` betekent dat er niets is om toe te voegen, dus blokkeer je bedieningsknop daarop in plaats van een handler aan te roepen die niet kan slagen.
</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 drie elementen. Gebruik de kiezer **Text element** om ertussen te wisselen.

**Title** — de productnaam. Ondersteunt ook een aangepaste font family. 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.               | `15px`               |
| **Line height**    | Regelhoogtevermenigvuldiger. | `1.33`               |
| **Letter spacing** | Tracking tussen letters.     | Normal               |

**Price** — de prijsregel. Vet en tekstkleur stel je in de Rich Text Editor hierboven in.

| Instelling         | Wat het regelt               | Standaard |
| ------------------ | ---------------------------- | --------- |
| **Size**           | Lettergrootte.               | `15px`    |
| **Line height**    | Regelhoogtevermenigvuldiger. | `1.33`    |
| **Letter spacing** | Tracking tussen letters.     | Normal    |

**Description** — de ondersteunende tekst. Vet en tekstkleur stel je in de Rich Text Editor hierboven in.

| Instelling         | Wat het regelt               | Standaard |
| ------------------ | ---------------------------- | --------- |
| **Size**           | Lettergrootte.               | `14px`    |
| **Line height**    | Regelhoogtevermenigvuldiger. | `1.29`    |
| **Letter spacing** | Tracking tussen letters.     | Normal    |

<Tip>
  Als je in de winkelwagenvoorvertoning direct op een tekstelement klikt, wordt dat element gemarkeerd en worden de bedieningsopties automatisch in het paneel geopend.
</Tip>

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