Oversigt

Denne vejledning viser dig, hvordan du tilføjer et afkrydsningsfelt under checkout-knappen, der kræver, at kunder accepterer din butiks vilkår og betingelser. Når feltet ikke er markeret, deaktiveres checkout- og express-betalingsknapperne. Det er en god måde at sikre juridisk compliance, sætte klare forventninger og tilføje professionalisme til din kurvoplevelse.

Hvad denne tilpasning gør

Tilføjer et afkrydsningsfelt for vilkår og betingelser under checkout-knappen
Forhindrer kunder i at gå til checkout, før de accepterer
Blokerer standard-checkout-knappen. På Version 1 af express-betalingsmodulet gør den også express-knapperne grå — se noten nedenfor, hvis du er på Version 2
Understøtter fuldt tilpasselig tekst og link

Denne tilpasning kræver grundlæggende HTML, JavaScript og CSS. Den egner sig bedst til butiksejere eller udviklere med kodningskendskab på begynderniveau.

Express-knap-delen gælder kun for Version 1. Scriptet leder efter #upcart-additional-checkout-buttons, og CSS’en styler .upcart-express-pay-button — begge tilhører Version 1 af express-betalingsmodulet. Version 2 renderer #upcart-express-payments og kloner Shopifys egne knapper, som ikke har nogen af selektorerne, så express checkout forbliver klikbar, selv når feltet ikke er markeret. Standard-checkout-knappen blokeres på begge versioner.

Trin 1: Tilføj brugerdefineret HTML

Gå til Upcart > Cart Editor > Settings > Custom HTML
Indsæt følgende i 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>

Note om ældre versioner: window.upcartOnCartLoaded-callbacks fungerer stadig, men er forældede og logger konsoladvarsler. Brug upcartSubscribeCartLoaded til alle nye scripts.

Indsæt følgende i Below checkout button. Opdater linket og teksten, så de matcher din butiks vilkår:

<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>

Trin 2: Tilføj brugerdefineret CSS

Gå til Upcart > Cart Editor > Settings > Custom CSS
Indsæt følgende for at styre stylingen:

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

Du kan ændre farverne, så de matcher dit brand, ved at opdatere værdierne color, background-color og opacity.

Slutresultat

Når kunder åbner kurven:

Checkout- og express-knapperne er deaktiveret, indtil afkrydsningsfeltet er markeret
En rød advarselsbesked vises, hvis de forsøger at fortsætte uden at acceptere
Når feltet er markeret, bliver alle knapper aktive

Har du brug for hjælp?

Til avancerede implementeringer eller mere komplekse krav anbefaler vi at samarbejde med en Shopify Expert. Upcarts supportteam hjælper ikke med at skrive eller fejlfinde brugerdefineret kode. Se Shopify Experts

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Tilføj et obligatorisk afkrydsningsfelt for vilkår og betingelser til din kurv

Oversigt

Hvad denne tilpasning gør

Trin 1: Tilføj brugerdefineret HTML

Trin 2: Tilføj brugerdefineret CSS

Slutresultat

Har du brug for hjælp?

​Oversigt

​Hvad denne tilpasning gør

​Trin 1: Tilføj brugerdefineret HTML

​Trin 2: Tilføj brugerdefineret CSS

​Slutresultat

​Har du brug for hjælp?

Oversigt

Hvad denne tilpasning gør

Trin 1: Tilføj brugerdefineret HTML

Trin 2: Tilføj brugerdefineret CSS

Slutresultat

Har du brug for hjælp?