> ## 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 Rewards
> Le bloc Rewards du panier Aftersell : livraison gratuite par paliers, réductions et cadeaux gratuits, y compris des paliers différents par marché, pays ou devise.
> Le bloc **Rewards** affiche une barre de progression vers des paliers de récompenses (livraison gratuite, réduction sur la commande ou cadeau gratuit) que les acheteurs débloquent en ajoutant plus d'articles à leur panier, encourageant des paniers plus gros en montrant aux acheteurs à quel point ils sont proches de la prochaine récompense et en accordant automatiquement les récompenses obtenues. Les paliers peuvent varier selon le marché, le pays et la devise.
## Validation des seuils de paliers
La liste de paliers de chaque condition contient jusqu'à **4** paliers. Un bloc Rewards avec plusieurs conditions de marché, de pays ou de devise stocke jusqu'à 4 paliers par condition, et comme la première condition correspondante est celle qui s'affiche, un même acheteur en voit au maximum 4. Le seuil de chaque palier doit être strictement supérieur à celui du palier précédent — les seuils doivent être en ordre croissant. Si le seuil d'un palier est égal ou inférieur au seuil du palier précédent, une erreur en ligne apparaît sur le champ de seuil de ce palier et le bouton **Save** est bloqué jusqu'à ce que le problème soit résolu. Le palier concerné se déplie automatiquement pour que l'erreur soit visible.
Par exemple, si le palier 1 est défini à \$100, le palier 2 doit être défini à \$101 ou plus.
## Comportement
* La progression **exclut** du total les lignes de cadeaux de récompense, les lignes d'options complémentaires, les lignes de protection d'expédition et les cartes cadeaux, afin que ces articles ne gonflent pas la progression de l'acheteur vers une récompense.
* Le message affiche le montant ou le nombre restant jusqu'au prochain palier, ou le message de complétion une fois tous les paliers atteints.
* **Les cadeaux gratuits sont accordés automatiquement.** Lorsqu'un acheteur atteint un palier de cadeau, le cadeau est ajouté au panier ; s'il redescend en dessous, le cadeau est retiré. Avec les récompenses cumulables désactivées, seul le cadeau du palier le plus élevé atteint est accordé.
* **Add back removed free gifts** contrôle ce qui se passe lorsqu'un acheteur retire manuellement un cadeau accordé automatiquement. Lorsqu'il est activé (par défaut), le cadeau est automatiquement rajouté à la prochaine mise à jour du panier. Lorsqu'il est désactivé, la suppression est respectée et le cadeau reste hors du panier pour le reste de cette session, afin que les acheteurs ne se battent pas contre le panier pour refuser un cadeau.
## Paramètres
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
| **Rewards calculation** | Si la progression est mesurée par **Cart total (\$)** ou **Cart quantity (#)**. | Cart total (\$) |
| **Stack rewards across tiers** | Activé : applique chaque récompense débloquée par l'acheteur, jusqu'au palier le plus élevé atteint. Désactivé : applique uniquement la récompense du palier le plus élevé débloqué. | Activé |
| **Add back removed free gifts** | Rajoute un cadeau gratuit obtenu après que l'acheteur l'a retiré. | Activé |
| **Show tier icons** | Si les icônes de paliers apparaissent sur la barre. | Activé |
| **Show tier labels** | Si le texte du libellé apparaît sur chaque marqueur de palier de la barre. | Désactivé |
| **Text after completing full rewards bar** | Texte enrichi affiché une fois tous les paliers atteints. | `All rewards unlocked!` |
| **Tiers** | Les paliers de récompenses (ci-dessous). Jusqu'à **4** par condition ; le panneau affiche un compteur `n/4` et désactive **Add tier** une fois la limite atteinte. | Aucun |
Chaque **palier** se déplie pour afficher :
| Paramètre de palier | Ce qu'il contrôle | Défaut |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| **Reward type** | **Free shipping**, **Order discount** ou **Free gift**. Le changer réinitialise le titre et le libellé de barre de progression de ce palier avec le texte par défaut du nouveau type. | Free shipping |
| **Threshold (\$)** / **Threshold (items)** | Le total du panier ou le nombre d'articles qui débloque le palier. Le libellé suit **Rewards calculation**. Minimum `1`. | `50` |
| **Discount value type** | Réductions sur la commande uniquement : **Percentage (%)** ou **Fixed amount (\$)**. | Percentage (%) |
| **Percentage off** / **Amount off** | Réductions sur la commande uniquement : le montant de la réduction. Les pourcentages sont plafonnés à 100. | `10` |
| **Title before achieving tier** | Message en texte enrichi affiché tant que l'acheteur n'a pas encore atteint le palier. Prend en charge le jeton `{{amount}}`. | `You're {{amount}} away from free shipping!` |
| **Progress bar label** | Le libellé affiché sur le marqueur de palier. | `Free shipping` |
| **Gift products** | Cadeaux gratuits uniquement : le(s) produit(s)/variante(s) accordé(s), jusqu'à **3** par palier. | Aucun |
## Placement et limites
* **Région :** n'importe laquelle (haut, corps ou bas).
* **Maximum :** 1 par état de panier. Le panier rempli et le panier vide ont chacun le leur.
* **État :** panier rempli et panier vide.
* Non ajouté par défaut. Non verrouillé, vous pouvez donc le supprimer ou le masquer.
## Récompenses par marché
Rewards est aujourd'hui le bloc doté de l'interface **Conditions** complète : définissez plusieurs ensembles de paliers, chacun ciblant un **marché Shopify**, un **pays du client** ou une **devise du client** (**In** ou **Not in**). La première condition correspondante est montrée à l'acheteur. Si aucune ne correspond, le bloc n'affiche rien pour lui.
Chaque condition est une carte dans le panneau de paramètres (**When** + condition). En dessous, une section **Display** contient les paliers de cette condition. Gardez les règles spécifiques au-dessus d'une règle générale **All buyers**. L'ordre est une priorité, pas une combinaison de toutes les correspondances.
Vous ne pouvez pas supprimer la dernière condition (au moins une est toujours requise). L'aperçu de l'éditeur n'évalue pas l'acheteur réel ; sélectionnez une condition dans le panneau pour prévisualiser cette variante.
Pour la relation entre les conditions, l'interrupteur en forme d'œil et les autres blocs, consultez [Afficher ou masquer par marché, pays ou devise](/fr/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency).
## 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.
| Prop | Type | À quoi elle sert |
| -------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `milestones` | `Milestone[]` | Les paliers de récompenses, dans l'ordre. Voir ci-dessous. |
| `rewardsMessageHtml` | `string` | Le message de progression ou de complétion sous forme de HTML assaini. |
| `showIcons` | `boolean` | Indique si le marchand a activé les icônes de paliers. |
| `showTierLabels` | `boolean` | Indique si le marchand a activé les libellés de la barre de paliers. |
| `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. |
Chaque `Milestone` :
| Champ | Type | À quoi il sert |
| ----------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | Clé stable pour le palier. Utilisez-la comme `key` React. |
| `label` | `string` | Le libellé du palier, en texte brut. |
| `icon` | `ReactElement \| null` | Élément d'icône pré-rendu. `null` lorsque le palier n'en a pas. Affichez-le directement : `{m.icon}`. |
| `isCompleted` | `boolean` | Indique si le panier a atteint ce palier. |
| `positionPercent` | `number` | Niveau de remplissage du **segment propre à ce palier** sur la barre, de `0` à `100`. Ce n'est pas une position le long d'une barre partagée unique. |
```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function Rewards(props) {
return (
{props.milestones.map((milestone) => (
// Each tier gets its own track; positionPercent (0-100) fills that track.
{props.showIcons && milestone.icon ? milestone.icon : null}
{props.showTierLabels && milestone.label !== '' ? milestone.label : null}
))}
);
}
```
`m.icon` est un **élément pré-rendu**, pas une URL ni un nom d'icône, donc affichez-le directement plutôt que d'essayer de construire un élément image à partir de lui.
`milestones` n'est jamais vide dans un modèle personnalisé. Lorsqu'il n'y a aucun palier à afficher, le bloc n'affiche rien et votre modèle n'est pas appelé du tout, vous n'avez donc pas besoin d'une branche d'état vide.
## 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 des éléments de texte des récompenses. Utilisez le sélecteur **Text element** pour basculer entre eux.
**Message** — le message de progression ou de complétion. 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 message. | Héritée du thème |
| **Size** | La taille de la police. | `14px` |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.43` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
**Tier label** — le libellé affiché sur chaque marqueur de palier. Disponible uniquement lorsque **Show tier labels** est activé.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | ------------------------------------------------------------------- | --------------------------- |
| **Text color** | La couleur du libellé de palier. | Couleur de texte secondaire |
| **Size** | La taille de la police. | `13px` |
| **Weight** | La graisse de la police — Light, Regular, Medium, Semibold ou Bold. | Regular (400) |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.2` |
| **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).