Panoramica

Questo tutorial ti mostra come aggiungere una casella di controllo sotto il pulsante di checkout che richiede ai clienti di accettare i termini e condizioni del tuo negozio. Quando la casella non è spuntata, i pulsanti di checkout e di pagamento express sono disattivati. È un ottimo modo per garantire la conformità legale, definire aspettative chiare e aggiungere professionalità all’esperienza del tuo carrello.

Cosa fa questa personalizzazione

Aggiunge una casella di termini e condizioni sotto il pulsante di checkout
Impedisce ai clienti di completare il checkout finché non accettano
Blocca il pulsante di checkout standard. Sulla Versione 1 del modulo pagamenti express rende inoltre grigi i pulsanti express — vedi la nota qui sotto se usi la Versione 2
Supporta testo e link completamente personalizzabili

Questa personalizzazione richiede conoscenze di base di HTML, JavaScript e CSS. È ideale per titolari di negozi o sviluppatori con conoscenze di programmazione di livello principiante.

La parte relativa ai pulsanti express riguarda solo la Versione 1. Lo script cerca #upcart-additional-checkout-buttons e il CSS applica stili a .upcart-express-pay-button — entrambi appartengono al modulo pagamenti express della Versione 1. La Versione 2 renderizza #upcart-express-payments e clona i pulsanti nativi di Shopify, che non hanno nessuno dei due selettori, quindi il checkout express resta cliccabile anche quando la casella non è spuntata. Il pulsante di checkout standard viene bloccato in entrambe le versioni.

Passaggio 1: aggiungi l’HTML personalizzato

Vai su Upcart > Cart Editor > Settings > Custom HTML
Incolla quanto segue in 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>

Nota legacy: i callback window.upcartOnCartLoaded funzionano ancora ma sono deprecati e generano avvisi nella console. Usa upcartSubscribeCartLoaded per tutti i nuovi script.

Incolla quanto segue in Below checkout button. Aggiorna il link e il testo in base ai termini del tuo negozio:

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

Passaggio 2: aggiungi il CSS personalizzato

Vai su Upcart > Cart Editor > Settings > Custom CSS
Incolla quanto segue per controllare lo stile:

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

Puoi cambiare i colori per adattarli al tuo brand aggiornando i valori di color, background-color e opacity.

Risultato finale

Quando i clienti aprono il carrello:

I pulsanti di checkout ed express sono disattivati finché la casella non viene spuntata
Un messaggio di avviso rosso appare se provano a procedere senza accettare
Una volta spuntata la casella, tutti i pulsanti diventano attivi

Ti serve aiuto?

Per implementazioni avanzate o requisiti più complessi, ti consigliamo di collaborare con uno Shopify Expert. Il team di supporto di Upcart non assiste nella scrittura o nella risoluzione di problemi di codice personalizzato. Vedi gli Shopify Expert

Per iniziare

Moduli del carrello

Impostazioni del carrello

Pulsante carrello fisso

Multicart

Personalizzazioni

Analisi

Integrazioni e compatibilità

Fatturazione e account

Risoluzione dei problemi

Aggiungi una casella obbligatoria di termini e condizioni al tuo carrello

Panoramica

Cosa fa questa personalizzazione

Passaggio 1: aggiungi l’HTML personalizzato

Passaggio 2: aggiungi il CSS personalizzato

Risultato finale

Ti serve aiuto?

​Panoramica

​Cosa fa questa personalizzazione

​Passaggio 1: aggiungi l’HTML personalizzato

​Passaggio 2: aggiungi il CSS personalizzato

​Risultato finale

​Ti serve aiuto?

Panoramica

Cosa fa questa personalizzazione

Passaggio 1: aggiungi l’HTML personalizzato

Passaggio 2: aggiungi il CSS personalizzato

Risultato finale

Ti serve aiuto?