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

# Subscription upgrade-block

> Het Subscription upgrade-sub-block van de Aftersell Cart: zet in aanmerking komende eenmalige regels om naar een abonnement vanuit de winkelwagen.

> Het **Subscription upgrade**-block is een sub-block dat nest binnen [**Cart items**](/nl/aftersell/cart/cart-items-block). Het spoort shoppers aan om een in aanmerking komend eenmalig regelitem rechtstreeks vanuit de winkelwagen om te zetten naar een abonnement, waarmee een eenmalige aankoop op het beslismoment terugkerende omzet wordt, en het laat shoppers die al geabonneerd zijn hun plan op die regel wijzigen of annuleren.

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

* **Verschijnt alleen op regels die in aanmerking komen.** Het block leest de selling plans van het product en rendert niets op een regel waarvan het product geen abonnementsplannen heeft.
* **Wordt nooit aangeboden op beloningscadeaus.** Abonneren op een automatisch toegekend gratis cadeau zou de beloningsstatus ervan wegnemen, dus de prompt wordt op die regels onderdrukt.
* Op een **eenmalige regel** toont het de upgrade-call-to-action.
* Op een **al geabonneerde regel** toont het een planselector plus de optie "downgrade naar eenmalig".

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

| Instelling           | Wat het bepaalt                                                                                            | Standaard                       |
| -------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Button text**      | De upgrade-call-to-action op een eenmalige regel. Ondersteunt de tokens `{{discount}}` en `{{plan name}}`. | `Subscribe & Save`              |
| **Unsubscribe text** | De optie die een geabonneerde regel terugzet naar een eenmalige aankoop.                                   | `Downgrade - One time purchase` |

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

* **Parent:** nest alleen binnen Cart items.
* **Maximum:** 1 per winkelwagen.
* Niet standaard toegevoegd. Niet vergrendeld, dus je kunt het verwijderen of verbergen.

Omdat het een sub-block is, rendert het per regel, gepositioneerd boven of onder de productinhoud afhankelijk van waar je het plaatst ten opzichte van de Product row. Zie [hoe sub-blocks zich positioneren](/nl/aftersell/cart/cart-items-block#sub-blocks-and-how-they-position).

<div id="custom-template">
  ## Custom template
</div>

Ondersteunt een [custom template](/nl/aftersell/cart/custom-templates) vanaf zijn Code-tabblad, dat de ingebouwde markup van dit block vervangt door jouw JSX. Dit zijn de props die het ontvangt.

Dit block rendert een van twee statussen, en `view.state` vertelt je welke. `view` is nooit `null` binnen een custom template: wanneer een regel geen plannen heeft, rendert het block niets en wordt je template niet aangeroepen.

| Prop              | Type                               | Waar het voor is                                                                                                                                             |
| ----------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `view`            | `object`                           | De status van de regel. Ofwel `{ state: 'upgrade', buttonText, planId }` of `{ state: 'subscribed', plans, activePlanId }`.                                  |
| `title`           | `string`                           | De titel van het **product**, geen kop voor het block. De ingebouwde template gebruikt hem alleen om het toegankelijke label van de plankiezer op te bouwen. |
| `unsubscribeText` | `string`                           | Label voor de optie downgrade-naar-eenmalig.                                                                                                                 |
| `busy`            | `boolean`                          | `true` terwijl een planwijziging bezig is.                                                                                                                   |
| `selectPlan`      | `(planId: number \| null) => void` | Abonneert of wisselt van plan. Geef `null` door om op te zeggen.                                                                                             |
| `onChange`        | `(event: Event) => void`           | Kant-en-klare `onChange` voor een `<select>`, zodat je de waarde niet zelf hoeft te parsen.                                                                  |
| `oneTimeValue`    | `string`                           | De sentinel `<option>`-waarde die "eenmalige aankoop" vertegenwoordigt.                                                                                      |
| `line`            | `AftersellCartLine`                | De [winkelwagenregel](/nl/aftersell/cart/sdk-cart-object#cart-lines) waar dit block bij hoort.                                                               |
| `productId`       | `number`                           | Shopify product-ID.                                                                                                                                          |
| `variantId`       | `number`                           | Shopify variant-ID.                                                                                                                                          |

Elke entry in `view.plans` is `{ id: number, name: string, discountPercent: number }`.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  const { view } = props;

  if (view.state === 'upgrade') {
    return (
      <button type="button" onClick={() => props.selectPlan(view.planId)} disabled={props.busy}>
        {view.buttonText}
      </button>
    );
  }

  return (
    <div>
      <select
        aria-label={`Subscription plan — ${props.title}`}
        value={String(view.activePlanId)}
        onChange={props.onChange}
        disabled={props.busy}
      >
        {view.plans.map((plan) => (
          <option key={plan.id} value={String(plan.id)}>
            {plan.name}{plan.discountPercent > 0 ? ` (${plan.discountPercent}% off)` : ''}
          </option>
        ))}
        <option value={props.oneTimeValue}>{props.unsubscribeText}</option>
      </select>
    </div>
  );
}
```

<Note>
  Gebruik `onChange` voor een `<select>` en `selectPlan` voor knoppen. `onChange` handelt de `oneTimeValue`-sentinel al af; als je je eigen handler aan een `<select>` koppelt, moet je zelf vergelijken met `oneTimeValue` en `selectPlan(null)` aanroepen.
</Note>

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

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

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