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

# Custom code-blokken

> Het Custom code-blok van de Aftersell Cart: voeg je eigen HTML of React overal in de drawer toe, ook binnen Cart items.

> Het **Custom code**-blok voegt je eigen HTML of React toe aan de cart. Plaats het in elke sectie van de drawer, of nestel het binnen [**Cart items**](/nl/aftersell/cart/cart-items-block) als sub-blok zodat het per regel wordt herhaald. In tegenstelling tot andere blokken heeft het geen Content-instellingen en geen Design-sectie: het blok *is* de code, dus je werkt volledig in het tabblad **Code**.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-custom-code-block-add-and-enable.gif?s=6717cc64a8765b0c06b65990f99e12ff" alt="Geanimeerde voorvertoning van het toevoegen en inschakelen van een Custom code-blok in de Aftersell Cart-editor" title="Geanimeerde voorvertoning van het toevoegen en inschakelen van een Custom code-blok in de Aftersell Cart-editor" width="1200" height="558" data-path="images/aftersell/cart-custom-code-block-add-and-enable.gif" />
</Frame>

<div id="add-and-turn-on-a-custom-code-block">
  ## Een Custom code-blok toevoegen en inschakelen
</div>

1. Voeg een **Custom code**-blok toe aan een sectie, of als sub-blok onder **Cart items**.
2. Selecteer het en open het tabblad **Code**.
3. Kies **HTML** of **React component**. Nieuwe blokken staan standaard op HTML.
4. Schrijf je code.
5. Als je React hebt gekozen, klik op <span style={{display:'inline-flex',alignItems:'center',gap:'4px',background:'#1C1C1C',color:'#fff',border:'1px solid #0A0A0A',borderRadius:'4px',padding:'0 6px',fontSize:'0.85em',fontWeight:500,lineHeight:'1.4em',verticalAlign:'middle'}}><svg width="8" height="9" viewBox="0 0 10 12" fill="none" aria-hidden="true" style={{display:'block'}}><path d="M1.5 1.2v9.6L8.8 6 1.5 1.2Z" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round" /></svg>Compile</span>.
6. Zet **"Use custom template"** aan. Voor dit blok betekent die schakelaar "toon mijn aangepaste code", en hij staat standaard uit, dus er wordt niets gerenderd totdat je hem inschakelt.
7. Houd de oog-schakelaar in de zijbalk aan zodat het blok zichtbaar blijft voor shoppers.

Zowel de oog-schakelaar als **"Use custom template"** moeten aanstaan om het blok te laten verschijnen.

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

* Het blok rendert niets totdat de cart is geladen.
* Het rendert ook niets wanneer het oog in de zijbalk uitstaat, **"Use custom template"** uitstaat, de code leeg is, of React niet compileert of rendert. Omdat een fout stil is, controleer je blok in de [voorvertoning](/nl/aftersell/cart/previewing-carts) voordat je publiceert.

<div id="html-mode">
  ## HTML-modus
</div>

De HTML-modus vervangt een kleine set tokens in je markup. Deze is bedoeld voor statische of token-gedreven content, niet voor het uitvoeren van logica.

* **Inline `<script>`-tags worden niet uitgevoerd**, en de HTML-modus heeft **geen toegang tot de SDK of `window`.**
* Gebruik voor logica de [**React-modus**](#react-mode) of [Aangepaste scripts](/nl/aftersell/cart/custom-scripts) met de [Cart SDK](/nl/aftersell/cart/sdk-overview).

<div id="tokens">
  ### Tokens
</div>

Tokenwaarden zijn **geformatteerde strings** (het geldformaat van de winkel, een percentage met `%`, of een aantal), klaar om in markup te plaatsen:

| Token                    | Wat het toont                                                           |
| ------------------------ | ----------------------------------------------------------------------- |
| `{{pre_cart_total}}`     | Carttotaal vóór kortingen.                                              |
| `{{post_cart_total}}`    | Carttotaal na kortingen.                                                |
| `{{savings_amount}}`     | Bespaard bedrag (totaal vóór korting minus totaal na korting).          |
| `{{savings_percentage}}` | Besparing als percentage, inclusief het `%`-teken (bijvoorbeeld `15%`). |
| `{{cart_quantity}}`      | Aantal zichtbare items in de cart.                                      |

<div id="example">
  ### Voorbeeld
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>
```

<div id="react-mode">
  ## React-modus
</div>

De React-modus compileert een component en geeft die cartgegevens plus een `add-to-cart`-actie mee.

* De editor vergrendelt de wrapper op `function CustomCode(props: CustomCodeProps) { … }`, en je bewerkt alleen de body tussen die regels.
* Je moet op <span style={{display:'inline-flex',alignItems:'center',gap:'4px',background:'#1C1C1C',color:'#fff',border:'1px solid #0A0A0A',borderRadius:'4px',padding:'0 6px',fontSize:'0.85em',fontWeight:500,lineHeight:'1.4em',verticalAlign:'middle'}}><svg width="8" height="9" viewBox="0 0 10 12" fill="none" aria-hidden="true" style={{display:'block'}}><path d="M1.5 1.2v9.6L8.8 6 1.5 1.2Z" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round" /></svg>Compile</span> klikken en daarna **"Use custom template"** inschakelen voordat het blok wordt getoond.
* Je component kan `useState`, `useEffect`, `useMemo`, `useRef` en `useCallback` gebruiken.
* In tegenstelling tot de HTML-modus draait React in de paginacontext, dus het kan `window` en de [Cart SDK](/nl/aftersell/cart/sdk-overview) aanroepen wanneer die beschikbaar zijn.
* Als je component tijdens runtime fouten gooit, rendert het blok niets en blijft de rest van de cart werken.

<div id="props">
  ### Props
</div>

Totalen en besparingsbedragen zijn gehele getallen in de [minor unit](/nl/aftersell/cart/sdk-actions#formatmoneycents) van de valuta (centen voor USD), dus `$12.50` is `1250`, niet `12.50`. Het zijn geen geformatteerde geldstrings zoals de HTML-tokens.

| Prop                                            | Type                        | Beschrijving                                                                                                                                          |
| ----------------------------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `cart`                                          | `AftersellCart`             | De huidige cart. Zie de [cartobject-referentie](/nl/aftersell/cart/sdk-cart-object).                                                                  |
| `line`                                          | `AftersellCartLine \| null` | Alleen ingesteld wanneer het blok een Cart items-sub-blok is (één render per regel); `null` in een sectie.                                            |
| `preCartTotal`                                  | `number`                    | Het carttotaal **vóór kortingen** (Shopify's `original_total_price`), in de minor unit van de valuta (bijv. centen).                                  |
| `postCartTotal`                                 | `number`                    | Het carttotaal **na kortingen**, in de minor unit van de valuta.                                                                                      |
| `savings`                                       | `{ amount, percentage }`    | Besparingsbedrag en -percentage.                                                                                                                      |
| `addProduct(variantId, quantity?, properties?)` | `function`                  | Voegt een product toe aan de cart, gemarkeerd met de attributie van dit blok zodat [analytics](/nl/aftersell/cart/analytics) het kunnen toeschrijven. |

<div id="the-cart-and-line-shapes">
  ### De vorm van cart en line
</div>

`cart` en `line` zijn dezelfde objecten die de SDK overal elders blootstelt, dus ze zijn één keer gedocumenteerd in de **[cartobject-referentie](/nl/aftersell/cart/sdk-cart-object)**: elk veld op de cart, op een regel en op een bundel.

De velden die je het meest zult gebruiken: `cart.items`, `cart.itemCount`, `cart.totalPrice`, `line.title`, `line.quantity`, `line.finalLinePrice`.

Drie dingen die specifiek zijn voor dit blok:

* **`line` is alleen ingesteld op een Cart items-sub-blok**, waar je component één keer per regel rendert. Geplaatst als sectie is `line` `null` en lees je in plaats daarvan `cart.items`.
* **Bundelkinderen staan niet in `cart.items`.** Wanneer regels [tot een bundel zijn gegroepeerd](/nl/aftersell/cart/sdk-use-case-bundles), verschijnt alleen de ankerregel; de kinderen staan op `line.bundle.children`.
* **Regels die door een [line transform](/nl/aftersell/cart/sdk-hooks#registerlinetransform) zijn verborgen, staan er ook niet in**, hoewel ze nog steeds meetellen in `cart.totalPrice`.

<div id="examples">
  ### Voorbeelden
</div>

Toon het aantal items:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}
```

Gebruik als Cart items-sub-blok `props.line` voor content per product. Het blok rendert één keer per regel, gemarkeerd met het product en de variant van die regel:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}
```

<div id="reading-enrichment-metadata">
  ### Verrijkingsmetadata lezen
</div>

Elk item in `cart.items` heeft een `metadata`-veld: een leeg object `{}` totdat een [cart enricher](/nl/aftersell/cart/sdk-hooks#registercartenricher) het vult. Eenmaal gevuld is het geïndexeerd op de `id` van de enricher en bevat het de Storefront-gegevens voor het product of de variant van die regel:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}
```

`metadata` is altijd aanwezig en staat standaard op een leeg object `{}` totdat de asynchrone fetch van de enricher is voltooid (de test voor "nog niet verrijkt" is `Object.keys(item.metadata).length === 0`). Gebruik optional chaining (`item.metadata?.enricherId`) bij het lezen van de sleutel van een specifieke enricher, omdat die sleutel afwezig is totdat de verrijking is geland.

<div id="reading-discount-codes-and-line-discounts">
  ### Kortingscodes en regelkortingen lezen
</div>

`cart.discountCodes` bevat de kortingscodes die op de cart zijn toegepast, en de `discountAllocations` van elke regel bevatten de kortingen die op die specifieke regel zijn toegepast:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}
```

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

* **Regio:** overal (boven, midden of onder). Ook beschikbaar als Cart items-sub-blok.
* **Maximum:** onbeperkt.
* **Status:** gevulde en lege cart (als sectieblok). Als Cart items-sub-blok rendert het alleen wanneer de cart regels heeft, één instantie per regel.
* Niet vergrendeld, dus je kunt het verwijderen of verbergen.
* Er is geen Design-sectie per blok. Style via je eigen markup, [**Aangepaste CSS**](/nl/aftersell/cart/custom-css) en je globale [**Designinstellingen**](/nl/aftersell/cart/design-settings).

<div id="when-to-use-custom-code-block-vs-custom-template-vs-custom-script">
  ## Wanneer gebruik je een custom code-blok versus een aangepaste template versus een aangepast script
</div>

|                                                                | Wat het doet                                                                               | Wanneer te gebruiken                                                   | Voorbeeld                                                                                                                                                                                         |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Custom code-blok**                                           | Voegt een *nieuw* blok met je eigen HTML of React toe.                                     | Iets wat de ingebouwde blokken niet dekken.                            | Een regel met geschat totaal die je vaste verzendtarief bij het carttotaal optelt, of een aftelklok voor de bezorgdeadline boven de checkout-knop.                                                |
| **[Aangepaste template](/nl/aftersell/cart/custom-templates)** | Vervangt de rendering van een *bestaand* blok door jouw JSX, met de gegevens van dat blok. | Het ingebouwde blok is bijna goed, maar je hebt andere markup nodig.   | Bouw de [Product-rij](/nl/aftersell/cart/cart-items-block#custom-template) opnieuw op zodat de variantnaam, besparingen en aantal-kiezer op één regel staan.                                      |
| **[Aangepast script](/nl/aftersell/cart/custom-scripts)**      | Voert JavaScript uit op de cart via de [Cart SDK](/nl/aftersell/cart/sdk-overview).        | Cart-brede logica, events en configuratie in plaats van drawer-markup. | Besteed \$75, krijg een gratis draagtas: [voeg het cadeau toe](/nl/aftersell/cart/sdk-use-case-free-gift) zodra de cart de drempel passeert, en haal het er weer uit als de shopper eronder zakt. |