Checkbox in Shopify Warenkorb-Seite

Da man bei Shopify den Checkout nicht anpassen kann, ist oft die einzige/beste Alternative eine Funktion in den Warenkorb zu implementieren, statt in den Checkout. So wird es auch gerne mit Checkboxen für den Verzicht auf das Widerruf („Digitale Produkte“), das akzeptieren der Allgemeine Geschäftsbedingungen (AGB) und eine Menge anderer Dinge gemacht. Dieser Punkt wird oft bei der Tiefenprüfung der Rechtssicherheit von z.B. dem Händlerbund bemängelt.

Diese Anleitung zeigt, wie man eine Checkbox in den Warenkorb einbindet. Kunden müssen die Box anhaken um die Bestellung durchzuführen bzw. anzuschließen. Wenn man auf den „Auschecken“-Knopf drückt, und die Checkbox nicht angehakt wird, wird die Checkbox rot hervorgehoben.

Checkbox in Shopify Warenkorb

Wenn man diese Anleitung durchführt, muss man natürlich bedenken, dass die Warenkorb-Seite in den Theme-Einstellungen („Theme-Editor > Theme-Einstellungen > Warenkorb“ die Option „Warenkorbstil“ auf „Seite“ stellen) aktiviert ist und nicht der Modus „Popup“ oder „Einschub“ (auch „Card-Drawer“ genannt). Ist das nicht der Fall, können Kunden die Checkbox schlichtweg mit einem Klick auf einen anderen „Auschecken“-Knopf der keine Checkbox hat umgehen. Außerdem müssen die Express-Kauf-Einstellungen (z.B. „Dynamischer Checkout-Button“ in den Einstellungen der Produktseite ) deaktiviert werden, damit die Checkbox nicht umgangen werden kann. Eine Anleitung für die das Einbinden der Checkbox im Shopify Einschub bzw. Drawer haben wir natürlich auch.

Codeanpassungen: Checkbox in Warenkorb

Öffnen Sie den Code-Editor Ihres Themes.

Fügen Sie in der Datei „main-cart-footer.liquid“ am Ende der Datei folgenden Code 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 cartFormSubmit(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-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>

Fügen Sie Ebenfalls in der Datei „main-cart-footer.liquid“ über der Zeile

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

folgenden Zeilen ein:

<div class="caption-large rte right">
    <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>

Als letztes wird ebenfalls in der Datei „main-cart-footer.liquid“ noch das <form> Tag wie folgt angepasst:

<form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">

ändern in:

<form onSubmit="cartFormSubmit(event);" action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">

Nun sollte im Warenkorb eine Checkbox mit dem Text „Ich stimme den AGB zu.“ angezeigt werden. Den Text kann man natürlich je nach Anforderung anpassn.