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

# Blocco Checkout button

> Il blocco Checkout button di Aftersell Cart: la CTA obbligatoria del footer che porta gli acquirenti al checkout.

> Il blocco **Checkout button** è la call-to-action principale nel footer del carrello che porta gli acquirenti al checkout, offrendo loro un percorso chiaro e ben visibile dal carrello al checkout. È un blocco obbligatorio.

<div id="behavior">
  ## Comportamento
</div>

* Il pulsante risolve un **URL di checkout localizzato e corretto per il mercato**, così gli acquirenti arrivano al checkout del mercato giusto. Se non può essere risolto, ripiega sul link standard `/checkout`.
* Con **Go to cart page instead of checkout** abilitato, il pulsante rimanda invece a `/cart`.
* Il clic naviga tramite JavaScript, così la gestione del carrello del tema non può intercettarlo, pur rispettando le intenzioni di apertura in nuova scheda (Cmd/Ctrl-clic, clic con il tasto centrale).
* Il clic emette l'[evento `checkout`](/it/aftersell/cart/sdk-events) dell'SDK, a cui puoi iscriverti.

<div id="settings">
  ## Impostazioni
</div>

| Impostazione                            | Cosa controlla                                                                        | Predefinito                  |
| --------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | Etichetta in testo semplice inserita in un'area di testo. Supporta `{{total_price}}`. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Manda gli acquirenti alla tua pagina `/cart` invece che direttamente al checkout.     | Disattivo                    |

<div id="placement-and-limits">
  ## Posizionamento e limiti
</div>

* **Regione:** inferiore.
* **Massimo:** 1 per stato del carrello.
* **Stato:** solo carrello pieno.
* **Bloccato e aggiunto per impostazione predefinita.** Il Checkout button non può essere rimosso o nascosto, solo riposizionato all'interno del footer.

<div id="custom-template">
  ## Template personalizzato
</div>

Supporta un [template personalizzato](/it/aftersell/cart/custom-templates) dalla sua scheda Code, che sostituisce il markup integrato di questo blocco con il tuo JSX. Queste sono le prop che riceve.

| Prop        | Tipo                  | A cosa serve                                                                                                                                         |
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | L'etichetta del pulsante come HTML sanificato, con `{{total_price}}` risolto.                                                                        |
| `href`      | `string \| undefined` | L'URL di checkout. `undefined` nell'anteprima dell'editor, dove non c'è nulla verso cui navigare.                                                    |
| `isLoading` | `boolean`             | Sempre `false` qui: il blocco mostra il proprio skeleton integrato durante il caricamento e chiama il tuo template solo quando il carrello è pronto. |

<Warning>
  **Un pulsante di checkout personalizzato perde il tracciamento del checkout.** Il pulsante integrato allega un handler di clic che emette l'[evento `checkout`](/it/aftersell/cart/sdk-events#checkout) dell'SDK e registra la conversione per le [analisi del carrello](/it/aftersell/cart/analytics). Quell'handler non viene passato ai template personalizzati, quindi navigare solo tramite `href` salta entrambi.

  Se ti serve l'evento, emettilo tu stesso da un `onClick` prima della navigazione. I report di attribuzione non possono comunque essere recuperati in questo modo, quindi preferisci ristilizzare il pulsante integrato con le [impostazioni di design](/it/aftersell/cart/design-settings) o il [CSS personalizzato](/it/aftersell/cart/custom-css), a meno che tu non abbia davvero bisogno di un markup diverso.
</Warning>

Renderizza `href` così com'è anziché assegnargli un valore predefinito. Un `<a>` senza `href` è inerte, che è il comportamento corretto nell'editor.

<div id="design">
  ## Design
</div>

Personalizza lo stile di questo blocco con la sua sezione **Design** nel pannello delle impostazioni. Si tratta di override per singolo blocco che si sovrappongono al tuo design globale e vi ricadono quando sono vuoti.

Cosa sono le impostazioni di design? Scopri di più qui: [Impostazioni di design](/it/aftersell/cart/design-settings).