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.
- À 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, pas ici.
- 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.
Prend en charge un modèle personnalisé depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu’il reçoit.
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é.
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.