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

# Cart items-blok

> Het Cart items-blok: de lijst met regelitems, de Product-rij en de host voor geneste sub-blokken.

> Het **Cart items**-blok is de lijst met regelitems in de cart, die elk product dat de shopper heeft toegevoegd rendert met afbeelding, titel, variant, prijs, aantal-stepper en verwijderknop. Het is een verplicht blok, en het is de container die de sub-blokken van de cart host (de **Product**-rij, [**Subscription upgrade**](/nl/aftersell/cart/subscription-upgrade-block) en [**Custom code**](/nl/aftersell/cart/custom-code-blocks)), en biedt de structuur waaraan sub-blokken per regel worden vastgemaakt.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-items-block-line-product-title-variant.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3c9f088b55cfd8450dcb8670dfe0728a" alt="Cart items-blok met regelitems met productafbeelding, titel, variant, prijs, aantal-stepper en verwijderknop" width="1420" height="486" data-path="images/aftersell/cart-items-block-line-product-title-variant.png" />
</Frame>

<div id="the-product-row">
  ## De Product-rij
</div>

Binnen Cart items zit het **Product**-sub-blok: de daadwerkelijke regelitemrij. Het is vergrendeld en wordt automatisch toegevoegd, dus elk Cart items-blok heeft altijd precies één Product-rij die je niet kunt verwijderen; je herschikt andere sub-blokken eromheen. De instellingen ervan bepalen hoe de prijzen van elke regel worden weergegeven:

| Instelling                                 | Wat het regelt                                                                                                                                                                                                                                                                                                                                       | Standaard                                       |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| **Strike-through price**                   | Welke prijs doorgestreept wordt getoond: **Compare-at or pre-discount, whichever is higher**, **Compare-at price**, **Pre-discount price** of **No strike-through**.                                                                                                                                                                                 | Compare-at or pre-discount, whichever is higher |
| **Strike-through price for subscriptions** | Dezelfde keuze voor abonnementsregels, met twee verschillen: een extra optie **Subscription compare-at price**, en **Compare-at price** heet hier **Product compare-at, then subscription compare-at**.                                                                                                                                              | Compare-at or pre-discount, whichever is higher |
| **Savings label**                          | Of besparingen worden getoond als **Amount**, **Percentage** of **Hidden**.                                                                                                                                                                                                                                                                          | Amount                                          |
| **Bundle price**                           | Hoe de weergegeven prijs wordt berekend voor bundelregels. **Automatic** toont het totaal van alle items in de bundel (of de prijs van het hoofditem wanneer de andere items gratis zijn). **Main item price only** toont alleen de prijs van het hoofditem (anker). Dit is alleen een weergavelabel — het carttotaal van Shopify is altijd leidend. | Automatic                                       |
| **Savings text**                           | Het besparingslabel. Ondersteunt het `{{value}}`-token.                                                                                                                                                                                                                                                                                              | `Save {{value}}`                                |

De rij zelf rendert de productafbeelding (met link naar de productpagina indien beschikbaar), titel, variant, prijs en een eventuele doorgestreepte compare-at-prijs, een aantal-stepper en een verwijderknop. Bundelregels tonen een uitklaplijst met hun onderdelen.

<div id="text-styling">
  ### Tekststijl
</div>

De Product-rij bevat een sectie **Text** in de Design-instellingen. Gebruik deze om de typografie van afzonderlijke tekstelementen in elk regelitem te bepalen. Selecteer een tekstelement uit de kiezer om de instellingen ervan aan te passen:

| Instelling         | Wat het regelt                                                                                                                                                                    |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color**     | Kleur van het geselecteerde tekstelement.                                                                                                                                         |
| **Font**           | **Theme font** (neemt het lettertype van je thema over) of **Custom font** (voer de naam in van een lettertype dat je thema al laadt). Alleen beschikbaar voor **Product title**. |
| **Size**           | Fontgrootte in pixels.                                                                                                                                                            |
| **Weight**         | Fontgewicht: Light, Regular, Medium, Semibold of Bold.                                                                                                                            |
| **Line height**    | Regelhoogte als vermenigvuldiger van de fontgrootte (bijvoorbeeld `1.4`).                                                                                                         |
| **Letter spacing** | Letterspatiëring in pixels. Negatieve waarden verkleinen de afstand.                                                                                                              |

De tekstelementen die je kunt stylen zijn gegroepeerd per categorie:

**Product**

* **Product title** — de productnaam op elke regel. Ondersteunt ook een aangepaste font family.
* **Variant** — het variantlabel (bijvoorbeeld *Size: Medium*).
* **Subscription plan** — het alleen-lezen planlabel dat op abonnementsregels wordt getoond.

**Pricing**

* **Price** — de huidige prijs van de regel.
* **Compare-at price** — de doorgestreepte oorspronkelijke prijs.
* **Savings** — het besparingslabel (bijvoorbeeld *Save \$5.00*). Alleen size en line height — bold en color worden ingesteld in de Rich Text Editor hierboven.

**Bundle**

* **Bundle toggle** — de uitklapkop die de onderdelenlijst van een bundel uitklapt.
* **Bundle item title** — de titel van elk onderdeel binnen een bundel.
* **Bundle item variant** — het variantlabel voor elk bundelonderdeel.

Een veld leeg laten behoudt de standaardwaarde van het element.

<Tip>
  Direct op een tekstelement in de cartpreview klikken markeert het en opent de bedieningen automatisch in het paneel.
</Tip>

<div id="discount-tags-design">
  ### Design van kortingstags
</div>

De Product-rij bevat een sectie **Discount tags** in de Design-instellingen. Gebruik deze om de kortingstag-pills te stylen die op elk regelitem verschijnen:

| Instelling           | Wat het regelt                         | Standaard |
| -------------------- | -------------------------------------- | --------- |
| **Background color** | Vulkleur van de kortingstag-pill.      | `#F1F1F1` |
| **Text color**       | Tekstkleur binnen de kortingstag-pill. | `#585858` |
| **Border radius**    | Hoekafronding van de kortingstag-pill. | `6px`     |

Deze instellingen gelden alleen voor kortingstags op regelitems in het Cart items-blok. Kortingscodetags in het [Summary-blok](/nl/aftersell/cart/summary-block) worden apart gestyled.

<div id="sub-blocks-and-how-they-position">
  ## Sub-blokken en hoe ze zich positioneren
</div>

Cart items is het enige blok dat sub-blokken host. **Sub-blokken renderen één keer per regel, binnen elke productrij**, gepositioneerd ten opzichte van de vastgezette Product-rij:

* Sub-blokken die **vóór** de Product-rij zijn geordend, verschijnen **boven** de productcontent in elke regel.
* Sub-blokken die **na** de Product-rij zijn geordend, verschijnen **onder** de productcontent in elke regel.

Een [Subscription upgrade](/nl/aftersell/cart/subscription-upgrade-block) die na de Product-rij is geplaatst, wordt dus onder elke in aanmerking komende regel getoond, niet één keer onderaan de hele lijst.

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

* Wanneer de cart geen items bevat, schakelt de drawer over naar de lege status en wordt dit blok niet getoond.
* **Er loopt één cartwijziging tegelijk.** Terwijl een aantal-update of verwijdering bezig is, zijn de bedieningen van de rij uitgeschakeld om de cart consistent te houden, en worden ze weer ingeschakeld zodra de wijziging is afgerond.
* Het aantal van een regel onder 1 verlagen verwijdert de regel. Een aantal dat de winkel weigert (bijvoorbeeld boven de beschikbare voorraad) wordt teruggezet naar de laatst geldige waarde.
* **Bundels wijzigen als één geheel.** Het aanpassen van het aantal op de ankerregel van een bundel schaalt de hele bundel in één bewerking — als een kind is opgenomen met 3 per anker, gaat dat kind van 3 naar 6 wanneer het anker van 1 naar 2 gaat. Het verwijderen van het anker verwijdert alle onderdelen van de bundel tegelijk.
* **Sommige bundels kunnen niet in aantal worden aangepast.** Als een van de kinderen van een bundel met een fractionele verhouding is opgenomen (bijvoorbeeld 1,5 per anker), is de aantal-stepper van die bundel vergrendeld: de +/−-knoppen en het aantalveld zijn beide uitgeschakeld, en getypte aantallen worden niet geaccepteerd. De bundel kan nog wel worden verwijderd.
* **Abonnementsregels tonen hun plan.** Wanneer een regel een selling plan heeft en het [Subscription upgrade](/nl/aftersell/cart/subscription-upgrade-block)-sub-blok is uitgeschakeld of niet toegevoegd, toont de Product-rij een alleen-lezen planlabel onder de variant — bijvoorbeeld *Delivers every month (save 30%)*. Wanneer dat sub-blok is ingeschakeld, presenteert het het plan in zijn eigen kiezer, zodat het alleen-lezen label wordt onderdrukt in plaats van gedupliceerd.

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

* **Regio:** midden.
* **Maximum:** 1 per cart-status.
* **Status:** alleen gevulde cart.
* **Vergrendeld en standaard toegevoegd.** Cart items kan niet worden verwijderd of verborgen, alleen verplaatst.

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

De **Cart items**-container heeft geen aangepaste template. De **Product**-rij erbinnen wel, en dat is het rijkste vlak in de cart: jouw template rendert één keer per regel.

<div id="line-content">
  ### Regelcontent
</div>

| Prop               | Type                        | Waarvoor het dient                                                                                                                                                                                                                        |
| ------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`            | `string`                    | Producttitel, als platte tekst.                                                                                                                                                                                                           |
| `variantTitle`     | `string \| null`            | Variantlabel. `null` bij producten met één variant en native bundels.                                                                                                                                                                     |
| `url`              | `string \| null`            | URL van de productpagina. `null` wanneer de regel niet moet doorlinken.                                                                                                                                                                   |
| `imageUrl`         | `string \| null`            | Afbeelding van de regel. `null` wanneer het product er geen heeft.                                                                                                                                                                        |
| `quantity`         | `number`                    | Huidig aantal op de regel.                                                                                                                                                                                                                |
| `price`            | `string`                    | Regelprijs, **al geformatteerd**.                                                                                                                                                                                                         |
| `compareAtPrice`   | `string \| null`            | De doorgestreepte "was"-prijs, al geformatteerd. `null` wanneer er niets door te strepen valt.                                                                                                                                            |
| `savingsHtml`      | `string \| null`            | Besparingslabel als gesaneerde HTML. `null` wanneer verborgen of wanneer er geen besparing is.                                                                                                                                            |
| `discountTags`     | `string[]`                  | Titels van kortingen op deze regel, bijv. `['Spring Sale']`. `[]` wanneer er geen zijn.                                                                                                                                                   |
| `sellingPlanLabel` | `string \| null`            | Alleen-lezen naam van het abonnementsplan. `null` wanneer het een eenmalige regel is, of wanneer het [Subscription upgrade](/nl/aftersell/cart/subscription-upgrade-block#custom-template)-sub-blok in plaats daarvan de plan-UI rendert. |
| `bundle`           | `object \| null`            | [Bundle](/nl/aftersell/cart/sdk-cart-object#bundles)-viewmodel op een ankerregel. Anders `null`.                                                                                                                                          |
| `productId`        | `number`                    | Shopify-product-ID.                                                                                                                                                                                                                       |
| `variantId`        | `number`                    | Shopify-variant-ID.                                                                                                                                                                                                                       |
| `line`             | `AftersellCartLine`         | De volledige [cartregel](/nl/aftersell/cart/sdk-cart-object#cart-lines), voor alles wat de bovenstaande props niet dekken.                                                                                                                |
| `formatMoney`      | `(cents: number) => string` | Formatteert een bedrag in minor units. Gebruik dit voor prijzen die je van `line` afleest.                                                                                                                                                |

<Warning>
  **`price` en `compareAtPrice` zijn geformatteerde strings; alles op `line` is in centen.** Reken niet met `price`. Bereken vanuit `line.finalLinePrice` en vergelijkbare velden, en haal het resultaat door `formatMoney`.
</Warning>

<div id="quantity-and-removal">
  ### Aantal en verwijderen
</div>

| Prop                | Type                                             | Waarvoor het dient                                                                                                                                                                                                                                                         |
| ------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `increment`         | `() => void`                                     | Voegt één toe aan de regel.                                                                                                                                                                                                                                                |
| `decrement`         | `() => void`                                     | Haalt één van de regel af.                                                                                                                                                                                                                                                 |
| `remove`            | `() => void`                                     | Verwijdert de regel volledig.                                                                                                                                                                                                                                              |
| `quantityInput`     | `string`                                         | Huidige waarde voor een gecontroleerd aantal-`<input>`. Een string, zodat tussentijdse typstatussen behouden blijven.                                                                                                                                                      |
| `onQuantityInput`   | `(event: Event) => void`                         | `onInput`-handler voor dat veld.                                                                                                                                                                                                                                           |
| `commitQuantity`    | `() => void`                                     | Past het getypte aantal toe. Koppel aan `onBlur`.                                                                                                                                                                                                                          |
| `onQuantityKeyDown` | `(event: KeyboardEvent) => void`                 | `onKeyDown`-handler, zodat Enter bevestigt.                                                                                                                                                                                                                                |
| `busy`              | `boolean`                                        | `true` terwijl er een cartmutatie bezig is. Schakel je bedieningen hierop uit.                                                                                                                                                                                             |
| `pending`           | `'increment' \| 'decrement' \| 'remove' \| null` | Welke actie op dit moment bezig is, voor een gerichte spinner.                                                                                                                                                                                                             |
| `stepperLocked`     | `boolean`                                        | `true` wanneer het aantal niet kan worden gewijzigd, omdat de regel een bundelanker is met een kind dat met een fractionele verhouding per anker is opgenomen. Verberg of schakel de stepper uit — de ingebouwde handlers weigeren wijzigingen al zolang dit is ingesteld. |

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  return (
    <div className="cart-external-cart-items__row" style={{ display: 'flex', gap: '12px', opacity: props.busy ? 0.6 : 1 }}>
      {props.imageUrl && <img src={props.imageUrl} alt="" width={64} height={64} />}

      <div style={{ flex: 1 }}>
        {props.url ? <a href={props.url}>{props.title}</a> : <span>{props.title}</span>}
        {props.variantTitle && <div style={{ opacity: 0.6 }}>{props.variantTitle}</div>}
        {props.sellingPlanLabel && <div style={{ opacity: 0.6 }}>{props.sellingPlanLabel}</div>}

        {props.discountTags.map((tag) => (
          <span key={tag} style={{ fontSize: '11px', border: '1px solid', borderRadius: '4px', padding: '1px 5px' }}>
            {tag}
          </span>
        ))}

        {!props.stepperLocked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
            <button type="button" onClick={props.decrement} disabled={props.busy}>&minus;</button>
            <input
              value={props.quantityInput}
              onInput={props.onQuantityInput}
              onBlur={props.commitQuantity}
              onKeyDown={props.onQuantityKeyDown}
              size={2}
            />
            <button type="button" onClick={props.increment} disabled={props.busy}>+</button>
            <button type="button" onClick={props.remove} disabled={props.busy}>
              {props.pending === 'remove' ? 'Removing…' : 'Remove'}
            </button>
          </div>
        )}
      </div>

      <div style={{ textAlign: 'right' }}>
        <div>{props.price}</div>
        {props.compareAtPrice && <s style={{ opacity: 0.5 }}>{props.compareAtPrice}</s>}
        {props.savingsHtml && <div dangerouslySetInnerHTML={{ __html: props.savingsHtml }} />}
      </div>
    </div>
  );
}
```

<div id="rendering-a-bundle">
  ### Een bundel renderen
</div>

Op de ankerregel van een bundel bevat `bundle.children` de inhoud ervan. Kinderen verschijnen nooit als eigen rijen, dus als je ze niet rendert, ziet de shopper niet wat er in de bundel zit:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  return (
    <div>
      <div>{props.title} {props.price}</div>

      {props.bundle && (
        <ul style={{ margin: '4px 0 0 12px', fontSize: '12px', opacity: 0.7 }}>
          {props.bundle.children.map((child, i) => (
            <li key={child.key ?? i}>{child.quantity} × {child.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

De `key` van een kind is `null` bij een Shopify native-bundelonderdeel, dus val terug op de index zoals hierboven.

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