> ## 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 Discount code

> Le bloc Discount code du panier Aftersell — permettez aux acheteurs de saisir et d'appliquer un code de réduction avant le paiement.

> Le bloc **Discount code** est un champ de saisie où les acheteurs peuvent saisir et appliquer un code promo dans le panier, afin de voir la réduction reflétée avant de passer au paiement.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-discount-code-block-input-apply.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=ac5730766b756fdf99c2fc9f65ac202b" alt="Bloc Discount code avec champ de saisie et bouton Apply dans le tiroir du panier" width="1314" height="230" data-path="images/aftersell/cart-discount-code-block-input-apply.png" />
</Frame>

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

* À l'application, le code est nettoyé des espaces, passé en majuscules et soumis à Shopify. Comme Shopify accepte la requête que le code soit valide ou non, le bloc revérifie ensuite le panier pour confirmer que le code s'est réellement appliqué.
  * **Valide** → le champ se vide et la réduction s'applique.
  * **Invalide** → le bloc affiche « Invalid discount code. »
* La façon dont un code se cumule avec d'autres réductions (réductions automatiques, autres codes) est entièrement gérée par Shopify — le bloc ne fait qu'appliquer le code.
* Les codes appliqués sont affichés dans le bloc [**Summary**](/fr/aftersell/cart/summary-block), pas ici.

<div id="settings">
  ## Paramètres
</div>

| Paramètre       | Ce qu'il contrôle                                | Défaut          |
| --------------- | ------------------------------------------------ | --------------- |
| **Placeholder** | Le texte indicatif du champ. Traduisible.        | `Discount code` |
| **Button text** | Le libellé du bouton d'application. Traduisible. | `Apply`         |

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

* **Région :** corps ou bas.
* **Maximum :** 1 par état de panier. Le panier rempli et le panier vide ont chacun leur propre quota.
* **État :** rempli et vide.
* Non ajouté par défaut. Non verrouillé — vous pouvez le supprimer 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                                                                                                      |
| ---------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `discountCodeInput`    | `string`                  | Valeur actuelle du champ.                                                                                             |
| `placeholder`          | `string`                  | Texte indicatif affiché dans le champ vide.                                                                           |
| `buttonText`           | `string`                  | Libellé du bouton d'application.                                                                                      |
| `isValidating`         | `boolean`                 | `true` pendant la vérification d'un code soumis. Désactivez votre contrôle de soumission en fonction de cette valeur. |
| `isInvalid`            | `boolean`                 | `true` lorsque le dernier code soumis a été rejeté.                                                                   |
| `setDiscountCodeInput` | `(value: string) => void` | Met à jour la valeur du champ.                                                                                        |
| `handleSubmit`         | `(event: Event) => void`  | Soumet le code actuel.                                                                                                |
| `isLoading`            | `boolean`                 | `true` pendant que le panier effectue encore sa première requête.                                                     |

<Warning>
  Connectez à la fois `setDiscountCodeInput` et `handleSubmit`. Sans le premier, il est impossible de taper dans le champ ; sans le second, aucun code n'est jamais appliqué.
</Warning>

<div id="design">
  ## Design
</div>

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.

Que sont les paramètres de design ? Apprenez-en plus ici : [Paramètres de design](/fr/aftersell/cart/design-settings).