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

> Aftersell Cart Subscription upgrade-underblokken: konvertér kvalificerede engangslinjer til et abonnement fra kurven.

> **Subscription upgrade**-blokken er en underblok, der indlejres i [**Cart items**](/da/aftersell/cart/cart-items-block). Den opfordrer kunder til at skifte en kvalificeret engangslinje til et abonnement direkte fra kurven, hvilket forvandler et engangskøb til tilbagevendende omsætning på beslutningsøjeblikket, og lader kunder, der allerede abonnerer, ændre eller annullere deres plan på den linje.

<div id="behavior">
  ## Adfærd
</div>

* **Vises kun på kvalificerede linjer.** Blokken læser produktets selling plans og renderer intet på en linje, hvis produkt ikke har abonnementsplaner.
* **Tilbydes aldrig på reward-gaver.** At abonnere på en automatisk tildelt gratis gave ville fjerne dens reward-status, så opfordringen undertrykkes på de linjer.
* På en **engangslinje** viser den opgraderings-call-to-action.
* På en **allerede abonneret linje** viser den en planvælger plus muligheden "nedgradér til engangskøb".

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

| Indstilling          | Hvad den styrer                                                                                        | Standard                        |
| -------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------- |
| **Button text**      | Opgraderings-call-to-action på en engangslinje. Understøtter tokens `{{discount}}` og `{{plan name}}`. | `Subscribe & Save`              |
| **Unsubscribe text** | Muligheden, der fører en abonneret linje tilbage til et engangskøb.                                    | `Downgrade - One time purchase` |

<div id="placement-and-limits">
  ## Placering og grænser
</div>

* **Forælder:** indlejres kun i Cart items.
* **Maksimum:** 1 pr. kurv.
* Tilføjes ikke som standard. Ikke låst, så du kan fjerne eller skjule den.

Fordi det er en underblok, renderes den pr. linje, placeret over eller under produktindholdet afhængigt af, hvor du placerer den i forhold til Product row. Se [hvordan underblokke placeres](/da/aftersell/cart/cart-items-block#sub-blocks-and-how-they-position).

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

Understøtter en [custom template](/da/aftersell/cart/custom-templates) fra sin Code-fane, som erstatter denne bloks indbyggede markup med din JSX. Dette er de props, den modtager.

Denne blok renderer én af to tilstande, og `view.state` fortæller dig hvilken. `view` er aldrig `null` inde i en custom template: når en linje ingen planer har, renderer blokken intet, og din template kaldes ikke.

| Prop              | Type                               | Hvad den bruges til                                                                                                                          |
| ----------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `view`            | `object`                           | Linjens tilstand. Enten `{ state: 'upgrade', buttonText, planId }` eller `{ state: 'subscribed', plans, activePlanId }`.                     |
| `title`           | `string`                           | **Produktets** titel, ikke en overskrift for blokken. Den indbyggede template bruger den kun til at bygge planvælgerens tilgængelige etiket. |
| `unsubscribeText` | `string`                           | Etiket for nedgradér-til-engangskøb-muligheden.                                                                                              |
| `busy`            | `boolean`                          | `true` mens en planændring er undervejs.                                                                                                     |
| `selectPlan`      | `(planId: number \| null) => void` | Abonnerer eller skifter plan. Send `null` for at afmelde.                                                                                    |
| `onChange`        | `(event: Event) => void`           | Færdiglavet `onChange` til en `<select>`, så du ikke selv skal parse værdien.                                                                |
| `oneTimeValue`    | `string`                           | Sentinel-`<option>`-værdien, der repræsenterer "engangskøb".                                                                                 |
| `line`            | `AftersellCartLine`                | Den [kurvlinje](/da/aftersell/cart/sdk-cart-object#cart-lines), denne blok hører til.                                                        |
| `productId`       | `number`                           | Shopify-produkt-ID.                                                                                                                          |
| `variantId`       | `number`                           | Shopify-variant-ID.                                                                                                                          |

Hver post i `view.plans` er `{ 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>
  Brug `onChange` til en `<select>` og `selectPlan` til knapper. `onChange` håndterer allerede `oneTimeValue`-sentinellen; hvis du kobler din egen handler til en `<select>`, skal du selv sammenligne mod `oneTimeValue` og kalde `selectPlan(null)`.
</Note>

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

Stil denne blok med dens **Design**-sektion i indstillingspanelet. Det er per-blok-overstyringer, der lægges oven på dit globale design og falder tilbage til det, når de er tomme.

Hvad er designindstillinger? Lær mere her: [Designindstillinger](/da/aftersell/cart/design-settings).