> ## 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 Notes
> Il blocco Notes di Aftersell Cart: un campo comprimibile per le note d'ordine che salva le istruzioni dell'acquirente nel carrello e nell'ordine.
> Il blocco **Notes** è un campo comprimibile dove gli acquirenti possono aggiungere note d'ordine o istruzioni speciali (messaggi regalo, istruzioni di consegna e così via) senza lasciare il carrello. La nota viene salvata nel carrello e trasferita all'ordine.
## Comportamento
* Il campo è un **elemento comprimibile a disclosure**, compresso per impostazione predefinita. La compressione è solo visiva — una nota salvata resta comunque valida. Quando è compresso con una nota salvata, appare un segno di spunta così l'acquirente sa che la sua nota è memorizzata.
* La nota **si salva quando l'acquirente clicca altrove** (on blur), con feedback di stato saving / saved / error.
* Se la nota del carrello cambia altrove — nella pagina `/cart` o in un'altra scheda — il campo si sincronizza con essa, a meno che l'acquirente non abbia già iniziato a digitare, così la nota in corso di scrittura non viene mai sovrascritta.
## Impostazioni
| Impostazione | Cosa controlla | Predefinito |
| --------------- | ---------------------------------------------- | ------------------------------------- |
| **Title** | L'etichetta del campo. Rich text, traducibile. | `Order notes` |
| **Placeholder** | Il testo placeholder dell'input. Traducibile. | `Special instructions for your order` |
## Posizionamento e limiti
* **Regione:** body o bottom.
* **Massimo:** 1 per stato del carrello.
* **Stato:** solo carrello pieno.
* Non aggiunto per impostazione predefinita. Non bloccato — puoi rimuoverlo o nasconderlo.
## Template personalizzato
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.
| Prop | Tipo | A cosa serve |
| --------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| `titleHtml` | `string` | HTML sanificato del titolo rich-text. Vuoto quando il merchant ha lasciato il titolo in bianco. |
| `titleText` | `string` | Titolo in testo semplice. Usalo per l'`aria-label` della textarea e come intestazione quando non c'è rich text. |
| `hasTitle` | `boolean` | Se è presente una delle due forme di titolo. Condiziona l'intestazione e l'`aria-label` del toggle. |
| `placeholder` | `string` | Placeholder mostrato nel campo nota vuoto. |
| `noteInput` | `string` | Testo attuale della nota. |
| `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Ciclo di vita del salvataggio. Guida la live region con lo stato annunciato. |
| `statusLabel` | `string` | Annuncio risolto della live region per `status`. Vuoto quando idle. |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Stato per l'icona. Come `status`, tranne che una nota compressa con testo risulta come `saved`. |
| `isExpanded` | `boolean` | Se il campo nota è espanso. La compressione è solo visiva; la nota persiste sempre. |
| `onNoteChange` | `(value: string) => void` | Aggiorna il testo della nota. Chiamala con il nuovo valore, per esempio dall'`onInput` della textarea. |
| `onNoteBlur` | `(event: unknown) => void` | Salva la nota. Collegala direttamente all'`onBlur` della textarea; legge il valore dall'evento. |
| `onToggle` | `() => void` | Alterna lo stato espanso e compresso. |
**La nota si salva su `onNoteBlur`, non a ogni pressione di tasto.** Collega sia `onNoteChange` sia `onNoteBlur`, altrimenti le note non persistono mai in modo silenzioso. Mantieni il testo di stato in una live region così gli screen reader annunciano saving e saved.
## Design
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.
### Text
La sezione **Text** in Design ti consente di controllare la tipografia di due elementi. Usa il selettore **Text element** per passare da uno all'altro.
**Title** — l'intestazione della sezione sopra il campo nota. Il grassetto si imposta nel Rich Text Editor sopra (nella scheda Settings). Il colore del testo si imposta nella sezione Toggle di Design.
| Impostazione | Cosa controlla | Predefinito |
| ------------------ | --------------------------------------- | ----------- |
| **Size** | Dimensione del font. | `14px` |
| **Line height** | Moltiplicatore dell'altezza della riga. | `1.4` |
| **Letter spacing** | Spaziatura tra i caratteri. | Normal |
**Note field** — il testo all'interno della textarea in cui gli acquirenti digitano la loro nota.
| Impostazione | Cosa controlla | Predefinito |
| ------------------ | -------------------------------------------------------- | ------------------------------------------- |
| **Text color** | Colore del testo della nota. | Ereditato dal colore del testo del carrello |
| **Size** | Dimensione del font. | `14px` |
| **Weight** | Peso del font — Light, Regular, Medium, Semibold o Bold. | Regular (400) |
| **Line height** | Moltiplicatore dell'altezza della riga. | `1.5` |
| **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).