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

# Voeg een verplicht selectievakje voor algemene voorwaarden toe aan je winkelwagen

> Vereis dat klanten akkoord gaan met je voorwaarden voordat ze doorgaan naar de checkout.

<div id="overview">
  # Overzicht
</div>

Deze tutorial laat zien hoe je onder de checkout-knop een selectievakje toevoegt dat klanten verplicht om akkoord te gaan met de algemene voorwaarden van je winkel. Zolang het niet is aangevinkt, zijn de checkout- en express-betaalknoppen uitgeschakeld.

Dit is een uitstekende manier om juridische naleving te waarborgen, duidelijke verwachtingen te scheppen en je winkelwagenervaring professioneler te maken.

***

<div id="what-this-customization-does">
  ## Wat deze aanpassing doet
</div>

* Voegt een selectievakje voor algemene voorwaarden toe onder de checkout-knop
* Voorkomt dat klanten kunnen afrekenen totdat ze akkoord gaan
* Blokkeert de standaard checkout-knop. Op **Version 1** van de express payments-module worden de express-knoppen ook grijs gemaakt — zie de opmerking hieronder als je Version 2 gebruikt
* Ondersteunt volledig aanpasbare tekst en link

Deze aanpassing vereist basiskennis van HTML, JavaScript en CSS. Het is het meest geschikt voor winkeleigenaren of ontwikkelaars met beginnende programmeerkennis.

<Warning>
  **Het express-knop-gedeelte werkt alleen op Version 1.** Het script zoekt naar `#upcart-additional-checkout-buttons` en de CSS stylet `.upcart-express-pay-button` — beide horen bij de Version 1 express payments-module. Version 2 rendert `#upcart-express-payments` en kloont de eigen knoppen van Shopify, die geen van beide selectors dragen, waardoor express checkout klikbaar blijft, zelfs als het vakje niet is aangevinkt. De standaard checkout-knop wordt op beide versies geblokkeerd.
</Warning>

***

<div id="step-1-add-custom-html">
  ## Stap 1: voeg custom HTML toe
</div>

1. Ga naar **Upcart > Cart Editor > Settings > Custom HTML**
2. Plak het volgende in **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>
  **Legacy-opmerking:** `window.upcartOnCartLoaded`-callbacks werken nog steeds, maar zijn verouderd en loggen consolewaarschuwingen. Gebruik `upcartSubscribeCartLoaded` voor alle nieuwe scripts.
</Note>

1. Plak het volgende in **Below checkout button**. Pas de link en tekst aan zodat ze overeenkomen met de voorwaarden van je winkel:

```
<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">
  ## Stap 2: voeg custom CSS toe
</div>

1. Ga naar **Upcart > Cart Editor > Settings > Custom CSS**
2. Plak het volgende om de styling te bepalen:

```
.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;  
}
```

Je kunt de kleuren aanpassen aan je huisstijl door de waarden van `color`, `background-color` en `opacity` te wijzigen.

***

<div id="final-result">
  ## Eindresultaat
</div>

Wanneer klanten de winkelwagen openen:

* Zijn de checkout- en express-knoppen uitgeschakeld totdat het selectievakje is aangevinkt
* Verschijnt er een rode waarschuwing als ze proberen door te gaan zonder akkoord te gaan
* Worden alle knoppen actief zodra het vakje is aangevinkt

***

<div id="need-help">
  ## Hulp nodig?
</div>

Voor geavanceerde implementaties of complexere vereisten raden we aan om samen te werken met een **Shopify Expert**. Het supportteam van Upcart helpt niet bij het schrijven of troubleshooten van custom code.

[Bekijk Shopify Experts](https://www.shopify.com/partners/directory)