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.
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:
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ł.
W Cart settings → Custom CSS:
To pointer-events: none faktycznie blokuje kliknięcie; przezroczystość jedynie pokazuje kupującemu dlaczego.
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:
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ą.