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

# Blok Subscription upgrade

> Pod-blok Subscription upgrade w Aftersell Cart: konwertuj kwalifikujące się pozycje jednorazowe na subskrypcję z poziomu koszyka.

> Blok **Subscription upgrade** to pod-blok zagnieżdżony wewnątrz [**Cart items**](/pl/aftersell/cart/cart-items-block). Zachęca kupujących do zmiany kwalifikującej się jednorazowej pozycji na subskrypcję bezpośrednio z koszyka, zamieniając jednorazowy zakup w przychód cykliczny w momencie decyzji, i pozwala już zasubskrybowanym kupującym zmienić lub anulować plan na tej pozycji.

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

* **Pojawia się tylko na kwalifikujących się pozycjach.** Blok odczytuje plany sprzedaży produktu i nie renderuje niczego na pozycji, której produkt nie ma planów subskrypcji.
* **Nigdy nie jest oferowany na prezentach z nagród.** Zasubskrybowanie automatycznie przyznanego darmowego prezentu odebrałoby mu status nagrody, więc zachęta jest wyłączona na tych pozycjach.
* Na **pozycji jednorazowej** pokazuje wezwanie do ulepszenia.
* Na **pozycji już zasubskrybowanej** pokazuje selektor planu oraz opcję „powrotu do zakupu jednorazowego”.

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

| Ustawienie           | Co kontroluje                                                                                      | Domyślnie                       |
| -------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Button text**      | Wezwanie do ulepszenia na pozycji jednorazowej. Obsługuje tokeny `{{discount}}` i `{{plan name}}`. | `Subscribe & Save`              |
| **Unsubscribe text** | Opcja przywracająca zasubskrybowaną pozycję do zakupu jednorazowego.                               | `Downgrade - One time purchase` |

<div id="placement-and-limits">
  ## Umieszczenie i limity
</div>

* **Rodzic:** zagnieżdża się tylko w Cart items.
* **Maksimum:** 1 na koszyk.
* Niedodawany domyślnie. Niezablokowany, więc możesz go usunąć lub ukryć.

Ponieważ jest to pod-blok, renderuje się per pozycja, umieszczony nad lub pod treścią produktu w zależności od tego, gdzie go ustawisz względem wiersza Product. Zobacz [jak pozycjonują się pod-bloki](/pl/aftersell/cart/cart-items-block#sub-blocks-and-how-they-position).

<div id="custom-template">
  ## Szablon niestandardowy
</div>

Obsługuje [szablon niestandardowy](/pl/aftersell/cart/custom-templates) z zakładki Code, który zastępuje wbudowane znaczniki tego bloku Twoim JSX. Oto propsy, które otrzymuje.

Ten blok renderuje jeden z dwóch stanów, a `view.state` mówi który. `view` nigdy nie jest `null` wewnątrz szablonu niestandardowego: gdy pozycja nie ma planów, blok nie renderuje niczego i Twój szablon nie jest wywoływany.

| Prop              | Typ                                | Do czego służy                                                                                                             |
| ----------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `view`            | `object`                           | Stan pozycji. Albo `{ state: 'upgrade', buttonText, planId }`, albo `{ state: 'subscribed', plans, activePlanId }`.        |
| `title`           | `string`                           | Tytuł **produktu**, nie nagłówek bloku. Wbudowany szablon używa go tylko do zbudowania dostępnej etykiety selektora planu. |
| `unsubscribeText` | `string`                           | Etykieta opcji powrotu do zakupu jednorazowego.                                                                            |
| `busy`            | `boolean`                          | `true`, gdy zmiana planu jest w toku.                                                                                      |
| `selectPlan`      | `(planId: number \| null) => void` | Subskrybuje lub przełącza plan. Przekaż `null`, aby anulować subskrypcję.                                                  |
| `onChange`        | `(event: Event) => void`           | Gotowy `onChange` dla `<select>`, żebyś nie musiał sam parsować wartości.                                                  |
| `oneTimeValue`    | `string`                           | Wartościownik `<option>` reprezentujący „zakup jednorazowy”.                                                               |
| `line`            | `AftersellCartLine`                | [Pozycja koszyka](/pl/aftersell/cart/sdk-cart-object#cart-lines), do której należy ten blok.                               |
| `productId`       | `number`                           | ID produktu Shopify.                                                                                                       |
| `variantId`       | `number`                           | ID wariantu Shopify.                                                                                                       |

Każdy wpis w `view.plans` to `{ 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>
  Używaj `onChange` dla `<select>` i `selectPlan` dla przycisków. `onChange` obsługuje już wartościownik `oneTimeValue`; jeśli podpinasz własny handler do `<select>`, musisz sam porównać z `oneTimeValue` i wywołać `selectPlan(null)`.
</Note>

<div id="design">
  ## Wygląd
</div>

Stylizuj ten blok w jego sekcji **Design** w panelu ustawień. To nadpisania per blok, które nakładają się na Twój globalny wygląd i wracają do niego, gdy są puste.

Czym są ustawienia wyglądu? Dowiedz się więcej tutaj: [Ustawienia wyglądu](/pl/aftersell/cart/design-settings).