> ## 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 Cart items

> Il blocco Cart items: l'elenco degli articoli, la riga Product e il contenitore dei sotto-blocchi annidati.

> Il blocco **Cart items** è l'elenco degli articoli nel carrello, che renderizza ogni prodotto aggiunto dall'acquirente con immagine, titolo, variante, prezzo, selettore di quantità e controllo di rimozione. È un blocco obbligatorio ed è il contenitore che ospita i sotto-blocchi del carrello (la riga **Product**, [**Subscription upgrade**](/it/aftersell/cart/subscription-upgrade-block) e [**Custom code**](/it/aftersell/cart/custom-code-blocks)), fornendo la struttura a cui si agganciano i sotto-blocchi per riga.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-items-block-line-product-title-variant.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3c9f088b55cfd8450dcb8670dfe0728a" alt="Blocco Cart items che mostra gli articoli con immagine del prodotto, titolo, variante, prezzo, selettore di quantità e controllo di rimozione" width="1420" height="486" data-path="images/aftersell/cart-items-block-line-product-title-variant.png" />
</Frame>

<div id="the-product-row">
  ## La riga Product
</div>

Dentro Cart items si trova il sotto-blocco **Product**: la vera e propria riga dell'articolo. È bloccato e viene aggiunto automaticamente, quindi ogni blocco Cart items ha sempre esattamente una riga Product che non puoi rimuovere; gli altri sotto-blocchi si riposizionano intorno a essa. Le sue impostazioni controllano come viene visualizzato il prezzo di ogni riga:

| Impostazione                               | Cosa controlla                                                                                                                                                                                                                                                                                                                                                                                | Predefinito                                     |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| **Strike-through price**                   | Quale prezzo viene mostrato barrato: **Compare-at or pre-discount, whichever is higher**, **Compare-at price**, **Pre-discount price** o **No strike-through**.                                                                                                                                                                                                                               | Compare-at or pre-discount, whichever is higher |
| **Strike-through price for subscriptions** | La stessa scelta per le righe in abbonamento, con due differenze: un'opzione aggiuntiva **Subscription compare-at price** e **Compare-at price** rinominata **Product compare-at, then subscription compare-at**.                                                                                                                                                                             | Compare-at or pre-discount, whichever is higher |
| **Savings label**                          | Se i risparmi vengono mostrati come **Amount**, come **Percentage** o sono **Hidden**.                                                                                                                                                                                                                                                                                                        | Amount                                          |
| **Bundle price**                           | Come viene calcolato il prezzo visualizzato per le righe bundle. **Automatic** mostra il totale di tutti gli articoli del bundle (o il prezzo dell'articolo principale quando gli altri articoli sono gratuiti). **Main item price only** mostra solo il prezzo dell'articolo principale (anchor). È solo un'etichetta di visualizzazione — il totale del carrello di Shopify fa sempre fede. | Automatic                                       |
| **Savings text**                           | L'etichetta dei risparmi. Supporta il token `{{value}}`.                                                                                                                                                                                                                                                                                                                                      | `Save {{value}}`                                |

La riga stessa renderizza l'immagine del prodotto (con link alla pagina del prodotto quando disponibile), titolo, variante, prezzo ed eventuale prezzo compare-at barrato, un selettore di quantità e un pulsante di rimozione. Le righe bundle mostrano un elenco a scomparsa dei loro componenti.

<div id="text-styling">
  ### Stile del testo
</div>

La riga Product include una sezione **Text** nelle sue impostazioni di Design. Usala per controllare la tipografia dei singoli elementi di testo in ogni articolo. Seleziona un elemento di testo dal selettore per regolarne le impostazioni:

| Impostazione       | Cosa controlla                                                                                                                                                     |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Text color**     | Colore dell'elemento di testo selezionato.                                                                                                                         |
| **Font**           | **Theme font** (eredita il font del tuo tema) o **Custom font** (inserisci il nome di un font che il tuo tema carica già). Disponibile solo per **Product title**. |
| **Size**           | Dimensione del font in pixel.                                                                                                                                      |
| **Weight**         | Peso del font: Light, Regular, Medium, Semibold o Bold.                                                                                                            |
| **Line height**    | Interlinea come moltiplicatore della dimensione del font (per esempio, `1.4`).                                                                                     |
| **Letter spacing** | Spaziatura tra le lettere in pixel. I valori negativi comprimono il testo.                                                                                         |

Gli elementi di testo che puoi stilizzare sono raggruppati per categoria:

**Product**

* **Product title** — il nome del prodotto su ogni riga. Supporta anche una famiglia di font personalizzata.
* **Variant** — l'etichetta della variante (per esempio, *Size: Medium*).
* **Subscription plan** — l'etichetta del piano in sola lettura mostrata sulle righe in abbonamento.

**Pricing**

* **Price** — il prezzo attuale della riga.
* **Compare-at price** — il prezzo originale barrato.
* **Savings** — l'etichetta dei risparmi (per esempio, *Save \$5.00*). Solo dimensione e interlinea — grassetto e colore si impostano nel Rich Text Editor sopra.

**Bundle**

* **Bundle toggle** — l'intestazione a scomparsa che espande l'elenco dei componenti di un bundle.
* **Bundle item title** — il titolo di ogni componente all'interno di un bundle.
* **Bundle item variant** — l'etichetta della variante per ogni componente del bundle.

Lasciare un campo vuoto mantiene il valore predefinito dell'elemento.

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

<div id="discount-tags-design">
  ### Design dei tag sconto
</div>

La riga Product include una sezione **Discount tags** nelle sue impostazioni di Design. Usala per stilizzare le etichette a pillola dei tag sconto che appaiono su ogni articolo:

| Impostazione         | Cosa controlla                                            | Predefinito |
| -------------------- | --------------------------------------------------------- | ----------- |
| **Background color** | Colore di riempimento della pillola del tag sconto.       | `#F1F1F1`   |
| **Text color**       | Colore del testo dentro la pillola del tag sconto.        | `#585858`   |
| **Border radius**    | Arrotondamento degli angoli della pillola del tag sconto. | `6px`       |

Queste impostazioni si applicano solo ai tag sconto degli articoli nel blocco Cart items. I tag dei codici sconto nel [blocco Summary](/it/aftersell/cart/summary-block) si stilizzano separatamente.

<div id="sub-blocks-and-how-they-position">
  ## I sotto-blocchi e come si posizionano
</div>

Cart items è l'unico blocco che ospita sotto-blocchi. **I sotto-blocchi vengono renderizzati una volta per riga, dentro ogni riga di prodotto**, posizionati rispetto alla riga Product fissata:

* I sotto-blocchi ordinati **prima** della riga Product appaiono **sopra** il contenuto del prodotto in ogni riga.
* I sotto-blocchi ordinati **dopo** la riga Product appaiono **sotto** il contenuto del prodotto in ogni riga.

Quindi un [Subscription upgrade](/it/aftersell/cart/subscription-upgrade-block) posizionato dopo la riga Product appare sotto ogni riga idonea, non una sola volta in fondo all'intero elenco.

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

* Quando il carrello non ha articoli, il drawer passa allo stato vuoto e questo blocco non viene mostrato.
* **Viene eseguita una modifica del carrello alla volta.** Mentre un aggiornamento di quantità o una rimozione è in corso, i controlli della riga sono disabilitati per mantenere il carrello coerente, poi vengono riabilitati una volta completata la modifica.
* Abbassare la quantità di una riga sotto 1 la rimuove. Una quantità che il negozio rifiuta (per esempio, oltre le scorte disponibili) viene risincronizzata all'ultimo valore valido.
* **I bundle cambiano come un'unità.** Regolare la quantità sulla riga anchor di un bundle scala l'intero bundle in un'unica operazione: se un articolo figlio è incluso in ragione di 3 per anchor, portare l'anchor da 1 a 2 porta quel figlio a 6. Rimuovere l'anchor rimuove tutti i membri del bundle in una volta.
* **Alcuni bundle non possono cambiare quantità.** Se uno degli articoli figli di un bundle è incluso con un rapporto frazionario (per esempio 1,5 per anchor), il selettore di quantità su quel bundle è bloccato: i pulsanti +/− e il campo quantità sono entrambi disabilitati, e le quantità digitate non vengono accettate. Il bundle può comunque essere rimosso.
* **Le righe in abbonamento mostrano il loro piano.** Quando una riga ha un selling plan e il sotto-blocco [Subscription upgrade](/it/aftersell/cart/subscription-upgrade-block) è disattivato o non aggiunto, la riga Product mostra un'etichetta del piano in sola lettura sotto la variante — per esempio, *Delivers every month (save 30%)*. Quando quel sotto-blocco è abilitato, presenta il piano nel proprio selettore, quindi l'etichetta in sola lettura viene soppressa anziché duplicata.

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

* **Regione:** corpo.
* **Massimo:** 1 per stato del carrello.
* **Stato:** solo carrello pieno.
* **Bloccato e aggiunto per impostazione predefinita.** Cart items non può essere rimosso o nascosto, solo riposizionato.

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

Il contenitore **Cart items** non ha un template personalizzato. La riga **Product** al suo interno sì, ed è la superficie più ricca del carrello: il tuo template viene renderizzato una volta per riga.

<div id="line-content">
  ### Contenuto della riga
</div>

| Prop               | Tipo                        | A cosa serve                                                                                                                                                                                                                                                        |
| ------------------ | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`            | `string`                    | Titolo del prodotto, come testo semplice.                                                                                                                                                                                                                           |
| `variantTitle`     | `string \| null`            | Etichetta della variante. `null` per i prodotti a variante singola e per i bundle nativi.                                                                                                                                                                           |
| `url`              | `string \| null`            | URL della pagina del prodotto. `null` quando la riga non deve avere link.                                                                                                                                                                                           |
| `imageUrl`         | `string \| null`            | Immagine della riga. `null` quando il prodotto non ne ha.                                                                                                                                                                                                           |
| `quantity`         | `number`                    | Quantità corrente sulla riga.                                                                                                                                                                                                                                       |
| `price`            | `string`                    | Prezzo della riga, **già formattato**.                                                                                                                                                                                                                              |
| `compareAtPrice`   | `string \| null`            | Il prezzo "precedente" barrato, già formattato. `null` quando non c'è nulla da barrare.                                                                                                                                                                             |
| `savingsHtml`      | `string \| null`            | Etichetta dei risparmi come HTML sanificato. `null` quando è nascosta o non c'è risparmio.                                                                                                                                                                          |
| `discountTags`     | `string[]`                  | Titoli degli sconti su questa riga, es. `['Spring Sale']`. `[]` quando non ce ne sono.                                                                                                                                                                              |
| `sellingPlanLabel` | `string \| null`            | Nome del piano di abbonamento in sola lettura. `null` quando è una riga di acquisto singolo, o quando il sotto-blocco [Subscription upgrade](/it/aftersell/cart/subscription-upgrade-block#custom-template) sta renderizzando l'interfaccia del piano al suo posto. |
| `bundle`           | `object \| null`            | View model del [bundle](/it/aftersell/cart/sdk-cart-object#bundles) su una riga anchor. `null` altrimenti.                                                                                                                                                          |
| `productId`        | `number`                    | ID prodotto Shopify.                                                                                                                                                                                                                                                |
| `variantId`        | `number`                    | ID variante Shopify.                                                                                                                                                                                                                                                |
| `line`             | `AftersellCartLine`         | La [riga del carrello](/it/aftersell/cart/sdk-cart-object#cart-lines) completa, per tutto ciò che le prop qui sopra non coprono.                                                                                                                                    |
| `formatMoney`      | `(cents: number) => string` | Formatta un importo in unità minori. Usalo per i prezzi che leggi da `line`.                                                                                                                                                                                        |

<Warning>
  **`price` e `compareAtPrice` sono stringhe formattate; tutto ciò che è su `line` è in centesimi.** Non fare calcoli su `price`. Calcola a partire da `line.finalLinePrice` e simili, poi passa il risultato attraverso `formatMoney`.
</Warning>

<div id="quantity-and-removal">
  ### Quantità e rimozione
</div>

| Prop                | Tipo                                             | A cosa serve                                                                                                                                                                                                                                                      |
| ------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `increment`         | `() => void`                                     | Aggiunge un'unità alla riga.                                                                                                                                                                                                                                      |
| `decrement`         | `() => void`                                     | Rimuove un'unità dalla riga.                                                                                                                                                                                                                                      |
| `remove`            | `() => void`                                     | Rimuove completamente la riga.                                                                                                                                                                                                                                    |
| `quantityInput`     | `string`                                         | Valore corrente per un `<input>` di quantità controllato. Una stringa, così gli stati intermedi durante la digitazione sopravvivono.                                                                                                                              |
| `onQuantityInput`   | `(event: Event) => void`                         | Handler `onInput` per quel campo.                                                                                                                                                                                                                                 |
| `commitQuantity`    | `() => void`                                     | Applica la quantità digitata. Collegalo a `onBlur`.                                                                                                                                                                                                               |
| `onQuantityKeyDown` | `(event: KeyboardEvent) => void`                 | Handler `onKeyDown`, così Invio conferma.                                                                                                                                                                                                                         |
| `busy`              | `boolean`                                        | `true` mentre qualsiasi mutazione del carrello è in corso. Disabilita i tuoi controlli in base a questo.                                                                                                                                                          |
| `pending`           | `'increment' \| 'decrement' \| 'remove' \| null` | Quale azione è attualmente in corso, per uno spinner mirato.                                                                                                                                                                                                      |
| `stepperLocked`     | `boolean`                                        | `true` quando la quantità non può essere modificata, perché la riga è un anchor di bundle con un figlio incluso con un rapporto frazionario per anchor. Nascondi o disabilita il selettore — gli handler integrati rifiutano già le modifiche mentre è impostato. |

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  return (
    <div className="cart-external-cart-items__row" style={{ display: 'flex', gap: '12px', opacity: props.busy ? 0.6 : 1 }}>
      {props.imageUrl && <img src={props.imageUrl} alt="" width={64} height={64} />}

      <div style={{ flex: 1 }}>
        {props.url ? <a href={props.url}>{props.title}</a> : <span>{props.title}</span>}
        {props.variantTitle && <div style={{ opacity: 0.6 }}>{props.variantTitle}</div>}
        {props.sellingPlanLabel && <div style={{ opacity: 0.6 }}>{props.sellingPlanLabel}</div>}

        {props.discountTags.map((tag) => (
          <span key={tag} style={{ fontSize: '11px', border: '1px solid', borderRadius: '4px', padding: '1px 5px' }}>
            {tag}
          </span>
        ))}

        {!props.stepperLocked && (
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginTop: '6px' }}>
            <button type="button" onClick={props.decrement} disabled={props.busy}>&minus;</button>
            <input
              value={props.quantityInput}
              onInput={props.onQuantityInput}
              onBlur={props.commitQuantity}
              onKeyDown={props.onQuantityKeyDown}
              size={2}
            />
            <button type="button" onClick={props.increment} disabled={props.busy}>+</button>
            <button type="button" onClick={props.remove} disabled={props.busy}>
              {props.pending === 'remove' ? 'Removing…' : 'Remove'}
            </button>
          </div>
        )}
      </div>

      <div style={{ textAlign: 'right' }}>
        <div>{props.price}</div>
        {props.compareAtPrice && <s style={{ opacity: 0.5 }}>{props.compareAtPrice}</s>}
        {props.savingsHtml && <div dangerouslySetInnerHTML={{ __html: props.savingsHtml }} />}
      </div>
    </div>
  );
}
```

<div id="rendering-a-bundle">
  ### Renderizzare un bundle
</div>

Sulla riga anchor di un bundle, `bundle.children` contiene i suoi contenuti. I figli non appaiono mai come righe autonome, quindi se non li renderizzi l'acquirente non vedrà cosa c'è nel bundle:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  return (
    <div>
      <div>{props.title} {props.price}</div>

      {props.bundle && (
        <ul style={{ margin: '4px 0 0 12px', fontSize: '12px', opacity: 0.7 }}>
          {props.bundle.children.map((child, i) => (
            <li key={child.key ?? i}>{child.quantity} × {child.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

La `key` di un figlio è `null` per un componente di un bundle nativo Shopify, quindi ripiega sull'indice come sopra.

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