Przegląd

Ten samouczek pokazuje, jak dodać pod przyciskiem checkoutu pole wyboru wymagające od klientów zaakceptowania regulaminu Twojego sklepu. Gdy pole nie jest zaznaczone, przyciski checkoutu i płatności ekspresowych są wyłączone. To świetny sposób na zapewnienie zgodności prawnej, ustalenie jasnych oczekiwań i dodanie profesjonalizmu do doświadczenia koszyka.

Co robi ta personalizacja

Dodaje pole akceptacji regulaminu pod przyciskiem checkoutu
Uniemożliwia klientom przejście do checkoutu, dopóki nie wyrażą zgody
Blokuje standardowy przycisk checkoutu. W wersji 1 modułu płatności ekspresowych wyszarza także przyciski ekspresowe — zobacz uwagę poniżej, jeśli masz wersję 2
Obsługuje w pełni konfigurowalny tekst i link

Ta personalizacja wymaga podstawowej znajomości HTML, JavaScript i CSS. Najlepiej sprawdzi się u właścicieli sklepów lub deweloperów z początkującą wiedzą programistyczną.

Część dotycząca przycisków ekspresowych działa tylko w wersji 1. Skrypt szuka #upcart-additional-checkout-buttons, a CSS styluje .upcart-express-pay-button — oba należą do modułu płatności ekspresowych w wersji 1. Wersja 2 renderuje #upcart-express-payments i klonuje własne przyciski Shopify, które nie mają żadnego z tych selektorów, więc ekspresowy checkout pozostaje klikalny nawet przy odznaczonym polu. Standardowy przycisk checkoutu jest blokowany w obu wersjach.

Krok 1: Dodaj niestandardowy HTML

Przejdź do Upcart > Cart Editor > Settings > Custom HTML
Wklej poniższy kod w polu Above announcements/rewards:

<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>

Uwaga dotycząca starszej wersji: wywołania window.upcartOnCartLoaded nadal działają, ale są przestarzałe i logują ostrzeżenia w konsoli. We wszystkich nowych skryptach używaj upcartSubscribeCartLoaded.

Wklej poniższy kod w polu Below checkout button. Zaktualizuj link i tekst, aby pasowały do regulaminu Twojego sklepu:

<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>

Krok 2: Dodaj niestandardowy CSS

Przejdź do Upcart > Cart Editor > Settings > Custom CSS
Wklej poniższy kod, aby kontrolować stylowanie:

.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}

Możesz zmienić kolory, aby pasowały do Twojej marki, aktualizując wartości color, background-color i opacity.

Efekt końcowy

Gdy klienci otworzą koszyk:

Przyciski checkoutu i płatności ekspresowych są wyłączone, dopóki pole nie zostanie zaznaczone
Jeśli spróbują kontynuować bez akceptacji, pojawi się czerwony komunikat ostrzegawczy
Po zaznaczeniu pola wszystkie przyciski stają się aktywne

Potrzebujesz pomocy?

W przypadku zaawansowanych wdrożeń lub bardziej złożonych wymagań zalecamy współpracę z ekspertem Shopify. Zespół wsparcia Upcart nie pomaga w pisaniu ani debugowaniu niestandardowego kodu. Zobacz Shopify Experts

Pierwsze kroki

Moduły koszyka

Ustawienia koszyka

Przyklejony przycisk koszyka

Multicart

Personalizacje

Analityka

Integracje i kompatybilność

Rozliczenia i konto

Rozwiązywanie problemów

Dodaj obowiązkowe pole akceptacji regulaminu do koszyka

Przegląd

Co robi ta personalizacja

Krok 1: Dodaj niestandardowy HTML

Krok 2: Dodaj niestandardowy CSS

Efekt końcowy

Potrzebujesz pomocy?

​Przegląd

​Co robi ta personalizacja

​Krok 1: Dodaj niestandardowy HTML

​Krok 2: Dodaj niestandardowy CSS

​Efekt końcowy

​Potrzebujesz pomocy?

Przegląd

Co robi ta personalizacja

Krok 1: Dodaj niestandardowy HTML

Krok 2: Dodaj niestandardowy CSS

Efekt końcowy

Potrzebujesz pomocy?