Vue d’ensemble

Ce tutoriel vous montre comment ajouter une case à cocher sous le bouton de checkout qui exige que les clients acceptent les conditions générales de votre boutique. Lorsqu’elle n’est pas cochée, les boutons de checkout et de paiement express sont désactivés. C’est un excellent moyen de garantir la conformité légale, de définir des attentes claires et d’ajouter du professionnalisme à votre expérience de panier.

Ce que fait cette personnalisation

Ajoute une case à cocher de conditions générales sous le bouton de checkout
Empêche les clients de passer au checkout tant qu’ils n’ont pas accepté
Bloque le bouton de checkout standard. Sur la Version 1 du module de paiements express, elle grise également les boutons express — voir la note ci-dessous si vous êtes sur la Version 2
Prend en charge un texte et un lien entièrement personnalisables

Cette personnalisation nécessite des bases en HTML, JavaScript et CSS. Elle convient mieux aux propriétaires de boutiques ou aux développeurs ayant des connaissances de codage de niveau débutant.

La partie concernant les boutons express ne s’applique qu’à la Version 1. Le script recherche #upcart-additional-checkout-buttons et le CSS stylise .upcart-express-pay-button — les deux appartiennent au module de paiements express de la Version 1. La Version 2 affiche #upcart-express-payments et clone les propres boutons de Shopify, qui ne portent aucun de ces sélecteurs : le checkout express reste donc cliquable même lorsque la case n’est pas cochée. Le bouton de checkout standard est bloqué sur les deux versions.

Étape 1 : ajouter du HTML personnalisé

Allez dans Upcart > Cart Editor > Settings > Custom HTML
Collez le code suivant dans Above announcements/rewards :

<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>

Note sur l’ancien système : les callbacks window.upcartOnCartLoaded fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez upcartSubscribeCartLoaded pour tous les nouveaux scripts.

Collez le code suivant dans Below checkout button. Mettez à jour le lien et le texte pour qu’ils correspondent aux conditions de votre boutique :

<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>

Étape 2 : ajouter du CSS personnalisé

Allez dans Upcart > Cart Editor > Settings > Custom CSS
Collez le code suivant pour contrôler le style :

.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}

Vous pouvez modifier les couleurs pour correspondre à votre image de marque en mettant à jour les valeurs color, background-color et opacity.

Résultat final

Lorsque les clients ouvrent le panier :

Les boutons de checkout et express sont désactivés jusqu’à ce que la case soit cochée
Un message d’avertissement rouge apparaît s’ils essaient de continuer sans accepter
Une fois la case cochée, tous les boutons deviennent actifs

Besoin d’aide ?

Pour des implémentations avancées ou des besoins plus complexes, nous vous recommandons de travailler avec un Shopify Expert. L’équipe de support d’Upcart n’aide pas à écrire ou à déboguer du code personnalisé. Voir les Shopify Experts

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Ajouter une case à cocher obligatoire de conditions générales à votre panier

Vue d’ensemble

Ce que fait cette personnalisation

Étape 1 : ajouter du HTML personnalisé

Étape 2 : ajouter du CSS personnalisé

Résultat final

Besoin d’aide ?

​Vue d’ensemble

​Ce que fait cette personnalisation

​Étape 1 : ajouter du HTML personnalisé

​Étape 2 : ajouter du CSS personnalisé

​Résultat final

​Besoin d’aide ?

Vue d’ensemble

Ce que fait cette personnalisation

Étape 1 : ajouter du HTML personnalisé

Étape 2 : ajouter du CSS personnalisé

Résultat final

Besoin d’aide ?