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

# Comment fonctionnent les blocs ?

> Comprenez les blocs de l'Aftersell Cart : sections et sous-blocs, panier rempli vs vide, limites, blocs verrouillés, conditions et paramètres par bloc.

La mise en page de votre panier est une pile de **blocs** : des éléments configurables que vous ajoutez, réorganisez, stylisez et personnalisez dans l'éditeur de panier. Les blocs que vous incluez, et dans quel ordre, constituent le panier que voient les acheteurs.

Pour savoir comment les blocs s'insèrent dans les **états** et les **sections**, consultez [Comment fonctionnent les paniers ?](/fr/aftersell/cart/how-carts-work).

<div id="blocks-and-sub-blocks">
  ## Blocs et sous-blocs
</div>

Il existe deux types de blocs :

* Les **blocs** se placent directement dans le panier, dans l'une des trois sections : **Header**, **Body** ou **Footer**. Chaque section propose un ensemble de blocs différent.
* Les **sous-blocs** s'imbriquent dans un autre bloc. Aujourd'hui, seul [**Cart items**](/fr/aftersell/cart/cart-items-block) héberge des sous-blocs : la ligne **Product** (la ligne d'article elle-même), [**Subscription upgrade**](/fr/aftersell/cart/subscription-upgrade-block) et [**Custom code**](/fr/aftersell/cart/custom-code-blocks).

<div id="adding-reordering-and-removing-blocks">
  ## Ajouter, réorganiser et supprimer des blocs
</div>

* **Ajoutez** un bloc avec le sélecteur **Add block**. Un bloc est grisé s'il ne peut pas aller là où vous l'ajoutez, ou si vous avez atteint sa limite (le sélecteur affiche un badge `count/max`).
* **Réorganisez** en faisant glisser un bloc au sein de sa section.
* **Supprimez** avec l'icône corbeille, sauf pour les blocs verrouillés (ci-dessous).
* **Affichez/masquez** la plupart des blocs avec le bouton en forme d'œil, qui masque un bloc aux acheteurs sans le supprimer. Quelques blocs structurels ne peuvent pas être masqués : **Cart items**, **Checkout button** et la ligne **Product**.

<div id="locked-blocks">
  ## Blocs verrouillés
</div>

Certains blocs peuvent être réorganisés mais pas supprimés, afin que le comportement fondamental du panier (par exemple, le passage au paiement) ne puisse pas être retiré par accident :

* **Cart items**
* **Checkout button**

<div id="default-blocks">
  ## Blocs par défaut
</div>

Les nouveaux paniers démarrent avec une mise en page par défaut fonctionnelle :

* **Panier rempli :** Header, Banner, Cart items, Summary, Checkout button
* **Panier vide :** Header, bloc Empty cart

<Info>
  L'**état de panier vide** est la mise en page vide dans son ensemble. Le **bloc Empty cart** est un bloc à l'intérieur de celle-ci. Consultez [Comment fonctionnent les paniers ?](/fr/aftersell/cart/how-carts-work) pour la différence.
</Info>

<div id="how-many-of-each-block-you-can-add">
  ## Combien de blocs de chaque type vous pouvez ajouter
</div>

Les limites sont comptées **par état de panier**, pas par panier. Le panier rempli et le panier vide ont chacun leur propre quota, donc un panier peut contenir trois Banners dans sa mise en page remplie et trois de plus dans sa mise en page vide.

La plupart des blocs sont limités à un par état. Les exceptions :

| Bloc           | Maximum par état de panier |
| -------------- | -------------------------- |
| Banner         | 3                          |
| Image          | 3                          |
| Product add-on | 3                          |
| Summary        | 2                          |
| Custom code    | Illimité                   |

<div id="content-design-and-code">
  ## Content, Design et Code
</div>

Chaque bloc se configure via jusqu'à trois surfaces dans l'éditeur :

* **Content** : les paramètres du bloc (texte, choix de produits, seuils, etc.). Le bloc **Custom code** est la seule exception : il n'a pas de panneau Content car le bloc *est* le code.
* **Design** : un style par bloc qui se superpose à vos [**paramètres de design**](/fr/aftersell/cart/design-settings) globaux. Chaque bloc en possède un, sauf **Custom code**, qui n'a aucun panneau de paramètres.
* **Code** : remplacez le rendu intégré du bloc par un [**modèle personnalisé**](/fr/aftersell/cart/custom-templates). La plupart des blocs le prennent en charge ; quelques-uns non.

<div id="show-or-hide-by-market-country-or-currency">
  ## Afficher ou masquer par marché, pays ou devise
</div>

Certains blocs peuvent afficher des paramètres différents, ou se masquer entièrement, selon qui est l'acheteur. C'est distinct du **bouton en forme d'œil** de la barre latérale, qui active ou désactive un bloc pour tout le monde.

|                   | **Bouton œil**                                          | **Conditions**                                                        |
| ----------------- | ------------------------------------------------------- | --------------------------------------------------------------------- |
| **Ce qu'il fait** | Masque ou affiche tout le bloc pour tous les acheteurs  | Choisit quelle variante de paramètres un acheteur voit (ou rien)      |
| **Basé sur**      | Votre choix dans l'éditeur                              | Le marché Shopify, le pays du client ou la devise du client           |
| **Où**            | Icône œil de la barre latérale sur la plupart des blocs | Panneau de paramètres pour les blocs prenant en charge les conditions |

**Types de conditions pris en charge aujourd'hui :** marché Shopify, pays du client et devise du client (chacun avec **In** ou **Not in**). Le total du panier et le contenu du panier ne sont **pas** des types de conditions. Utilisez les seuils de paliers de [Rewards](/fr/aftersell/cart/rewards-block) pour la progression en dépenses/quantité, ou le [Cart SDK](/fr/aftersell/cart/sdk-overview) lorsque vous avez besoin d'une règle que l'éditeur ne peut pas exprimer.

Les conditions forment une liste ordonnée : la **première condition correspondante** l'emporte. Placez les règles spécifiques au-dessus d'un fourre-tout **All buyers**. Si rien ne correspond, le bloc n'affiche rien pour cet acheteur.

**Dans l'éditeur aujourd'hui**, l'interface Conditions complète est disponible sur le bloc [**Rewards**](/fr/aftersell/cart/rewards-block#per-market-rewards) : des ensembles de paliers différents par marché, pays ou devise. Les autres blocs utilisent soit une configuration unique « tous les acheteurs », soit ne participent pas encore à ce système.

L'aperçu de l'éditeur n'évalue **pas** l'acheteur en direct. Sélectionnez une condition dans le panneau pour prévisualiser cette variante.

<div id="all-blocks">
  ## Tous les blocs
</div>

**Structure**

* [Header](/fr/aftersell/cart/header-block) : titre, nombre d'articles, logo et contrôle de fermeture, épinglé en haut.
* [Cart items](/fr/aftersell/cart/cart-items-block) : les articles que les clients ajoutent au panier ; se répète par ligne.
* [Subscription upgrade](/fr/aftersell/cart/subscription-upgrade-block) : sous-bloc qui propose de convertir une ligne en abonnement.
* [Summary](/fr/aftersell/cart/summary-block) : totaux, économies et remises appliquées.
* [Checkout button](/fr/aftersell/cart/checkout-button-block) : l'appel à l'action principal vers le paiement.
* [Empty cart](/fr/aftersell/cart/empty-cart-block) : le contenu affiché lorsque le panier est vide.
* [Express payments](/fr/aftersell/cart/express-payments-block) : boutons de paiement accéléré (Shop Pay, PayPal, etc.) à l'intérieur du panier.

**Merchandising**

* [Upsells](/fr/aftersell/cart/upsells-block) : recommandations de produits choisies par stratégie.
* [Product add-on](/fr/aftersell/cart/product-add-on-block) : un produit spécifique unique proposé en supplément.
* [Rewards](/fr/aftersell/cart/rewards-block) : récompenses par paliers comme la livraison gratuite ou des cadeaux.
* [Shipping protection](/fr/aftersell/cart/shipping-protection-block) : un supplément de protection d'expédition en option.

**Saisie de l'acheteur**

* [Discount code](/fr/aftersell/cart/discount-code-block) : un champ pour appliquer un code de réduction.
* [Notes](/fr/aftersell/cart/notes-block) : un champ de notes de commande.

**Contenu**

* [Banner](/fr/aftersell/cart/banner-block) : une bannière de message, avec un compte à rebours facultatif.
* [Image](/fr/aftersell/cart/image-block) : une image unique ou un préréglage hébergé comme les icônes de paiement.
* [Custom code](/fr/aftersell/cart/custom-code-blocks) : du HTML ou du React personnalisé n'importe où dans le panier.

**Extension**

* [Custom templates](/fr/aftersell/cart/custom-templates) : remplacez le rendu de n'importe quel bloc depuis son onglet Code.

<div id="blocks-available-in-each-section">
  ## Blocs disponibles dans chaque section
</div>

Chaque section dispose d'un ensemble de blocs différent. Cela garde la mise en page ciblée et réduit l'encombrement.

| Section    | Blocs disponibles                                                                                                                                   |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Header** | Header, Banner, Rewards, Image, Custom code                                                                                                         |
| **Body**   | Banner, Notes, Discount code, Cart items, Empty cart, Custom code, Rewards, Product add-on, Shipping protection, Image, Upsells                     |
| **Footer** | Banner, Notes, Discount code, Custom code, Rewards, Product add-on, Shipping protection, Express payments, Image, Upsells, Summary, Checkout button |

Certains de ces blocs sont spécifiques à un état (par exemple Empty cart uniquement dans l'état vide). Consultez [Comment fonctionnent les paniers ?](/fr/aftersell/cart/how-carts-work).

<div id="block-validation-errors">
  ## Erreurs de validation des blocs
</div>

Si les paramètres d'un bloc contiennent une valeur invalide, un petit point rouge apparaît à côté du nom de ce bloc dans la barre latérale. Le point reste jusqu'à ce que vous corrigiez le problème. Ce n'est pas une notification que l'on peut faire disparaître.

Tant qu'un bloc comporte une erreur, **l'enregistrement est bloqué**. Le bouton **Save** reste cliquable, mais le sélectionner affiche un toast d'erreur (*"Fix the errors in your cart blocks before saving"*) et vous amène au premier bloc problématique, en ouvrant ses paramètres pour que vous puissiez corriger le champ mis en évidence. **Publish** exige en plus qu'il n'y ait aucun changement non enregistré, il reste donc indisponible tant qu'un enregistrement sans erreur n'a pas réussi.

Une fois le champ invalide corrigé, le point disparaît de lui-même et l'enregistrement se déroule normalement.

<Note>
  Les blocs masqués sont tout de même validés. Un bloc que vous avez masqué peut contenir un paramètre invalide, afficher un point d'erreur et bloquer l'enregistrement exactement comme un bloc visible ; donc si l'enregistrement est bloqué et que tous les blocs visibles semblent corrects, vérifiez vos blocs masqués.
</Note>
