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

> Il blocco Header di Aftersell Cart: titolo, conteggio articoli, logo e controllo di chiusura fissati in cima al drawer.

> Il blocco **Header** è l'area superiore fissa del drawer del carrello, che dà al drawer un titolo chiaro e un modo evidente per chiuderlo. Ne controlli il layout assegnando **Title**, **Logo** e **Close button** alle sezioni sinistra e destra. Poiché l'Header è fissato in alto, resta visibile mentre il resto del carrello scorre.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="Blocco Header con titolo del carrello, conteggio articoli e controllo di chiusura in cima al drawer" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

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

* L'Header è fissato in cima al drawer e non scorre con il corpo del carrello.
* Il controllo di chiusura è sempre disponibile e chiude il drawer.

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

| Impostazione | Cosa controlla                                                                                                                                                                                                                         | Predefinito                  |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**     | Quali elementi vengono renderizzati nella sezione sinistra (`Title`, `Logo`, `Close button`) e in che ordine.                                                                                                                          | `Title`                      |
| **Right**    | Quali elementi vengono renderizzati nella sezione destra (`Title`, `Logo`, `Close button`) e in che ordine.                                                                                                                            | `Close button`               |
| **Title**    | Intestazione rich-text per il carrello. Supporta i token `{{cart_item_count}}` e `{{total_price}}`.                                                                                                                                    | `Cart • {{cart_item_count}}` |
| **Image**    | Un'immagine esposta a un template personalizzato come `props.logoUrl`. Questo campo appare solo mentre è attivo un template personalizzato, e l'header integrato non la renderizza mai. Formati supportati: WebP, JPEG, PNG, GIF, SVG. | Nessuno                      |

Il titolo è traducibile. Se il tuo titolo risulta vuoto (per esempio, una traduzione non impostata), il carrello ripiega mostrando **Cart** così l'header non è mai vuoto.
Gli elementi appaiono nell'ordine in cui li selezioni, da sinistra a destra, e ogni elemento può essere assegnato a una sola sezione alla volta.

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

* **Regione:** solo top.
* **Massimo:** 1 per stato del carrello.
* **Stato:** carrello pieno e vuoto (ogni stato ha la propria istanza di Header).
* Aggiunto ai nuovi carrelli per impostazione predefinita in entrambi gli stati. Non bloccato, quindi puoi rimuoverlo o nasconderlo con il toggle a occhio.

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

<Note>
  `logoUrl` è l'unica prop che non ha un equivalente integrato: l'immagine caricata dell'Header viene **renderizzata soltanto da un template personalizzato**. Se un merchant ha impostato un logo e non viene mostrato, il motivo è questo.
</Note>

| Prop           | Tipo                                      | A cosa serve                                                                                                                                         |
| -------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`        | `string`                                  | Il titolo dell'header come HTML sanificato, con `{{cart_item_count}}` e `{{total_price}}` già risolti.                                               |
| `logoUrl`      | `string \| null`                          | L'immagine dell'header caricata. `null` quando il merchant non ne ha impostata una.                                                                  |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Elementi selezionati per la sezione sinistra, nell'ordine di rendering.                                                                              |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Elementi selezionati per la sezione destra, nell'ordine di rendering.                                                                                |
| `itemCount`    | `number`                                  | Articoli nel carrello, come li vede l'acquirente.                                                                                                    |
| `onClose`      | `() => void`                              | Chiude il drawer. Collegalo al tuo controllo di chiusura.                                                                                            |
| `isLoading`    | `boolean`                                 | Sempre `false` qui: il blocco renderizza il suo skeleton integrato durante il caricamento e chiama il tuo template solo quando il carrello è pronto. |

<Warning>
  Se non colleghi `onClose` a qualcosa, gli acquirenti possono comunque chiudere il drawer cliccando sull'overlay o premendo Esc, ma il tuo header non avrà un pulsante di chiusura. Includine sempre uno.
</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 del titolo del carrello. 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.                    | `18px`             |
| **Line height**    | Moltiplicatore dell'altezza della riga. | `1.3`              |
| **Letter spacing** | Spaziatura tra i caratteri.             | Normal             |

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