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

# AGB-Zustimmung vor dem Checkout verlangen

> Ein Cart-SDK-Anwendungsfall, der dem Aftersell Cart eine AGB-Checkbox hinzufügt und den Checkout blockiert, bis Käufer zustimmen.

Füge eine Checkbox unter dem Checkout-Button hinzu und hindere Käufer daran fortzufahren, bis sie sie ankreuzen. Nützlich für AGB-Zustimmungen, Altersabfragen und Bestätigungen bei Sonderanfertigungen.

<Warning>
  **Das `checkout`-Event kann den Checkout nicht abbrechen.** Es feuert als Benachrichtigung kurz bevor der Browser navigiert, daher bewirkt `false` zurückzugeben oder `preventDefault` aufzurufen nichts. Die einzige Möglichkeit, den Checkout zu sperren, besteht darin, den Button *bevor* er gedrückt wird nicht mehr auf Klicks reagieren zu lassen — genau das zeigt diese Seite.

  Betrachte das als UI-Hürde, nicht als rechtliche Garantie. Ein entschlossener Käufer kann den Checkout weiterhin direkt erreichen.
</Warning>

<div id="how-it-works">
  ## So funktioniert es
</div>

Drei Bausteine:

1. Ein **Custom-Code-Block** unter dem Checkout-Button rendert die Checkbox.
2. Solange die Box nicht angekreuzt ist, fügt der Block über die [Shadow Root](/de/aftersell/cart/sdk-overview#shadowroot) den Checkout- und Express-Payment-Buttons des Warenkorbs eine Klasse hinzu.
3. **Custom CSS** sorgt dafür, dass diese Klasse Klicks deaktiviert.

<div id="step-1-add-the-checkbox-block">
  ## Schritt 1: Füge den Checkbox-Block hinzu
</div>

Füge einen [Custom-Code-Block](/de/aftersell/cart/custom-code-blocks) unter deinem Checkout-Button-Block hinzu, schalte ihn in den Modus **React component** und füge Folgendes ein:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  const [accepted, setAccepted] = useState(false);

  useEffect(() => {
    const root = window.aftersell?.cart?.shadowRoot;
    if (!root) return;

    const targets = root.querySelectorAll(
      '.cart-external-checkout-button, .cart-external-express-buttons'
    );
    targets.forEach((el) => el.classList.toggle('checkout-gated', !accepted));
  }, [accepted, props.cart]);

  return (
    <div style={{ width: '100%', fontSize: '14px', textAlign: 'center' }}>
      <label style={{ display: 'flex', gap: '6px', justifyContent: 'center', alignItems: 'center' }}>
        <input
          type="checkbox"
          checked={accepted}
          onChange={(e) => setAccepted(e.target.checked)}
        />
        <span>
          I accept the{' '}
          <a href="https://yourstore.com/terms" target="_blank" rel="noopener noreferrer">
            Terms &amp; Conditions
          </a>
        </span>
      </label>
      {!accepted && (
        <div style={{ color: '#c00', fontWeight: 600, marginTop: '6px' }}>
          Please accept the terms above to continue.
        </div>
      )}
    </div>
  );
}
```

Klicke auf **Compile** und aktiviere dann **„Use custom template“**. Vorher rendert der Block nichts.

Die Abhängigkeit `props.cart` ist wichtig: Sie wendet die Klasse nach jedem Re-Render des Warenkorbs erneut an, der sie sonst entfernen würde.

<div id="step-2-add-the-css">
  ## Schritt 2: Füge das CSS hinzu
</div>

Unter **Cart settings → Custom CSS**:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout-gated {
  pointer-events: none !important;
  opacity: 0.5 !important;
}
```

`pointer-events: none` blockiert den Klick tatsächlich; die Deckkraft zeigt Käufern lediglich, warum.

<div id="step-3-test-it">
  ## Schritt 3: Teste es
</div>

Bestätige in der [Vorschau](/de/aftersell/cart/previewing-carts), dass:

* Der Checkout-Button beim Laden abgedunkelt ist und nicht auf Klicks reagiert.
* Das Ankreuzen der Box ihn aktiviert; das Entfernen des Häkchens deaktiviert den Button wieder.
* Auch Express-Payment-Buttons gesperrt sind.
* Das Hinzufügen oder Entfernen eines Artikels den Button nicht wieder aktiviert, solange die Box nicht angekreuzt ist.

Der letzte Punkt ist der häufigste Fehler. Wenn sich der Button nach einer Warenkorbänderung selbst wieder aktiviert, läuft der Effekt nicht erneut. Prüfe, ob `props.cart` im Dependency-Array steht.

<div id="tracking-who-accepted">
  ## Nachverfolgen, wer zugestimmt hat
</div>

Die Checkbox ist reiner Browser-Zustand; sie erreicht die Bestellung nie. Um die Zustimmung festzuhalten, stemple sie beim Add-to-Cart als Property auf jede Zeile:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<input type="hidden" name="properties[_terms_version]" value="2026-01">
```

Füge das in deinem Theme dem Produktformular hinzu. Shopify liest `properties[...]` direkt aus dem Formular, sodass der Wert die Bestellung erreicht, egal wer das Hinzufügen ausführt: Aftersell, das Theme oder eine andere App.

Eine mit `_` beginnende Property bleibt aus der käufersichtbaren Zeile heraus, erreicht Shopify aber trotzdem und erscheint somit auf der Bestellung. Damit wird festgehalten, *welche* AGB-Version aktiv war, nicht dass der Käufer die Box angekreuzt hat.

<div id="things-to-get-right">
  ## Worauf du achten solltest
</div>

* **Ziele nur auf `cart-external-*`-Klassen.** Die `cart-internal-*`-Gegenstücke sind die interne Mechanik des Warenkorbs, kein Ansatzpunkt für deinen Code. Siehe [Custom CSS](/de/aftersell/cart/custom-css).
* **Prüfe, ob `shadowRoot` existiert**, bevor du sie verwendest. Sie ist `undefined`, bis der Warenkorb gestartet ist.
* **Der Block rendert nichts, bis der Warenkorb geladen ist**, sodass der Checkout-Button nie kurzzeitig aktiv ist, bevor die Sperre greift.
* **Ein React-Block, der einen Fehler wirft, rendert nichts**, und der Rest des Warenkorbs läuft weiter — was hier einen ungesicherten Checkout-Button bedeutet. Teste in der Vorschau, bevor du veröffentlichst.

<div id="where-to-go-next">
  ## Nächste Schritte
</div>

* **[Custom-Code-Blöcke](/de/aftersell/cart/custom-code-blocks)**: der React-Modus und seine Props.
* **[Custom CSS](/de/aftersell/cart/custom-css)**: die Konvention der öffentlichen Klassen.
* **[Events](/de/aftersell/cart/sdk-events#checkout)**: was das `checkout`-Event kann und was nicht.