> ## 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 protection d'expédition

> Le bloc Shipping protection d'Aftersell Cart : un complément de protection en opt-in qui enregistre le choix sur la commande.

> Le bloc **Shipping protection** propose un complément de protection d'expédition en opt-in que les clients peuvent activer dans le panier, leur permettant d'ajouter une protection contre les dommages, la perte ou le vol pendant l'expédition, et enregistre ce choix sur la commande pour vos outils d'exécution ou de réclamations.

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

* Ajouter la protection fait deux choses : cela ajoute une **véritable ligne de produit Shopify** pour le produit de protection, et cela définit un attribut de panier `_shipping_protected` à `true`.
* **Cet attribut survit au paiement et atterrit sur la commande** en tant qu'attribut de note de commande (`_shipping_protected`), afin que vos outils d'exécution ou de réclamations puissent identifier les commandes protégées.
* Les clients peuvent à la fois ajouter et retirer la protection avec le contrôle, quel que soit le type d'affichage choisi.
* **Si aucune variante de protection utilisable n'existe, le bloc n'affiche rien** plutôt que de montrer un contrôle qui produirait une erreur au clic.

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

| Réglage          | Ce qu'il contrôle                                                                                                                                       | Par défaut                                                        |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Title**        | Titre en texte enrichi. Prend en charge `{{product_title}}` et `{{price}}`.                                                                             | `<strong>{{product_title}}</strong>`                              |
| **Price label**  | La ligne de prix, affichée sous le titre. Prend en charge `{{product_title}}` et `{{price}}`. Videz ce champ pour masquer entièrement la ligne de prix. | `{{price}}`                                                       |
| **Description**  | Texte d'accompagnement.                                                                                                                                 | `Protect your order from damage, loss, or theft during shipping.` |
| **Price**        | Le prix de la protection (numérique, définit le montant facturé).                                                                                       | `2.5`                                                             |
| **Product**      | Le produit de protection (provisionné par l'application).                                                                                               | —                                                                 |
| **Display type** | L'apparence du contrôle : **Toggle** ou **Checkbox**.                                                                                                   | Toggle                                                            |

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

* **Région :** corps ou bas.
* **Maximum :** 1 par état de panier.
* **État :** panier rempli uniquement.
* Non ajouté par défaut. Non verrouillé — vous pouvez le retirer ou le masquer.

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

| Prop              | Type                                 | À quoi elle sert                                                                                       |
| ----------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------ |
| `isEnabled`       | `boolean`                            | Si la protection d'expédition est actuellement dans le panier.                                         |
| `isPending`       | `boolean`                            | `true` pendant que l'ajout ou le retrait est en cours. Désactivez votre contrôle sur cette base.       |
| `title`           | `string`                             | Titre en texte brut. La solution de repli lorsqu'il n'y a pas de titre en texte enrichi.               |
| `titleHtml`       | `string`                             | HTML du titre en texte enrichi, assaini. Vide lorsqu'il n'y en a pas.                                  |
| `descriptionHtml` | `string`                             | HTML de la description en texte enrichi, assaini. Vide lorsqu'il n'y en a pas.                         |
| `priceHtml`       | `string \| null`                     | HTML du prix en texte enrichi, assaini, issu du champ de prix dédié. `null` lorsque ce champ est vide. |
| `priceLabel`      | `string`                             | Libellé de prix formaté. Vide lorsque le prix n'est pas affiché.                                       |
| `imageUrl`        | `string`                             | Image de la protection. Vide lorsqu'il n'y en a pas.                                                   |
| `ctaText`         | `string`                             | Libellé du bouton, pour le format `button`.                                                            |
| `format`          | `'button' \| 'checkbox' \| 'toggle'` | Comment l'acheteur adhère. Branchez votre balisage sur cette valeur.                                   |
| `handleAdd`       | `() => void`                         | Ajoute la protection au panier. Pour le format `button`.                                               |
| `handleToggle`    | `() => void`                         | Active et désactive la protection dans le panier. Pour `checkbox` et `toggle`.                         |
| `isLoading`       | `boolean`                            | `true` pendant que le panier effectue encore sa première récupération.                                 |

<Warning>
  `format` détermine quel gestionnaire s'applique : `handleAdd` pour `button`, `handleToggle` pour `checkbox` et `toggle`. Câbler le mauvais laisse le contrôle inerte pour les marchands qui ont choisi l'autre format.
</Warning>

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

<div id="text">
  ### Text
</div>

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** — l'intitulé de la protection. 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.

| Réglage            | Ce qu'il contrôle                      | Par 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.

| Réglage            | Ce qu'il contrôle                      | Par 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.

| Réglage            | Ce qu'il contrôle                      | Par 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     |

<Tip>
  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.
</Tip>

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