Checkbox in Shopify Warenkorb-Einschub „Drawer“

Da es bei Shopify nicht möglich ist, den Checkout anzupassen, ist es häufig die beste Option, eine Funktion im Warenkorb zu implementieren, anstatt im Checkout. Eine Möglichkeit ist es, Checkboxen einzubauen, damit der Kunde auf sein Widerrufsrecht verzichten kann (z.B. bei digitalen Produkten), die Allgemeinen Geschäftsbedingungen akzeptiert und andere Dinge bestätigt. Dieser Aspekt wird oft bei der Prüfung der Rechtssicherheit von Organisationen wie dem Händlerbund kritisiert.

Zunächst muss man, den Cart aud „Drawer“ stellen, wenn dieses nicht bereits geschehen ist. Dieses kann man im Theme-Editor unter Theme-Einstellungen > Warenkorb indem man „Warenkorbstil“ auf „Einschub“ stellt.

Folgende Anpassungen binden die Checkbox wie im folgenden Screenshot ein. Beim Absenden des Formular (ohne anhaken der Checkbox) wackelt die Checkbox mit dem Label und wird rot gekennzeichnet, damit der Kunde versteht, dass er ohne akzeptieren der Checkbox den Checkout nicht abschließen kann.

Öffnen Sie den Shopify Code-Editor und fügen Sie in der Datei /snippets/cart-drawer.liquid folgenden Code am Ende der Datei hinzu:

<script> 
function onCheckboxClick(){ 
  var cart_check = document.getElementById('agree');
  var cart_warning = document.getElementById('checkout-alert-label');

  if (cart_check.checked) {  
    cart_warning.style.color = "inherit";
    document.querySelector('#checkout-alert-label a').style.color = "inherit";
    cart_check.classList.remove("error-shadow");      
  } else {     
    cart_check.classList.add("error-shadow");    
    document.querySelector('#checkout-alert-label a').style.color = "red";
    cart_warning.style.color = "red";
  }
};
  
function cartDrawerFormSubmit(e) {
  	var cart_check = document.getElementById('agree');
  	var cart_warning = document.getElementById('checkout-alert-label');
    	   
  	if (cart_check.checked) {  
      	cart_warning.style.color = "inherit";  
      	document.querySelector('#checkout-alert-label a').style.color = "inherit";
    	cart_check.classList.remove("error-shadow"); 
      	cart_warning.classList.remove("shake");
    } else {
      	e.preventDefault();     
        cart_check.classList.add("error-shadow");
      	cart_warning.classList.add("shake");
        cart_warning.style.color = "red"; 
      	document.querySelector('#checkout-alert-label a').style.color = "red";
      	setTimeout(function(){
        	cart_warning.classList.remove('shake');
        },1800)
        return false;  
    }  	
}; 
</script>

<style>
.error-shadow { box-shadow: inset 0px 0px 1px 2px red; -moz-box-shadow: inset 0px 0px 1px 2px red; -webkit-box-shadow: inset 0px 0px 1px 2px red;  }
#checkout-alert { position: fixed; top: 90px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; background: #ff8f8f; padding: 15px; color: #fff; border: 2px solid #f00; z-index: 1100; }
#checkout-alert-label { position: fixed; margin-right: 10px; margin-left: 5px; margin-top: -2px; }  
#checkout-alert-label a { color: inherit; }
#checkout-alert-label:hover { cursor: pointer; } 
#agree:hover { cursor: pointer; } 
.shake { animation: shakeThat .8s ease-in-out forwards; }

@keyframes shakeThat {
  25% {
    transform:translateX(6px)
  }
  50% {
    transform:translateX(-4px);
  }
  75% {
    transform:translateX(2px);
  }
  100% {
    transform:translateX(0);
  }
}
</style>

In derselben Datei suchen Sie nun nach dem sich öffnenden <form> Tag und passen Sie dieses wie folgt an:

<form onSubmit="cartDrawerFormSubmit(event);" action="{{ routes.cart_url }}" id="CartDrawer-Form" class="cart__contents cart-drawer__form" method="post">

Fügen Sie in der Datei oberhalb dieser Zeile:

<div class="cart__ctas" {{ block.shopify_attributes }}>

folgenden HTML Block hinzu:

<div class="tax-note caption-large rte">
    <input type="checkbox" id="agree" onclick="onCheckboxClick()"/>
    <label id="checkout-alert-label" for="agree">Ich stimme den <a href="/policies/terms-of-service" target="_blank" style="text-decoration: underline;">AGB</a> zu.</label>
</div> 

Vergessen Sie nicht alles ausführlich zu testen, eine Fehlfunktion könnte schließlich dazu führen, dass Kunden nicht mehr bei Ihnen bestellen können. Ebenfalls sollten Sie sicher stellen, dass Kunden nicht ohne den Drawer in den Checkout oder auf die Warenkorb-Seite navigieren können. Im Zweifel sollte also die identische Anpassung auch in der Warenkorb-Seite implementiert werden. Die Anleitung für Checkboxen in der Shopify Warenkorb-Seite haben wir natürlich ebenfalls.