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.
- 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
props.cart è importante: riapplica la classe dopo che il carrello si è re-renderizzato, cosa che altrimenti la cancellerebbe.
In Cart settings → Custom CSS:
pointer-events: none è ciò che blocca davvero il clic; l’opacità mostra semplicemente all’acquirente il perché.
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
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.
- 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.
