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

# Blocchi Custom code

> Il blocco Custom code di Aftersell Cart: aggiungi il tuo HTML o React ovunque nel drawer, anche dentro Cart items.

> Il blocco **Custom code** aggiunge il tuo HTML o React al carrello. Mettilo in qualsiasi sezione del drawer, oppure annidalo dentro [**Cart items**](/it/aftersell/cart/cart-items-block) come sotto-blocco così si ripete per ogni riga. A differenza degli altri blocchi, non ha impostazioni Content né una sezione Design: il blocco *è* il codice, quindi lavori interamente nella sua scheda **Code**.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-custom-code-block-add-and-enable.gif?s=6717cc64a8765b0c06b65990f99e12ff" alt="Anteprima animata dell'aggiunta e dell'attivazione di un blocco Custom code nell'editor di Aftersell Cart" title="Anteprima animata dell'aggiunta e dell'attivazione di un blocco Custom code nell'editor di Aftersell Cart" width="1200" height="558" data-path="images/aftersell/cart-custom-code-block-add-and-enable.gif" />
</Frame>

<div id="add-and-turn-on-a-custom-code-block">
  ## Aggiungere e attivare un blocco Custom code
</div>

1. Aggiungi un blocco **Custom code** a qualsiasi sezione, o come sotto-blocco sotto **Cart items**.
2. Selezionalo e apri la scheda **Code**.
3. Scegli **HTML** o **React component**. I nuovi blocchi hanno HTML come predefinito.
4. Scrivi il tuo codice.
5. Se hai scelto React, fai clic su <span style={{display:'inline-flex',alignItems:'center',gap:'4px',background:'#1C1C1C',color:'#fff',border:'1px solid #0A0A0A',borderRadius:'4px',padding:'0 6px',fontSize:'0.85em',fontWeight:500,lineHeight:'1.4em',verticalAlign:'middle'}}><svg width="8" height="9" viewBox="0 0 10 12" fill="none" aria-hidden="true" style={{display:'block'}}><path d="M1.5 1.2v9.6L8.8 6 1.5 1.2Z" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round" /></svg>Compile</span>.
6. Attiva **"Use custom template"**. Per questo blocco, quell'interruttore significa "mostra il mio codice personalizzato", ed è disattivo per impostazione predefinita, quindi non viene renderizzato nulla finché non lo abiliti.
7. Mantieni attivo l'interruttore a occhio nella barra laterale così il blocco resta visibile agli acquirenti.

Sia l'interruttore a occhio sia **"Use custom template"** devono essere attivi perché il blocco appaia.

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

* Il blocco non renderizza nulla finché il carrello non è stato caricato.
* Non renderizza nulla nemmeno quando l'occhio della barra laterale è disattivo, **"Use custom template"** è disattivo, il codice è vuoto, oppure React non riesce a compilare o renderizzare. Poiché un errore è silenzioso, controlla il tuo blocco in [anteprima](/it/aftersell/cart/previewing-carts) prima di pubblicare.

<div id="html-mode">
  ## Modalità HTML
</div>

La modalità HTML sostituisce un piccolo set di token nel tuo markup. Serve per contenuti statici o basati su token, non per eseguire logica.

* **I tag `<script>` inline non vengono eseguiti**, e la modalità HTML **non ha accesso all'SDK né a `window`.**
* Per la logica, usa la [**modalità React**](#react-mode) o gli [script personalizzati](/it/aftersell/cart/custom-scripts) con il [Cart SDK](/it/aftersell/cart/sdk-overview).

<div id="tokens">
  ### Token
</div>

I valori dei token sono **stringhe formattate** (formato valuta del negozio, una percentuale con `%`, o una quantità), pronte da inserire nel markup:

| Token                    | Cosa mostra                                                         |
| ------------------------ | ------------------------------------------------------------------- |
| `{{pre_cart_total}}`     | Totale del carrello prima degli sconti.                             |
| `{{post_cart_total}}`    | Totale del carrello dopo gli sconti.                                |
| `{{savings_amount}}`     | Importo risparmiato (totale pre-sconto meno totale post-sconto).    |
| `{{savings_percentage}}` | Risparmio in percentuale, incluso il segno `%` (per esempio `15%`). |
| `{{cart_quantity}}`      | Numero di articoli visibili nel carrello.                           |

<div id="example">
  ### Esempio
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>
```

<div id="react-mode">
  ## Modalità React
</div>

La modalità React compila un componente e gli passa i dati del carrello più un'azione `add-to-cart`.

* L'editor blocca il wrapper su `function CustomCode(props: CustomCodeProps) { … }`, e tu modifichi solo il corpo tra quelle righe.
* Devi fare clic su <span style={{display:'inline-flex',alignItems:'center',gap:'4px',background:'#1C1C1C',color:'#fff',border:'1px solid #0A0A0A',borderRadius:'4px',padding:'0 6px',fontSize:'0.85em',fontWeight:500,lineHeight:'1.4em',verticalAlign:'middle'}}><svg width="8" height="9" viewBox="0 0 10 12" fill="none" aria-hidden="true" style={{display:'block'}}><path d="M1.5 1.2v9.6L8.8 6 1.5 1.2Z" stroke="#fff" strokeWidth="1.5" strokeLinejoin="round" /></svg>Compile</span> e poi attivare **"Use custom template"**, prima che il blocco appaia.
* Il tuo componente può usare `useState`, `useEffect`, `useMemo`, `useRef` e `useCallback`.
* A differenza della modalità HTML, React viene eseguito nel contesto della pagina, quindi può chiamare `window` e il [Cart SDK](/it/aftersell/cart/sdk-overview) quando disponibili.
* Se il tuo componente genera errori a runtime, il blocco non renderizza nulla e il resto del carrello continua a funzionare.

<div id="props">
  ### Prop
</div>

I totali e gli importi di risparmio sono numeri interi nell'[unità minore](/it/aftersell/cart/sdk-actions#formatmoneycents) della valuta (centesimi per USD), quindi `$12.50` è `1250`, non `12.50`. Non sono stringhe di denaro formattate come i token HTML.

| Prop                                            | Tipo                        | Descrizione                                                                                                                                         |
| ----------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `cart`                                          | `AftersellCart`             | Il carrello corrente. Vedi il [riferimento dell'oggetto carrello](/it/aftersell/cart/sdk-cart-object).                                              |
| `line`                                          | `AftersellCartLine \| null` | Impostata solo quando il blocco è un sotto-blocco di Cart items (un render per riga); `null` in una sezione.                                        |
| `preCartTotal`                                  | `number`                    | Il totale del carrello **prima degli sconti** (l'`original_total_price` di Shopify), nell'unità minore della valuta (es. centesimi).                |
| `postCartTotal`                                 | `number`                    | Il totale del carrello **dopo gli sconti**, nell'unità minore della valuta.                                                                         |
| `savings`                                       | `{ amount, percentage }`    | Importo e percentuale del risparmio.                                                                                                                |
| `addProduct(variantId, quantity?, properties?)` | `function`                  | Aggiunge un prodotto al carrello, marcato con l'attribuzione di questo blocco così le [analisi](/it/aftersell/cart/analytics) possono accreditarlo. |

<div id="the-cart-and-line-shapes">
  ### Le strutture di cart e line
</div>

`cart` e `line` sono gli stessi oggetti che l'SDK espone ovunque, quindi sono documentati una sola volta nel **[riferimento dell'oggetto carrello](/it/aftersell/cart/sdk-cart-object)**: ogni campo del carrello, di una riga e di un bundle.

Quelli che userai di più: `cart.items`, `cart.itemCount`, `cart.totalPrice`, `line.title`, `line.quantity`, `line.finalLinePrice`.

Tre cose specifiche di questo blocco:

* **`line` è impostata solo su un sotto-blocco di Cart items**, dove il tuo componente viene renderizzato una volta per riga. Posizionato come sezione, `line` è `null` e leggi invece `cart.items`.
* **I figli dei bundle non sono in `cart.items`.** Quando le righe sono [raggruppate in un bundle](/it/aftersell/cart/sdk-use-case-bundles), appare solo la riga anchor; i suoi figli si trovano in `line.bundle.children`.
* **Nemmeno le righe nascoste da un [line transform](/it/aftersell/cart/sdk-hooks#registerlinetransform) sono presenti**, anche se contano comunque nel `cart.totalPrice`.

<div id="examples">
  ### Esempi
</div>

Mostrare il conteggio degli articoli:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}
```

Come sotto-blocco di Cart items, usa `props.line` per contenuti per prodotto. Il blocco viene renderizzato una volta per riga, contrassegnato con il prodotto e la variante di quella riga:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}
```

<div id="reading-enrichment-metadata">
  ### Leggere i metadata di arricchimento
</div>

Ogni articolo in `cart.items` contiene un campo `metadata`: un oggetto vuoto `{}` finché un [cart enricher](/it/aftersell/cart/sdk-hooks#registercartenricher) non lo popola. Una volta popolato, è indicizzato per l'`id` dell'enricher e contiene i dati Storefront per il prodotto o la variante di quella riga:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}
```

`metadata` è sempre presente e per impostazione predefinita è un oggetto vuoto `{}` finché il fetch asincrono dell'enricher non è completato (il test "non ancora arricchito" è `Object.keys(item.metadata).length === 0`). Usa l'optional chaining (`item.metadata?.enricherId`) quando leggi la chiave di un enricher specifico, dato che quella chiave è assente finché l'arricchimento non arriva.

<div id="reading-discount-codes-and-line-discounts">
  ### Leggere i codici sconto e gli sconti per riga
</div>

`cart.discountCodes` elenca i codici sconto applicati al carrello, e le `discountAllocations` di ogni riga elencano gli sconti applicati a quella specifica riga:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}
```

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

* **Regione:** qualsiasi (superiore, corpo o inferiore). Disponibile anche come sotto-blocco di Cart items.
* **Massimo:** illimitato.
* **Stato:** carrello pieno e vuoto (come blocco di sezione). Come sotto-blocco di Cart items, viene renderizzato solo quando il carrello ha righe, un'istanza per riga.
* Non è bloccato, quindi puoi rimuoverlo o nasconderlo.
* Non c'è una sezione Design per blocco. Personalizza lo stile attraverso il tuo markup, il [**CSS personalizzato**](/it/aftersell/cart/custom-css) e le tue [**impostazioni di design**](/it/aftersell/cart/design-settings) globali.

<div id="when-to-use-custom-code-block-vs-custom-template-vs-custom-script">
  ## Quando usare il blocco custom code vs. template personalizzato vs. script personalizzato
</div>

|                                                                    | Cosa fa                                                                                         | Quando usarlo                                                                    | Esempio                                                                                                                                                                               |
| ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Blocco Custom code**                                             | Aggiunge un blocco *nuovo* con il tuo HTML o React.                                             | Qualcosa che i blocchi integrati non coprono.                                    | Una riga di totale stimato che aggiunge la tua tariffa di spedizione fissa al totale del carrello, o un conto alla rovescia per il termine di consegna sopra il pulsante di checkout. |
| **[Template personalizzato](/it/aftersell/cart/custom-templates)** | Sostituisce il rendering di un blocco *esistente* con il tuo JSX, usando i dati di quel blocco. | Il blocco integrato è quasi giusto, ma ti serve un markup diverso.               | Ricostruire la [riga Product](/it/aftersell/cart/cart-items-block#custom-template) così che il nome della variante, i risparmi e il selettore di quantità stiano su una sola riga.    |
| **[Script personalizzato](/it/aftersell/cart/custom-scripts)**     | Esegue JavaScript sul carrello tramite il [Cart SDK](/it/aftersell/cart/sdk-overview).          | Logica a livello di carrello, eventi e configurazione anziché markup del drawer. | Spendi \$75, ricevi una tote gratis: [aggiungi l'omaggio](/it/aftersell/cart/sdk-use-case-free-gift) quando il carrello supera la soglia, e toglilo se l'acquirente scende sotto.     |