Richiedi i termini prima del checkout

Aggiungi una casella di controllo sotto il pulsante di checkout e impedisci all’acquirente di procedere finché non la spunta. Utile per l’accettazione dei termini, i controlli di età e le conferme per prodotti su ordinazione.

L’evento checkout non può annullare il checkout. Si attiva come notifica appena prima che il browser navighi, quindi restituire false o chiamare preventDefault non fa nulla. L’unico modo per condizionare il checkout è impedire al pulsante di rispondere ai clic prima che venga premuto, che è ciò che questa pagina mostra.Trattalo come un deterrente di UI, non come una garanzia legale. Un acquirente determinato può comunque raggiungere il checkout direttamente.

Come funziona

Tre pezzi:

Un blocco Custom code sotto il pulsante di checkout renderizza la casella.
Finché la casella non è spuntata, il blocco aggiunge una classe ai pulsanti di checkout e di pagamento rapido del carrello tramite lo shadow root.
Il CSS personalizzato fa sì che quella classe disabiliti i clic.

Passo 1: Aggiungi il blocco con la casella

Aggiungi un blocco Custom code sotto il tuo blocco del pulsante Checkout, passalo alla modalità React component e incolla:

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

Clicca Compile, poi attiva “Use custom template”. Il blocco non renderizza nulla finché non lo fai. La dipendenza props.cart è importante: riapplica la classe dopo che il carrello si è re-renderizzato, cosa che altrimenti la cancellerebbe.

Passo 2: Aggiungi il CSS

In Cart settings → Custom CSS:

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

pointer-events: none è ciò che blocca davvero il clic; l’opacità mostra semplicemente all’acquirente il perché.

Passo 3: Testalo

In anteprima, conferma che:

Il pulsante di checkout è attenuato e non risponde ai clic al caricamento.
Spuntare la casella lo abilita; deselezionarla disabilita di nuovo il pulsante.
Anche i pulsanti di pagamento rapido sono bloccati.
Aggiungere o rimuovere un articolo non riabilita il pulsante mentre la casella non è spuntata.

Quest’ultimo è il fallimento comune. Se il pulsante si riabilita da solo dopo un cambiamento del carrello, l’effetto non viene rieseguito. Verifica che props.cart sia nell’array delle dipendenze.

Tracciare chi ha accettato

La casella è uno stato solo del browser; non raggiunge mai l’ordine. Per registrare l’accettazione, imprimila su ogni riga come proprietà al momento dell’aggiunta al carrello:

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

Aggiungilo al form del prodotto nel tuo tema. Shopify legge properties[...] direttamente dal form, quindi il valore raggiunge l’ordine indipendentemente da chi esegue l’aggiunta: Aftersell, il tema o un’altra app. Una proprietà con prefisso _ resta fuori dalla riga visibile all’acquirente ma raggiunge comunque Shopify, quindi appare sull’ordine. Questo registra quale versione dei termini era in vigore, non che l’acquirente ha spuntato la casella.

Cose da fare bene

Punta solo alle classi cart-external-*. Le gemelle cart-internal-* sono la struttura interna del carrello, non un handle per il tuo codice. Vedi CSS personalizzato.
Verifica che shadowRoot esista prima di usarlo. È undefined finché il carrello non si avvia.
Il blocco non renderizza nulla finché il carrello non si carica, quindi il pulsante di checkout non è mai brevemente attivo prima che il blocco si applichi.
Un blocco React che lancia un errore non renderizza nulla e il resto del carrello va avanti, il che qui significa un pulsante di checkout non protetto. Testa in anteprima prima di pubblicare.

Dove andare adesso

Blocchi Custom code: la modalità React e le sue props.
CSS personalizzato: la convenzione delle classi pubbliche.
Events: cosa può e non può fare l’evento checkout.

Per iniziare

Pagina iniziale

Best practice

Upsell post-acquisto

Carrello Aftersell

Upsell al checkout (Shopify Plus)

Pagina di ringraziamento

Upsell nella pagina prodotto

Rokt Thanks

Strategie

Analisi e monitoraggio

Integrazioni

Aftersell MCP

Fatturazione e account

Risoluzione dei problemi

Come funziona

Passo 1: Aggiungi il blocco con la casella

Passo 2: Aggiungi il CSS

Passo 3: Testalo

Tracciare chi ha accettato

Cose da fare bene

Dove andare adesso

​Come funziona

​Passo 1: Aggiungi il blocco con la casella

​Passo 2: Aggiungi il CSS

​Passo 3: Testalo

​Tracciare chi ha accettato

​Cose da fare bene

​Dove andare adesso

Come funziona

Passo 1: Aggiungi il blocco con la casella

Passo 2: Aggiungi il CSS

Passo 3: Testalo

Tracciare chi ha accettato

Cose da fare bene

Dove andare adesso