Kræv vilkår før checkout

Tilføj en afkrydsningsboks under checkout-knappen, og forhindr kunden i at fortsætte, indtil de sætter kryds. Nyttigt til accept af vilkår, aldersgrænser og bekræftelser af varer lavet på bestilling.

checkout-eventet kan ikke annullere checkout. Det fyrer som en notifikation lige før browseren navigerer, så at returnere false eller kalde preventDefault gør ingenting. Den eneste måde at gate checkout på er at stoppe knappen fra at reagere på klik, før der trykkes på den, hvilket er, hvad denne side viser.Betragt dette som en UI-afskrækkelse, ikke en juridisk garanti. En målrettet kunde kan stadig nå checkout direkte.

Sådan virker det

Tre dele:

En Custom code-blok under checkout-knappen renderer afkrydsningsboksen.
Mens boksen er tom, tilføjer blokken en klasse til kurvens checkout- og express-payment-knapper via shadow root’en.
Custom CSS får den klasse til at deaktivere klik.

Trin 1: Tilføj afkrydsningsboks-blokken

Tilføj en Custom code-blok under din Checkout button-blok, skift den til React component-tilstand, og indsæt:

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 Compile, og slå derefter “Use custom template” til. Blokken renderer intet, før du gør det. props.cart-afhængigheden betyder noget: den genanvender klassen, efter kurven re-renderes, hvilket ellers ville slette den.

Trin 2: Tilføj CSS’en

I Cart settings → Custom CSS:

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

pointer-events: none er det, der faktisk blokerer klikket; opaciteten viser bare kunden hvorfor.

Trin 3: Test det

I preview skal du bekræfte, at:

Checkout-knappen er nedtonet og ikke reagerer på klik ved indlæsning.
At sætte kryds i boksen aktiverer den; at fjerne krydset deaktiverer knappen igen.
Express payment-knapper er også gated.
At tilføje eller fjerne en vare genaktiverer ikke knappen, mens boksen er tom.

Det sidste er den almindelige fejl. Hvis knappen genaktiverer sig selv efter en kurvændring, kører effekten ikke igen. Tjek, at props.cart er i dependency-arrayet.

Spor hvem der accepterede

Afkrydsningsboksen er kun browser-tilstand; den når aldrig ordren. For at registrere accept skal du stemple den på hver linje som en property på add-to-cart-tidspunktet:

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

Tilføj det til din produktformular i temaet. Shopify læser properties[...] direkte fra formularen, så værdien når ordren, uanset hvem der udfører tilføjelsen: Aftersell, temaet eller en anden app. En property med _-præfiks holdes ude af den kundevendte linje, men når stadig Shopify, så den vises på ordren. Dette registrerer, hvilken vilkårsversion der var aktiv, ikke at kunden satte kryds i boksen.

Ting du skal have styr på

Målret kun cart-external-*-klasser. cart-internal-*-tvillingerne er kurvens eget maskinrum, ikke et håndtag til din kode. Se Custom CSS.
Tjek at shadowRoot findes, før du bruger den. Den er undefined, indtil kurven booter.
Blokken renderer intet, før kurven er indlæst, så checkout-knappen er aldrig kortvarigt aktiv, før gaten anvendes.
En React-blok, der kaster, renderer intet, og resten af kurven fortsætter, hvilket her betyder en ubeskyttet checkout-knap. Test i preview, før du udgiver.

Hvor du kan gå hen herfra

Custom code-blokke: React-tilstand og dens props.
Custom CSS: den offentlige klassekonvention.
Events: hvad checkout-eventet kan og ikke kan.

Kom godt i gang

Startside

Bedste praksis

Mersalg efter køb

Kurv

Mersalg ved checkout (Shopify Plus)

Takkeside

Mersalg på produktsiden

Rokt Thanks

Strategier

Analyser og sporing

Integrationer

Aftersell MCP

Fakturering og konto

Fejlfinding

Sådan virker det

Trin 1: Tilføj afkrydsningsboks-blokken

Trin 2: Tilføj CSS’en

Trin 3: Test det

Spor hvem der accepterede

Ting du skal have styr på

Hvor du kan gå hen herfra

​Sådan virker det

​Trin 1: Tilføj afkrydsningsboks-blokken

​Trin 2: Tilføj CSS’en

​Trin 3: Test det

​Spor hvem der accepterede

​Ting du skal have styr på

​Hvor du kan gå hen herfra

Sådan virker det

Trin 1: Tilføj afkrydsningsboks-blokken

Trin 2: Tilføj CSS’en

Trin 3: Test det

Spor hvem der accepterede

Ting du skal have styr på

Hvor du kan gå hen herfra