> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Richiedi i termini prima del checkout

> Un caso d'uso del Cart SDK che aggiunge una casella di termini e condizioni all'Aftersell Cart e blocca il checkout finché l'acquirente non accetta.

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.

<Warning>
  **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.
</Warning>

<div id="how-it-works">
  ## Come funziona
</div>

Tre pezzi:

1. Un **blocco Custom code** sotto il pulsante di checkout renderizza la casella.
2. Finché la casella non è spuntata, il blocco aggiunge una classe ai pulsanti di checkout e di pagamento rapido del carrello tramite lo [shadow root](/it/aftersell/cart/sdk-overview#shadowroot).
3. Il **CSS personalizzato** fa sì che quella classe disabiliti i clic.

<div id="step-1-add-the-checkbox-block">
  ## Passo 1: Aggiungi il blocco con la casella
</div>

Aggiungi un [blocco Custom code](/it/aftersell/cart/custom-code-blocks) sotto il tuo blocco del pulsante Checkout, passalo alla modalità **React component** e incolla:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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.

<div id="step-2-add-the-css">
  ## Passo 2: Aggiungi il CSS
</div>

In **Cart settings → Custom CSS**:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.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é.

<div id="step-3-test-it">
  ## Passo 3: Testalo
</div>

In [anteprima](/it/aftersell/cart/previewing-carts), 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.

<div id="tracking-who-accepted">
  ## Tracciare chi ha accettato
</div>

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:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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.

<div id="things-to-get-right">
  ## Cose da fare bene
</div>

* **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](/it/aftersell/cart/custom-css).
* **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.

<div id="where-to-go-next">
  ## Dove andare adesso
</div>

* **[Blocchi Custom code](/it/aftersell/cart/custom-code-blocks)**: la modalità React e le sue props.
* **[CSS personalizzato](/it/aftersell/cart/custom-css)**: la convenzione delle classi pubbliche.
* **[Events](/it/aftersell/cart/sdk-events#checkout)**: cosa può e non può fare l'evento `checkout`.