Überblick

Dieses Tutorial zeigt dir, wie du unterhalb des Checkout-Buttons ein Kontrollkästchen hinzufügst, mit dem Kunden den Allgemeinen Geschäftsbedingungen deines Stores zustimmen müssen. Solange es nicht angekreuzt ist, sind der Checkout-Button und die Express-Payment-Buttons deaktiviert. Das ist eine großartige Möglichkeit, rechtliche Compliance sicherzustellen, klare Erwartungen zu setzen und deinem Warenkorb-Erlebnis Professionalität zu verleihen.

Was diese Anpassung bewirkt

Fügt ein AGB-Kontrollkästchen unter dem Checkout-Button hinzu
Verhindert, dass Kunden zum Checkout gelangen, bis sie zustimmen
Blockiert den Standard-Checkout-Button. In Version 1 des Express-Payments-Moduls werden zusätzlich die Express-Buttons ausgegraut — siehe den Hinweis unten, wenn du Version 2 verwendest
Unterstützt vollständig anpassbaren Text und Link

Diese Anpassung erfordert grundlegende Kenntnisse in HTML, JavaScript und CSS. Sie eignet sich am besten für Store-Betreiber oder Entwickler mit grundlegenden Programmierkenntnissen.

Der Express-Button-Teil gilt nur für Version 1. Das Skript sucht nach #upcart-additional-checkout-buttons und das CSS stylt .upcart-express-pay-button — beide gehören zum Express-Payments-Modul der Version 1. Version 2 rendert #upcart-express-payments und klont die eigenen Buttons von Shopify, die keinen der beiden Selektoren tragen — Express-Checkout bleibt also anklickbar, auch wenn das Kästchen nicht angekreuzt ist. Der Standard-Checkout-Button wird in beiden Versionen blockiert.

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Gehe zu Upcart > Cart Editor > Settings > Custom HTML
Füge Folgendes in Above announcements/rewards ein:

<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-Hinweis: window.upcartOnCartLoaded-Callbacks funktionieren weiterhin, sind aber veraltet und geben Konsolenwarnungen aus. Verwende upcartSubscribeCartLoaded für alle neuen Skripte.

Füge Folgendes in Below checkout button ein. Passe den Link und den Text an die Bedingungen deines Stores an:

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

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Gehe zu Upcart > Cart Editor > Settings > Custom CSS
Füge Folgendes ein, um das Styling zu steuern:

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

Du kannst die Farben an dein Branding anpassen, indem du die Werte für color, background-color und opacity änderst.

Endergebnis

Wenn Kunden den Warenkorb öffnen:

Der Checkout-Button und die Express-Buttons sind deaktiviert, bis das Kontrollkästchen angekreuzt ist
Eine rote Warnmeldung erscheint, wenn sie versuchen fortzufahren, ohne zuzustimmen
Sobald das Kästchen angekreuzt ist, werden alle Buttons aktiv

Brauchst du Hilfe?

Für fortgeschrittene Implementierungen oder komplexere Anforderungen empfehlen wir die Zusammenarbeit mit einem Shopify-Experten. Das Support-Team von Upcart unterstützt nicht beim Schreiben oder bei der Fehlerbehebung von benutzerdefiniertem Code. Shopify-Experten ansehen

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

Ein verpflichtendes AGB-Kontrollkästchen zu deinem Warenkorb hinzufügen

Überblick

Was diese Anpassung bewirkt

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Endergebnis

Brauchst du Hilfe?

​Überblick

​Was diese Anpassung bewirkt

​Schritt 1: Benutzerdefiniertes HTML hinzufügen

​Schritt 2: Benutzerdefiniertes CSS hinzufügen

​Endergebnis

​Brauchst du Hilfe?

Überblick

Was diese Anpassung bewirkt

Schritt 1: Benutzerdefiniertes HTML hinzufügen

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Endergebnis

Brauchst du Hilfe?