Wymagaj akceptacji regulaminu przed checkoutem

Dodaj checkbox pod przyciskiem checkoutu i powstrzymaj kupującego przed przejściem dalej, dopóki go nie zaznaczy. Przydatne dla akceptacji regulaminu, bramek wiekowych i potwierdzeń zamówień na zamówienie.

Zdarzenie checkout nie może anulować checkoutu. Odpala się jako powiadomienie tuż przed nawigacją przeglądarki, więc zwrócenie false lub wywołanie preventDefault nic nie daje. Jedynym sposobem na bramkowanie checkoutu jest sprawienie, by przycisk przestał reagować na kliknięcia zanim zostanie naciśnięty — i to właśnie pokazuje ta strona.Traktuj to jako środek odstraszający w interfejsie, a nie gwarancję prawną. Zdeterminowany kupujący nadal może dotrzeć do checkoutu bezpośrednio.

Jak to działa

Trzy elementy:

Blok Custom code pod przyciskiem checkoutu renderuje checkbox.
Dopóki pole jest odznaczone, blok dodaje klasę do przycisków checkoutu i płatności ekspresowych koszyka poprzez shadow root.
Custom CSS sprawia, że ta klasa wyłącza kliknięcia.

Krok 1: Dodaj blok z checkboxem

Dodaj blok Custom code pod blokiem przycisku Checkout, przełącz go w tryb React component i wklej:

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

Kliknij Compile, a następnie włącz “Use custom template”. Blok nie renderuje niczego, dopóki tego nie zrobisz. Zależność props.cart ma znaczenie: ponownie stosuje klasę po ponownym renderze koszyka, który w przeciwnym razie by ją wymazał.

Krok 2: Dodaj CSS

W Cart settings → Custom CSS:

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

To pointer-events: none faktycznie blokuje kliknięcie; przezroczystość jedynie pokazuje kupującemu dlaczego.

Krok 3: Przetestuj

W podglądzie potwierdź, że:

Przycisk checkoutu jest przygaszony i nie reaguje na kliknięcia przy załadowaniu.
Zaznaczenie pola go włącza; odznaczenie ponownie wyłącza przycisk.
Przyciski płatności ekspresowych też są bramkowane.
Dodanie lub usunięcie produktu nie włącza ponownie przycisku, gdy pole jest odznaczone.

Ten ostatni punkt to typowa usterka. Jeśli przycisk sam się włącza po zmianie koszyka, efekt nie uruchamia się ponownie. Sprawdź, czy props.cart znajduje się w tablicy zależności.

Śledzenie, kto zaakceptował

Checkbox to stan wyłącznie w przeglądarce; nigdy nie trafia do zamówienia. Aby zapisać akceptację, oznacz każdą pozycję właściwością w momencie dodania do koszyka:

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

Dodaj to do formularza produktu w motywie. Shopify odczytuje properties[...] bezpośrednio z formularza, więc wartość dociera do zamówienia niezależnie od tego, kto wykonuje dodanie: Aftersell, motyw czy inna aplikacja. Właściwość z przedrostkiem _ pozostaje poza pozycją widoczną dla kupującego, ale nadal dociera do Shopify, więc pojawia się na zamówieniu. To zapisuje, która wersja regulaminu obowiązywała, a nie to, że kupujący zaznaczył pole.

Rzeczy, które trzeba zrobić dobrze

Celuj tylko w klasy cart-external-*. Bliźniacze cart-internal-* to wewnętrzna maszyneria koszyka, a nie uchwyt dla Twojego kodu. Zobacz Custom CSS.
Sprawdzaj, czy shadowRoot istnieje, zanim go użyjesz. Jest undefined, dopóki koszyk nie wystartuje.
Blok nie renderuje niczego przed załadowaniem koszyka, więc przycisk checkoutu nigdy nie jest przez chwilę aktywny, zanim zadziała bramka.
Blok React, który rzuci błąd, nie renderuje niczego, a reszta koszyka działa dalej, co tutaj oznacza niezabezpieczony przycisk checkoutu. Przetestuj w podglądzie przed publikacją.

Co dalej

Bloki Custom code: tryb React i jego propsy.
Custom CSS: konwencja publicznych klas.
Events: co zdarzenie checkout może, a czego nie może.

Pierwsze kroki

Strona główna

Najlepsze praktyki

Upselle po zakupie

Koszyk Aftersell

Upselle przy realizacji zakupu (Shopify Plus)

Strona z podziękowaniem

Upselle na stronie produktu

Rokt Thanks

Strategie

Analityka i śledzenie

Integracje

Aftersell MCP

Rozliczenia i konto

Rozwiązywanie problemów

Wymagaj akceptacji regulaminu przed checkoutem

Jak to działa

Krok 1: Dodaj blok z checkboxem

Krok 2: Dodaj CSS

Krok 3: Przetestuj

Śledzenie, kto zaakceptował

Rzeczy, które trzeba zrobić dobrze

Co dalej

​Jak to działa

​Krok 1: Dodaj blok z checkboxem

​Krok 2: Dodaj CSS

​Krok 3: Przetestuj

​Śledzenie, kto zaakceptował

​Rzeczy, które trzeba zrobić dobrze

​Co dalej

Jak to działa

Krok 1: Dodaj blok z checkboxem

Krok 2: Dodaj CSS

Krok 3: Przetestuj

Śledzenie, kto zaakceptował

Rzeczy, które trzeba zrobić dobrze

Co dalej