Skip to main content
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.
Bloc Discount code avec champ de saisie et bouton Apply dans le tiroir du panier

Comportement

  • À 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.

Paramètres

Placement et limites

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

Modèle personnalisé

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

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. Que sont les paramètres de design ? Apprenez-en plus ici : Paramètres de design.