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

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

> Exigez que les clients acceptent vos conditions avant de poursuivre vers le checkout.

<div id="overview">
  # Vue d'ensemble
</div>

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.

***

<div id="what-this-customization-does">
  ## Ce que fait cette personnalisation
</div>

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

<Warning>
  **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.
</Warning>

***

<div id="step-1-add-custom-html">
  ## Étape 1 : ajouter du HTML personnalisé
</div>

1. Allez dans **Upcart > Cart Editor > Settings > Custom HTML**
2. 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>
  **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.
</Note>

1. 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>
```

***

<div id="step-2-add-custom-css">
  ## Étape 2 : ajouter du CSS personnalisé
</div>

1. Allez dans **Upcart > Cart Editor > Settings > Custom CSS**
2. 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`.

***

<div id="final-result">
  ## Résultat final
</div>

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

***

<div id="need-help">
  ## Besoin d'aide ?
</div>

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](https://www.shopify.com/partners/directory)