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

# Bloc de passage à l'abonnement

> Le sous-bloc Subscription upgrade d'Aftersell Cart : convertissez les lignes éligibles à achat unique en abonnement depuis le panier.

> Le bloc **Subscription upgrade** est un sous-bloc qui s'imbrique dans [**Cart items**](/fr/aftersell/cart/cart-items-block). Il invite les clients à convertir une ligne d'achat unique éligible en abonnement directement depuis le panier, transformant un achat ponctuel en revenu récurrent au moment de la décision, et permet aux clients déjà abonnés de changer ou d'annuler leur plan sur cette ligne.

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

* **N'apparaît que sur les lignes éligibles.** Le bloc lit les plans de vente du produit et n'affiche rien sur une ligne dont le produit n'a pas de plans d'abonnement.
* **Jamais proposé sur les cadeaux de récompense.** S'abonner à un cadeau gratuit accordé automatiquement lui retirerait son statut de récompense, donc l'invitation est supprimée sur ces lignes.
* Sur une **ligne d'achat unique**, il affiche l'appel à l'action de passage à l'abonnement.
* Sur une **ligne déjà abonnée**, il affiche un sélecteur de plan ainsi que l'option « repasser à l'achat unique ».

<div id="settings">
  ## Réglages
</div>

| Réglage              | Ce qu'il contrôle                                                                                                                        | Par défaut                      |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| **Button text**      | L'appel à l'action de passage à l'abonnement sur une ligne d'achat unique. Prend en charge les jetons `{{discount}}` et `{{plan name}}`. | `Subscribe & Save`              |
| **Unsubscribe text** | L'option qui ramène une ligne abonnée à un achat unique.                                                                                 | `Downgrade - One time purchase` |

<div id="placement-and-limits">
  ## Placement et limites
</div>

* **Parent :** s'imbrique uniquement dans Cart items.
* **Maximum :** 1 par panier.
* Non ajouté par défaut. Non verrouillé, vous pouvez donc le retirer ou le masquer.

Comme c'est un sous-bloc, il s'affiche par ligne, positionné au-dessus ou en dessous du contenu du produit selon l'endroit où vous le placez par rapport à la ligne Product. Voir [comment les sous-blocs se positionnent](/fr/aftersell/cart/cart-items-block#sub-blocks-and-how-they-position).

<div id="custom-template">
  ## Modèle personnalisé
</div>

Prend en charge un [modèle personnalisé](/fr/aftersell/cart/custom-templates) depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu'il reçoit.

Ce bloc affiche l'un de deux états, et `view.state` vous indique lequel. `view` n'est jamais `null` dans un modèle personnalisé : lorsqu'une ligne n'a pas de plans, le bloc n'affiche rien et votre modèle n'est pas appelé.

| Prop              | Type                               | À quoi elle sert                                                                                                                                   |
| ----------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `view`            | `object`                           | L'état de la ligne. Soit `{ state: 'upgrade', buttonText, planId }`, soit `{ state: 'subscribed', plans, activePlanId }`.                          |
| `title`           | `string`                           | Le titre du **produit**, pas un titre pour le bloc. Le modèle intégré ne l'utilise que pour construire le libellé accessible du sélecteur de plan. |
| `unsubscribeText` | `string`                           | Libellé de l'option de retour à l'achat unique.                                                                                                    |
| `busy`            | `boolean`                          | `true` pendant qu'un changement de plan est en cours.                                                                                              |
| `selectPlan`      | `(planId: number \| null) => void` | Abonne ou change de plan. Passez `null` pour se désabonner.                                                                                        |
| `onChange`        | `(event: Event) => void`           | `onChange` prêt à l'emploi pour un `<select>`, pour que vous n'ayez pas à analyser la valeur vous-même.                                            |
| `oneTimeValue`    | `string`                           | La valeur sentinelle de l'`<option>` représentant « achat unique ».                                                                                |
| `line`            | `AftersellCartLine`                | La [ligne de panier](/fr/aftersell/cart/sdk-cart-object#cart-lines) à laquelle ce bloc appartient.                                                 |
| `productId`       | `number`                           | ID de produit Shopify.                                                                                                                             |
| `variantId`       | `number`                           | ID de variante Shopify.                                                                                                                            |

Chaque entrée de `view.plans` est `{ 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>
  Utilisez `onChange` pour un `<select>` et `selectPlan` pour des boutons. `onChange` gère déjà la sentinelle `oneTimeValue` ; si vous câblez votre propre gestionnaire sur un `<select>`, vous devez comparer avec `oneTimeValue` et appeler `selectPlan(null)` vous-même.
</Note>

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

Stylisez ce bloc via sa section **Design** dans le panneau de réglages. Ce sont des surcharges par bloc qui se superposent à votre design global et y retombent lorsqu'elles sont vides.

Que sont les réglages de design ? Apprenez-en plus ici : [Réglages de design](/fr/aftersell/cart/design-settings).