> ## 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.
# Bloc Notes
> Le bloc Notes du panier Aftersell : un champ de notes de commande repliable qui enregistre les instructions de l'acheteur dans le panier et la commande.
> Le bloc **Notes** est un champ repliable où les acheteurs peuvent ajouter des notes de commande ou des instructions spéciales (messages cadeaux, instructions de livraison, etc.) sans quitter le panier. La note est enregistrée dans le panier et transmise à la commande.
## Comportement
* Le champ est un **élément repliable**, replié par défaut. Le repli est purement visuel — une note enregistrée s'applique toujours. Lorsqu'il est replié avec une note enregistrée, une coche s'affiche pour que l'acheteur sache que sa note est bien stockée.
* La note **s'enregistre lorsque l'acheteur clique ailleurs** (au blur), avec un retour de statut saving / saved / error.
* Si la note du panier change ailleurs — sur la page `/cart` ou dans un autre onglet — le champ se synchronise avec elle, sauf si l'acheteur a déjà commencé à taper, afin que sa note en cours ne soit jamais écrasée.
## Paramètres
| Paramètre | Ce qu'il contrôle | Défaut |
| --------------- | ------------------------------------------------ | ------------------------------------- |
| **Title** | Le libellé du champ. Texte enrichi, traduisible. | `Order notes` |
| **Placeholder** | Le texte indicatif du champ. Traduisible. | `Special instructions for your order` |
## Placement et limites
* **Région :** corps ou bas.
* **Maximum :** 1 par état de panier.
* **État :** panier rempli uniquement.
* Non ajouté par défaut. Non verrouillé — vous pouvez le supprimer ou le masquer.
## Modèle personnalisé
Prend en charge un [modèle personnalisé](/fr/aftersell/cart/custom-templates) depuis son onglet Code, qui remplace le balisage intégré de ce bloc par votre JSX. Voici les props qu'il reçoit.
| Prop | Type | À quoi elle sert |
| --------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| `titleHtml` | `string` | HTML de titre en texte enrichi assaini. Vide lorsque le marchand a laissé le titre vide. |
| `titleText` | `string` | Titre en texte brut. Utilisez-le pour l'`aria-label` du textarea, et comme titre lorsqu'il n'y a pas de texte enrichi. |
| `hasTitle` | `boolean` | Indique si l'une ou l'autre forme de titre est présente. Conditionne le titre et l'`aria-label` de l'interrupteur. |
| `placeholder` | `string` | Texte indicatif affiché dans le champ de note vide. |
| `noteInput` | `string` | Texte actuel de la note. |
| `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Cycle de vie de l'enregistrement. Pilote la région live de statut vocalisée. |
| `statusLabel` | `string` | Annonce résolue de la région live pour `status`. Vide en état idle. |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Statut pour l'icône. Comme `status`, sauf qu'une note repliée avec du texte est lue comme `saved`. |
| `isExpanded` | `boolean` | Indique si le champ de note est déplié. Le repli est purement visuel ; la note persiste toujours. |
| `onNoteChange` | `(value: string) => void` | Met à jour le texte de la note. Appelez-la avec la nouvelle valeur, par exemple depuis le `onInput` du textarea. |
| `onNoteBlur` | `(event: unknown) => void` | Enregistre la note. Attachez-la directement au `onBlur` du textarea ; elle lit la valeur depuis l'événement. |
| `onToggle` | `() => void` | Bascule l'état déplié/replié. |
**La note s'enregistre sur `onNoteBlur`, pas à chaque frappe.** Connectez à la fois `onNoteChange` et `onNoteBlur`, sinon les notes ne persistent silencieusement jamais. Gardez le texte de statut dans une région live afin que les lecteurs d'écran annoncent l'enregistrement en cours et terminé.
## Design
Stylisez ce bloc avec sa section **Design** dans le panneau de paramètres. Il s'agit de surcharges par bloc qui se superposent à votre design global et y reviennent lorsqu'elles sont vides.
### Text
La section **Text** dans Design vous permet de contrôler la typographie de deux éléments. Utilisez le sélecteur **Text element** pour basculer entre eux.
**Title** — l'intitulé de la section au-dessus du champ de note. Le gras se règle dans l'éditeur de texte enrichi ci-dessus (dans l'onglet Settings). La couleur du texte se règle dans la section Toggle de Design.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | -------------------------------------- | ------ |
| **Size** | La taille de la police. | `14px` |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.4` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
**Note field** — le texte à l'intérieur du textarea où les acheteurs saisissent leur note.
| Paramètre | Ce qu'il contrôle | Défaut |
| ------------------ | ------------------------------------------------------------------- | ---------------------------------------- |
| **Text color** | La couleur du texte de la note. | Héritée de la couleur de texte du panier |
| **Size** | La taille de la police. | `14px` |
| **Weight** | La graisse de la police — Light, Regular, Medium, Semibold ou Bold. | Regular (400) |
| **Line height** | Le multiplicateur de hauteur de ligne. | `1.5` |
| **Letter spacing** | L'espacement entre les caractères. | Normal |
Que sont les paramètres de design ? Apprenez-en plus ici : [Paramètres de design](/fr/aftersell/cart/design-settings).