> ## 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 Product add-on

> Il blocco Product add-on di Aftersell Cart: offri un prodotto specifico come aggiunta rapida dentro il drawer.

> Il blocco **Product add-on** offre un singolo prodotto specifico che scegli tu come componente aggiuntivo dentro il carrello, promuovendo un prodotto noto (una garanzia, un campione, un best-seller) come aggiunta rapida direttamente nel carrello.

<Info>
  A differenza di [**Upsells**](/it/aftersell/cart/upsells-block), che mostra prodotti scelti da una strategia, il Product add-on mostra sempre esattamente il prodotto che selezioni.
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-product-add-on-block-additional-product.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29c7598c41c78f6503af7f9cd7ec084a" alt="Blocco Product add-on che offre un prodotto aggiuntivo che l'acquirente può includere nel suo carrello" width="678" height="125" data-path="images/aftersell/cart-product-add-on-block-additional-product.png" />
</Frame>

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

* **Se non si risolve nessuna variante attiva** — il prodotto non è impostato, è archiviato o è esaurito — il blocco non renderizza **nulla** invece di un pulsante inutilizzabile.
* Il controllo riflette se la riga add-on *di questo specifico blocco* è nel carrello, quindi disattivarlo rimuove la riga che aveva aggiunto (e non influisce sullo stesso prodotto aggiunto altrove).
* Un prezzo compare-at viene barrato quando c'è un ribasso reale; l'etichetta "% off" è nascosta se lo sconto arrotonda sotto l'1%.
* L'immagine dell'add-on ricade sull'immagine in evidenza del prodotto quando la variante scelta non ne ha una.

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

| Impostazione     | Cosa controlla                                                                                                              | Predefinito                           |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Display type** | Come appare il controllo di aggiunta: **Toggle** o **Checkbox**.                                                            | Toggle                                |
| **Product**      | La variante di prodotto da offrire — un unico selettore copre entrambi. Immagine e prezzo provengono dalla variante scelta. | Nessuno                               |
| **Title**        | Intestazione rich-text.                                                                                                     | `<strong>{{product_title}}</strong>`  |
| **Price label**  | La riga del prezzo.                                                                                                         | `{{price}}`                           |
| **Description**  | Testo di supporto.                                                                                                          | `Add {{product_title}} to your order` |

**Title**, **Price label** e **Description** supportano tutti gli stessi quattro token: `{{product_title}}`, `{{price}}`, `{{compare_at_price}}` e `{{savings}}`.

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

* **Regione:** body o bottom.
* **Massimo:** 3 per stato del carrello — il carrello pieno e il carrello vuoto hanno ciascuno la propria quota.
* **Stato:** sia carrello pieno che vuoto.
* Non aggiunto per impostazione predefinita. Non bloccato — puoi rimuoverlo o nasconderlo.

<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 props che riceve.

<div id="content">
  ### Contenuto
</div>

| Prop                      | Tipo             | A cosa serve                                                                                                         |
| ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------- |
| `addonTitle`              | `string`         | Titolo in testo semplice. Usalo per l'alt text e l'`aria-label`, e come fallback quando non c'è un titolo rich text. |
| `addonTitleHtml`          | `string`         | HTML sanificato del titolo rich-text. Vuoto quando assente.                                                          |
| `descriptionHtml`         | `string`         | HTML sanificato della descrizione rich-text. Vuoto quando assente.                                                   |
| `formattedPrice`          | `string`         | Etichetta del prezzo formattata in valuta. Vuota quando non mostrata.                                                |
| `formattedCompareAtPrice` | `string`         | Compare-at della variante formattato (MSRP). Vuoto quando non c'è un risparmio reale.                                |
| `savings`                 | `string`         | Etichetta del risparmio in percentuale intera, per esempio `25%`. Vuota quando non c'è risparmio.                    |
| `priceHtml`               | `string \| null` | HTML sanificato del prezzo rich-text dal campo prezzo dedicato. `null` quando vuoto.                                 |
| `ctaText`                 | `string`         | Etichetta del pulsante, per il formato `button`.                                                                     |
| `imageUrl`                | `string`         | Immagine del prodotto. Vuota quando assente.                                                                         |
| `productUrl`              | `string`         | URL della pagina prodotto. Vuoto quando assente; in quel caso non rendere cliccabili l'immagine o il titolo.         |

<div id="state-and-actions">
  ### Stato e azioni
</div>

| Prop           | Tipo                                 | A cosa serve                                                                                                     |
| -------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| `variantId`    | `number \| null`                     | La variante risolta. `null` quando non c'è una variante attiva, perché il prodotto non è impostato o è esaurito. |
| `format`       | `'button' \| 'checkbox' \| 'toggle'` | Come l'acquirente aggiunge l'add-on. Fai il branch del tuo markup su questo valore.                              |
| `isEnabled`    | `boolean`                            | Se l'add-on è attualmente nel carrello.                                                                          |
| `isAdding`     | `boolean`                            | `true` mentre l'aggiunta o la rimozione è in corso. Disabilita il tuo controllo su questo valore.                |
| `handleAdd`    | `() => void`                         | Aggiunge l'add-on. Per il formato `button`.                                                                      |
| `handleToggle` | `() => void`                         | Alterna l'add-on dentro e fuori dal carrello. Per `checkbox` e `toggle`.                                         |
| `isLoading`    | `boolean`                            | `true` mentre il carrello sta ancora eseguendo il suo primo fetch.                                               |

<Warning>
  `format` decide quale handler si applica: `handleAdd` per `button`, `handleToggle` per `checkbox` e `toggle`. Un `variantId` a `null` significa che non c'è nulla da aggiungere, quindi condiziona il tuo controllo su di esso invece di chiamare un handler che non può riuscire.
</Warning>

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

<div id="text">
  ### Text
</div>

La sezione **Text** in Design ti consente di controllare la tipografia di tre elementi. Usa il selettore **Text element** per passare da uno all'altro.

**Title** — il nome del prodotto. Supporta anche una famiglia di font personalizzata. Il grassetto e il colore del testo si impostano nel Rich Text Editor sopra (nella scheda Settings), non qui.

| Impostazione       | Cosa controlla                          | Predefinito        |
| ------------------ | --------------------------------------- | ------------------ |
| **Font**           | Famiglia di font per il titolo.         | Ereditato dal tema |
| **Size**           | Dimensione del font.                    | `15px`             |
| **Line height**    | Moltiplicatore dell'altezza della riga. | `1.33`             |
| **Letter spacing** | Spaziatura tra i caratteri.             | Normal             |

**Price** — la riga del prezzo. Il grassetto e il colore del testo si impostano nel Rich Text Editor sopra.

| Impostazione       | Cosa controlla                          | Predefinito |
| ------------------ | --------------------------------------- | ----------- |
| **Size**           | Dimensione del font.                    | `15px`      |
| **Line height**    | Moltiplicatore dell'altezza della riga. | `1.33`      |
| **Letter spacing** | Spaziatura tra i caratteri.             | Normal      |

**Description** — il testo di supporto. Il grassetto e il colore del testo si impostano nel Rich Text Editor sopra.

| Impostazione       | Cosa controlla                          | Predefinito |
| ------------------ | --------------------------------------- | ----------- |
| **Size**           | Dimensione del font.                    | `14px`      |
| **Line height**    | Moltiplicatore dell'altezza della riga. | `1.29`      |
| **Letter spacing** | Spaziatura tra i caratteri.             | Normal      |

<Tip>
  Cliccando un elemento di testo direttamente nell'anteprima del carrello lo evidenzi e apri automaticamente i suoi controlli nel pannello.
</Tip>

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