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

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

> Verlange von Kunden, deinen Bedingungen zuzustimmen, bevor sie mit dem Checkout fortfahren.

<div id="overview">
  # Überblick
</div>

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.

***

<div id="what-this-customization-does">
  ## Was diese Anpassung bewirkt
</div>

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

<Warning>
  **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.
</Warning>

***

<div id="step-1-add-custom-html">
  ## Schritt 1: Benutzerdefiniertes HTML hinzufügen
</div>

1. Gehe zu **Upcart > Cart Editor > Settings > Custom HTML**
2. 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>
```

<Note>
  **Legacy-Hinweis:** `window.upcartOnCartLoaded`-Callbacks funktionieren weiterhin, sind aber veraltet und geben Konsolenwarnungen aus. Verwende `upcartSubscribeCartLoaded` für alle neuen Skripte.
</Note>

1. 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>
```

***

<div id="step-2-add-custom-css">
  ## Schritt 2: Benutzerdefiniertes CSS hinzufügen
</div>

1. Gehe zu **Upcart > Cart Editor > Settings > Custom CSS**
2. 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.

***

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

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

***

<div id="need-help">
  ## Brauchst du Hilfe?
</div>

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](https://www.shopify.com/partners/directory)