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

> Der Subscription-Upgrade-Sub-Block des Aftersell Cart: wandle berechtigte Einmalkauf-Zeilen direkt aus dem Warenkorb in ein Abonnement um.

> Der **Subscription upgrade**-Block ist ein Sub-Block, der innerhalb von [**Cart items**](/de/aftersell/cart/cart-items-block) verschachtelt wird. Er fordert Käufer auf, eine berechtigte Einmalkauf-Position direkt im Warenkorb auf ein Abonnement umzustellen — so wird ein Einmalkauf im Moment der Entscheidung zu wiederkehrendem Umsatz — und ermöglicht es bereits abonnierten Käufern, ihren Plan auf dieser Zeile zu ändern oder zu kündigen.

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

* **Erscheint nur auf berechtigten Zeilen.** Der Block liest die Selling Plans des Produkts und rendert nichts auf einer Zeile, deren Produkt keine Abonnement-Pläne hat.
* **Wird nie auf Reward-Geschenken angeboten.** Das Abonnieren eines automatisch gewährten Gratisgeschenks würde dessen Reward-Status entfernen, daher wird die Aufforderung auf diesen Zeilen unterdrückt.
* Auf einer **Einmalkauf-Zeile** zeigt er den Upgrade-Call-to-Action.
* Auf einer **bereits abonnierten Zeile** zeigt er eine Planauswahl plus die Option „Downgrade auf Einmalkauf“.

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

| Einstellung          | Was sie steuert                                                                                                   | Standard                        |
| -------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Button text**      | Der Upgrade-Call-to-Action auf einer Einmalkauf-Zeile. Unterstützt die Tokens `{{discount}}` und `{{plan name}}`. | `Subscribe & Save`              |
| **Unsubscribe text** | Die Option, die eine abonnierte Zeile in einen Einmalkauf zurückverwandelt.                                       | `Downgrade - One time purchase` |

<div id="placement-and-limits">
  ## Platzierung und Limits
</div>

* **Übergeordneter Block:** verschachtelt sich nur innerhalb von Cart items.
* **Maximum:** 1 pro Warenkorb.
* Nicht standardmäßig hinzugefügt. Nicht gesperrt, du kannst ihn also entfernen oder ausblenden.

Da es ein Sub-Block ist, rendert er pro Zeile, über oder unter dem Produktinhalt positioniert, je nachdem, wo du ihn relativ zur Product row platzierst. Siehe [wie Sub-Blöcke positioniert werden](/de/aftersell/cart/cart-items-block#sub-blocks-and-how-they-position).

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

Unterstützt ein [Custom Template](/de/aftersell/cart/custom-templates) über seinen Code-Tab, das das integrierte Markup dieses Blocks durch dein JSX ersetzt. Diese Props erhält es.

Dieser Block rendert einen von zwei Zuständen, und `view.state` verrät dir welchen. `view` ist innerhalb eines Custom Templates nie `null`: Wenn eine Zeile keine Pläne hat, rendert der Block nichts und dein Template wird nicht aufgerufen.

| Prop              | Typ                                | Wofür sie ist                                                                                                                                                  |
| ----------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `view`            | `object`                           | Der Zustand der Zeile. Entweder `{ state: 'upgrade', buttonText, planId }` oder `{ state: 'subscribed', plans, activePlanId }`.                                |
| `title`           | `string`                           | Der Titel des **Produkts**, keine Überschrift für den Block. Das integrierte Template verwendet ihn nur, um das barrierefreie Label der Planauswahl zu bilden. |
| `unsubscribeText` | `string`                           | Label für die Downgrade-auf-Einmalkauf-Option.                                                                                                                 |
| `busy`            | `boolean`                          | `true`, während eine Planänderung läuft.                                                                                                                       |
| `selectPlan`      | `(planId: number \| null) => void` | Abonniert oder wechselt den Plan. Übergib `null`, um zu kündigen.                                                                                              |
| `onChange`        | `(event: Event) => void`           | Fertiger `onChange` für ein `<select>`, damit du den Wert nicht selbst parsen musst.                                                                           |
| `oneTimeValue`    | `string`                           | Der Sentinel-`<option>`-Wert, der „Einmalkauf“ repräsentiert.                                                                                                  |
| `line`            | `AftersellCartLine`                | Die [Warenkorbzeile](/de/aftersell/cart/sdk-cart-object#cart-lines), zu der dieser Block gehört.                                                               |
| `productId`       | `number`                           | Shopify-Produkt-ID.                                                                                                                                            |
| `variantId`       | `number`                           | Shopify-Varianten-ID.                                                                                                                                          |

Jeder Eintrag in `view.plans` ist `{ 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>
  Verwende `onChange` für ein `<select>` und `selectPlan` für Buttons. `onChange` behandelt den `oneTimeValue`-Sentinel bereits; wenn du deinen eigenen Handler an ein `<select>` hängst, musst du selbst gegen `oneTimeValue` vergleichen und `selectPlan(null)` aufrufen.
</Note>

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

Gestalte diesen Block über seinen **Design**-Abschnitt im Einstellungs-Panel. Das sind Überschreibungen pro Block, die auf deinem globalen Design aufsetzen und auf dieses zurückfallen, wenn sie leer sind.

Was sind Design settings? Erfahre hier mehr: [Design settings](/de/aftersell/cart/design-settings).