> ## 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 récapitulatif

> Le bloc Summary d'Aftersell Cart : totaux, économies et codes de réduction appliqués.

> Le bloc **Summary** montre au client ce qu'il paiera : une ligne de total avec économies optionnelles, plus les étiquettes de réduction appliquées. Il récapitule les totaux et économies du panier juste au-dessus du bouton de paiement, afin que les clients voient le montant final avant de s'engager.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=455f22040697c41fd1e02a870e9cccf8" alt="Bloc Summary affichant le sous-total, les économies et les réductions appliquées avant le paiement" width="1368" height="250" data-path="images/aftersell/cart-summary-block-subtotal-savings-applied-discounts.png" />
</Frame>

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

* **Les jetons d'économies se replient élégamment.** Si une cellule référence `{{savings}}` ou `{{pre_savings_price}}` mais que le panier n'a aucune économie, cette cellule retombe sur `{{total_price}}` seul, afin que les clients ne voient jamais « \$0.00 off » ni un prix barré égal au total. Si vous combinez `{{cart_item_count}}` et `{{savings}}` dans la même cellule, le nombre d'articles est lui aussi supprimé dans le repli sans économies — placez-les dans des cellules séparées pour éviter cela.
* Les étiquettes de réduction n'apparaissent que lorsque **Show discount codes** est activé *et* que le panier a des réductions à lister. Cela inclut à la fois les réductions basées sur un code et les réductions automatiques.

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

| Réglage                 | Ce qu'il contrôle                                                                                                                               | Par défaut                            |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Left text**           | La cellule gauche de la ligne de total. Texte enrichi avec jetons. Exemple : `Subtotal ({{cart_item_count}} items)`.                            | `Subtotal`                            |
| **Right text**          | La cellule droite. Texte enrichi avec jetons (total, prix avant économies barré, économies, nombre d'articles).                                 | Total avec balisage d'économies barré |
| **Savings format**      | Afficher les économies en `percent` entier ou en montant `absolute`.                                                                            | `percent`                             |
| **Show discount codes** | Si les étiquettes de réduction appliquées apparaissent. Cela inclut à la fois les réductions basées sur un code et les réductions automatiques. | Activé                                |

Les cellules de texte prennent en charge les jetons `{{cart_item_count}}`, `{{total_price}}`, `{{pre_savings_price}}` et `{{savings}}`.

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

* **Région :** bas.
* **Maximum :** 2 par état de panier. Le panier rempli et le panier vide ont chacun leur propre quota.
* **État :** panier rempli et panier vide.
* Ajouté aux nouveaux paniers par défaut. Non verrouillé, vous pouvez donc 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                                                                                                                         |
| ------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `leftHtml`          | `string`   | La cellule gauche en HTML assaini, avec les jetons résolus.                                                                              |
| `rightHtml`         | `string`   | La cellule droite en HTML assaini, avec les jetons résolus.                                                                              |
| `discountCodes`     | `string[]` | Intitulés de réductions appliquées au panier (basées sur un code et automatiques). `[]` lorsqu'il n'y en a pas.                          |
| `showDiscountCodes` | `boolean`  | Si le marchand souhaite lister les étiquettes de réduction **et** que le panier a des réductions à lister.                               |
| `hasSavings`        | `boolean`  | `true` lorsque le panier a une économie. Utilisez-la pour masquer votre propre ligne d'économies.                                        |
| `totalPrice`        | `string`   | Total du panier, déjà formaté.                                                                                                           |
| `preSavingsPrice`   | `string`   | Total avant économies, déjà formaté.                                                                                                     |
| `savings`           | `string`   | Montant économisé. Déjà formaté, **ou un pourcentage** comme `15%`, selon le réglage de format d'économies du marchand.                  |
| `itemCount`         | `number`   | Unités totales dans le panier — la somme des quantités des lignes visibles, hors ligne de protection d'expédition.                       |
| `isLoading`         | `boolean`  | Toujours `false` ici : le bloc affiche son squelette intégré pendant le chargement et n'appelle votre modèle qu'une fois le panier prêt. |

<Warning>
  Comme `savings` peut être soit un montant soit un pourcentage, ne construisez pas votre propre phrase autour d'elle en supposant l'un des deux. `{props.savings}` seul est sûr ; `You saved ${props.savings}` ne l'est pas.
</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.

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