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

# Blocco Subscription upgrade

> Il sub-blocco Subscription upgrade dell'Aftersell Cart: converti dal carrello le righe una tantum idonee in un abbonamento.

> Il blocco **Subscription upgrade** è un sub-blocco che si annida dentro [**Cart items**](/it/aftersell/cart/cart-items-block). Invita gli acquirenti a passare una riga una tantum idonea a un abbonamento direttamente dal carrello, trasformando un acquisto una tantum in ricavi ricorrenti nel momento della decisione, e permette agli acquirenti già abbonati di cambiare o annullare il piano su quella riga.

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

* **Appare solo sulle righe idonee.** Il blocco legge i selling plan del prodotto e non renderizza nulla su una riga il cui prodotto non ha piani di abbonamento.
* **Mai offerto sugli omaggi reward.** Abbonarsi a un omaggio concesso automaticamente ne rimuoverebbe lo stato di reward, quindi l'invito è soppresso su quelle righe.
* Su una **riga una tantum**, mostra la call-to-action di upgrade.
* Su una **riga già abbonata**, mostra un selettore di piani più l'opzione "downgrade a una tantum".

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

| Impostazione         | Cosa controlla                                                                                          | Default                         |
| -------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Button text**      | La call-to-action di upgrade su una riga una tantum. Supporta i token `{{discount}}` e `{{plan name}}`. | `Subscribe & Save`              |
| **Unsubscribe text** | L'opzione che riporta una riga abbonata a un acquisto una tantum.                                       | `Downgrade - One time purchase` |

<div id="placement-and-limits">
  ## Posizionamento e limiti
</div>

* **Parent:** si annida solo dentro Cart items.
* **Massimo:** 1 per carrello.
* Non aggiunto di default. Non bloccato, quindi puoi rimuoverlo o nasconderlo.

Poiché è un sub-blocco, viene renderizzato per riga, posizionato sopra o sotto il contenuto del prodotto a seconda di dove lo collochi rispetto alla riga Product. Vedi [come si posizionano i sub-blocchi](/it/aftersell/cart/cart-items-block#sub-blocks-and-how-they-position).

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

Supporta un [template personalizzato](/it/aftersell/cart/custom-templates) dalla sua scheda Code, che sostituisce il markup integrato di questo blocco con il tuo JSX. Queste sono le props che riceve.

Questo blocco renderizza uno di due stati, e `view.state` ti dice quale. `view` non è mai `null` dentro un template personalizzato: quando una riga non ha piani, il blocco non renderizza nulla e il tuo template non viene chiamato.

| Prop              | Tipo                               | A cosa serve                                                                                                                                                   |
| ----------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `view`            | `object`                           | Lo stato della riga. O `{ state: 'upgrade', buttonText, planId }` o `{ state: 'subscribed', plans, activePlanId }`.                                            |
| `title`           | `string`                           | Il titolo del **prodotto**, non un'intestazione per il blocco. Il template integrato lo usa solo per costruire l'etichetta accessibile del selettore di piani. |
| `unsubscribeText` | `string`                           | Etichetta per l'opzione di downgrade a una tantum.                                                                                                             |
| `busy`            | `boolean`                          | `true` mentre un cambio di piano è in corso.                                                                                                                   |
| `selectPlan`      | `(planId: number \| null) => void` | Abbona o cambia piano. Passa `null` per annullare l'abbonamento.                                                                                               |
| `onChange`        | `(event: Event) => void`           | `onChange` pronto all'uso per un `<select>`, così non devi parsare il valore da solo.                                                                          |
| `oneTimeValue`    | `string`                           | Il valore sentinella dell'`<option>` che rappresenta "acquisto una tantum".                                                                                    |
| `line`            | `AftersellCartLine`                | La [riga del carrello](/it/aftersell/cart/sdk-cart-object#cart-lines) a cui questo blocco appartiene.                                                          |
| `productId`       | `number`                           | ID prodotto Shopify.                                                                                                                                           |
| `variantId`       | `number`                           | ID variante Shopify.                                                                                                                                           |

Ogni voce in `view.plans` è `{ 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>
  Usa `onChange` per un `<select>` e `selectPlan` per i pulsanti. `onChange` gestisce già la sentinella `oneTimeValue`; se colleghi un tuo handler a un `<select>`, devi confrontare tu stesso con `oneTimeValue` e chiamare `selectPlan(null)`.
</Note>

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

Definisci lo stile di questo blocco con la sua sezione **Design** nel pannello delle impostazioni. Si tratta di override per singolo blocco che si sovrappongono al tuo design globale e ricadono su di esso quando sono vuoti.

Cosa sono le impostazioni di design? Scopri di più qui: [Impostazioni di design](/it/aftersell/cart/design-settings).