Overzicht

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.

Wat deze aanpassing doet

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.

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.

Stap 1: voeg custom HTML toe

Ga naar Upcart > Cart Editor > Settings > Custom HTML
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>

Legacy-opmerking: window.upcartOnCartLoaded-callbacks werken nog steeds, maar zijn verouderd en loggen consolewaarschuwingen. Gebruik upcartSubscribeCartLoaded voor alle nieuwe scripts.

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>

Stap 2: voeg custom CSS toe

Ga naar Upcart > Cart Editor > Settings > Custom CSS
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.

Eindresultaat

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

Hulp nodig?

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

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Voeg een verplicht selectievakje voor algemene voorwaarden toe aan je winkelwagen

Overzicht

Wat deze aanpassing doet

Stap 1: voeg custom HTML toe

Stap 2: voeg custom CSS toe

Eindresultaat

Hulp nodig?

​Overzicht

​Wat deze aanpassing doet

​Stap 1: voeg custom HTML toe

​Stap 2: voeg custom CSS toe

​Eindresultaat

​Hulp nodig?

Overzicht

Wat deze aanpassing doet

Stap 1: voeg custom HTML toe

Stap 2: voeg custom CSS toe

Eindresultaat

Hulp nodig?