> ## 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 Product add-on
> Le bloc Product add-on du panier Aftersell : proposez un produit spécifique en ajout rapide dans le tiroir.
> Le bloc **Product add-on** propose un seul produit spécifique de votre choix en tant qu'option complémentaire dans le panier, mettant en avant un produit connu (une garantie, un échantillon, une meilleure vente) en ajout rapide directement dans le panier.
Contrairement au bloc [**Upsells**](/fr/aftersell/cart/upsells-block), qui présente des produits choisis par une stratégie, le Product add-on affiche toujours le produit exact que vous choisissez.
## Comportement
* **Si aucune variante active ne se résout** — le produit est non défini, archivé ou en rupture de stock — le bloc n'affiche **rien** plutôt qu'un bouton mort.
* Le contrôle reflète si la ligne d'option complémentaire *de ce bloc précis* est dans le panier ; le désactiver supprime donc la ligne qu'il a ajoutée (sans affecter le même produit ajouté ailleurs).
* Un prix comparatif est barré lorsqu'il y a une véritable démarque ; le libellé « % off » est masqué si la réduction s'arrondit sous 1 %.
* L'image de l'option complémentaire revient à l'image principale du produit lorsque la variante choisie n'en a pas.
## Paramètres
| Paramètre | Ce qu'il contrôle | Défaut |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Display type** | L'apparence du contrôle d'ajout : **Toggle** ou **Checkbox**. | Toggle |
| **Product** | La variante de produit à proposer ; un seul sélecteur couvre les deux. L'image et le prix proviennent de la variante choisie. | Aucun |
| **Title** | Titre en texte enrichi. | `{{product_title}}` |
| **Price label** | La ligne de prix. | `{{price}}` |
| **Description** | Texte d'accompagnement. | `Add {{product_title}} to your order` |
**Title**, **Price label** et **Description** prennent tous en charge les quatre mêmes jetons : `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` et `{{savings}}`.
## Placement et limites
* **Région :** corps ou bas.
* **Maximum :** 3 par état de panier. Le panier rempli et le panier vide ont chacun leur propre quota.
* **État :** panier rempli et panier vide.
* Non ajouté par défaut. Non verrouillé — vous pouvez le supprimer ou le masquer.
## Modèle personnalisé
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.
### Contenu
| Prop | Type | À quoi elle sert |
| ------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `addonTitle` | `string` | Titre en texte brut. Utilisez-le pour le texte alternatif et l'`aria-label`, et comme solution de repli lorsqu'il n'y a pas de titre enrichi. |
| `addonTitleHtml` | `string` | HTML de titre en texte enrichi assaini. Vide lorsqu'il n'y en a pas. |
| `descriptionHtml` | `string` | HTML de description en texte enrichi assaini. Vide lorsqu'il n'y en a pas. |
| `formattedPrice` | `string` | Libellé de prix formaté en devise. Vide lorsqu'il n'est pas affiché. |
| `formattedCompareAtPrice` | `string` | Prix comparatif de la variante formaté (MSRP). Vide lorsqu'il n'y a pas d'économie réelle. |
| `savings` | `string` | Libellé d'économie en pourcentage entier, par exemple `25%`. Vide lorsqu'il n'y a pas d'économie. |
| `priceHtml` | `string \| null` | HTML de prix en texte enrichi assaini provenant du champ de prix dédié. `null` lorsqu'il est vide. |
| `ctaText` | `string` | Libellé du bouton, pour le format `button`. |
| `imageUrl` | `string` | Image du produit. Vide lorsqu'il n'y en a pas. |
| `productUrl` | `string` | URL de la page produit. Vide lorsqu'il n'y en a pas, auquel cas ne liez ni l'image ni le titre. |
### État et actions
| Prop | Type | À quoi elle sert |
| -------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| `variantId` | `number \| null` | Variante résolue. `null` lorsqu'il n'y a pas de variante active, parce que le produit est non défini ou en rupture de stock. |
| `format` | `'button' \| 'checkbox' \| 'toggle'` | La façon dont l'acheteur ajoute l'option complémentaire. Faites brancher votre balisage sur cette valeur. |
| `isEnabled` | `boolean` | Indique si l'option complémentaire est actuellement dans le panier. |
| `isAdding` | `boolean` | `true` pendant que l'ajout ou la suppression est en cours. Désactivez votre contrôle en fonction de cette valeur. |
| `handleAdd` | `() => void` | Ajoute l'option complémentaire. Pour le format `button`. |
| `handleToggle` | `() => void` | Ajoute ou retire l'option complémentaire du panier. Pour `checkbox` et `toggle`. |
| `isLoading` | `boolean` | `true` pendant que le panier effectue encore sa première requête. |
`format` détermine quel gestionnaire s'applique : `handleAdd` pour `button`, `handleToggle` pour `checkbox` et `toggle`. Un `variantId` à `null` signifie qu'il n'y a rien à ajouter, donc conditionnez votre contrôle sur cette valeur plutôt que d'appeler un gestionnaire qui ne peut pas réussir.
## Design
Stylisez ce bloc avec sa section **Design** dans le panneau de paramètres. Il s'agit de surcharges par bloc qui se superposent à votre design global et y reviennent lorsqu'elles sont vides.
### Text
La section **Text** dans Design vous permet de contrôler la typographie de trois éléments. Utilisez le sélecteur **Text element** pour basculer entre eux.
**Title** — le nom du produit. Prend également en charge une famille de police personnalisée. Le gras et la couleur du texte se règlent dans l'éditeur de texte enrichi ci-dessus (dans l'onglet Settings), pas ici.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | -------------------------------------- | ---------------- |
| **Font** | La famille de police du titre. | Héritée du thème |
| **Size** | La taille de la police. | `15px` |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.33` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
**Price** — la ligne de prix. Le gras et la couleur du texte se règlent dans l'éditeur de texte enrichi ci-dessus.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | -------------------------------------- | ------ |
| **Size** | La taille de la police. | `15px` |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.33` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
**Description** — le texte d'accompagnement. Le gras et la couleur du texte se règlent dans l'éditeur de texte enrichi ci-dessus.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | -------------------------------------- | ------ |
| **Size** | La taille de la police. | `14px` |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.29` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
Cliquer directement sur un élément de texte dans l'aperçu du panier le met en évidence et ouvre automatiquement ses contrôles dans le panneau.
Que sont les paramètres de design ? Apprenez-en plus ici : [Paramètres de design](/fr/aftersell/cart/design-settings).