Voorwaarden verplichten vóór de checkout

Voeg een checkbox toe onder de checkout-knop en verhinder dat de shopper doorgaat totdat hij hem aanvinkt. Handig voor het accepteren van voorwaarden, leeftijdscontroles en bevestigingen bij made-to-order.

Het checkout-event kan de checkout niet annuleren. Het vuurt af als notificatie vlak voordat de browser navigeert, dus false teruggeven of preventDefault aanroepen doet niets. De enige manier om de checkout te gaten is de knop laten stoppen met reageren op klikken voordat erop wordt gedrukt, en dat is wat deze pagina laat zien.Beschouw dit als een UI-afschrikmiddel, niet als een juridische garantie. Een vastberaden shopper kan de checkout nog steeds rechtstreeks bereiken.

Hoe het werkt

Drie onderdelen:

Een Custom code block onder de checkout-knop rendert de checkbox.
Zolang het vakje leeg is, voegt het block een class toe aan de checkout- en express-payment-knoppen van de winkelwagen via de shadow root.
Custom CSS zorgt dat die class klikken uitschakelt.

Stap 1: het checkbox-block toevoegen

Voeg een Custom code block toe onder je Checkout button-block, schakel het naar de modus React component, en plak:

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

Klik op Compile en zet dan “Use custom template” aan. Het block rendert niets totdat je dat doet. De props.cart-dependency is belangrijk: hij past de class opnieuw toe nadat de winkelwagen opnieuw rendert, wat hem anders zou wissen.

Stap 2: de CSS toevoegen

In Cart settings → Custom CSS:

.checkout-gated {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

pointer-events: none is wat de klik daadwerkelijk blokkeert; de opacity laat de shopper alleen zien waarom.

Stap 3: testen

Bevestig in de preview dat:

De checkout-knop bij het laden gedimd is en niet op klikken reageert.
Het vakje aanvinken hem inschakelt; het uitvinken schakelt de knop weer uit.
Express-payment-knoppen ook gegated zijn.
Een item toevoegen of verwijderen de knop niet opnieuw inschakelt zolang het vakje leeg is.

Die laatste is de veelvoorkomende fout. Als de knop zichzelf opnieuw inschakelt na een winkelwagenwijziging, draait het effect niet opnieuw. Controleer of props.cart in de dependency array staat.

Bijhouden wie heeft geaccepteerd

De checkbox is alleen browserstatus; hij bereikt de bestelling nooit. Om acceptatie vast te leggen, stempel je hem als property op elke regel op het moment van add-to-cart:

<input type="hidden" name="properties[_terms_version]" value="2026-01">

Voeg dat toe aan je productformulier in het thema. Shopify leest properties[...] rechtstreeks van het formulier af, dus de waarde bereikt de bestelling wie de toevoeging ook uitvoert: Aftersell, het thema of een andere app. Een property met het voorvoegsel _ blijft buiten de regel die de koper ziet, maar bereikt Shopify wel, dus hij verschijnt op de bestelling. Dit legt vast welke voorwaardenversie live was, niet dat de shopper het vakje aanvinkte.

Dingen om goed te doen

Richt je alleen op cart-external-*-classes. De cart-internal-*-tegenhangers zijn het interne leidingwerk van de winkelwagen, geen aanknopingspunt voor jouw code. Zie Custom CSS.
Controleer dat shadowRoot bestaat voordat je hem gebruikt. Hij is undefined totdat de winkelwagen opstart.
Het block rendert niets totdat de winkelwagen laadt, dus de checkout-knop is nooit kortstondig actief voordat de gate van kracht is.
Een React-block dat een fout gooit rendert niets en de rest van de winkelwagen gaat gewoon door, wat hier een onbeschermde checkout-knop betekent. Test in de preview vóór het publiceren.

Waar je verder kunt kijken

Custom code blocks: React-modus en zijn props.
Custom CSS: de publieke classconventie.
Events: wat het checkout-event wel en niet kan.

Aan de slag

Startpagina

Best practices

Post-purchase upsells

Aftersell-winkelwagen

Checkout-upsells (Shopify Plus)

Bedankpagina

Upsells op de productpagina

Rokt Thanks

Strategieën

Analytics en tracking

Integraties

Aftersell MCP

Facturering en account

Probleemoplossing

Voorwaarden verplichten vóór de checkout

Hoe het werkt

Stap 1: het checkbox-block toevoegen

Stap 2: de CSS toevoegen

Stap 3: testen

Bijhouden wie heeft geaccepteerd

Dingen om goed te doen

Waar je verder kunt kijken

​Hoe het werkt

​Stap 1: het checkbox-block toevoegen

​Stap 2: de CSS toevoegen

​Stap 3: testen

​Bijhouden wie heeft geaccepteerd

​Dingen om goed te doen

​Waar je verder kunt kijken

Hoe het werkt

Stap 1: het checkbox-block toevoegen

Stap 2: de CSS toevoegen

Stap 3: testen

Bijhouden wie heeft geaccepteerd

Dingen om goed te doen

Waar je verder kunt kijken