> ## 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.
# Bloque Notes
> El bloque Notes del Aftersell Cart: un campo plegable de notas de pedido que guarda las instrucciones del comprador en el carrito y el pedido.
> El bloque **Notes** es un campo plegable donde los compradores pueden agregar notas de pedido o instrucciones especiales (mensajes de regalo, instrucciones de entrega, etcétera) sin salir del carrito. La nota se guarda en el carrito y se traslada al pedido.
## Comportamiento
* El campo es un **disclosure plegable**, plegado de forma predeterminada. Plegarlo es solo visual — una nota guardada sigue aplicándose. Cuando está plegado con una nota guardada, se muestra una marca de verificación para que el comprador sepa que su nota está almacenada.
* La nota **se guarda cuando el comprador hace clic fuera** (al perder el foco), con retroalimentación de estado de guardando / guardado / error.
* Si la nota del carrito cambia en otro lugar — la página `/cart` u otra pestaña — el campo se sincroniza con ella, a menos que el comprador ya haya empezado a escribir, de modo que su nota en curso nunca se sobrescriba.
## Configuraciones
| Configuración | Qué controla | Predeterminado |
| --------------- | ----------------------------------------------------- | ------------------------------------- |
| **Title** | La etiqueta del campo. Texto enriquecido, traducible. | `Order notes` |
| **Placeholder** | El texto de placeholder del campo. Traducible. | `Special instructions for your order` |
## Ubicación y límites
* **Región:** cuerpo o parte inferior.
* **Máximo:** 1 por estado del carrito.
* **Estado:** solo carrito con artículos.
* No se agrega de forma predeterminada. No está bloqueado — puedes eliminarlo u ocultarlo.
## Plantilla personalizada
Admite una [plantilla personalizada](/es/aftersell/cart/custom-templates) desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.
| Prop | Tipo | Para qué sirve |
| --------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| `titleHtml` | `string` | HTML del título de texto enriquecido sanitizado. Vacío cuando el comerciante dejó el título en blanco. |
| `titleText` | `string` | Título en texto plano. Úsalo para el `aria-label` del textarea, y como encabezado cuando no hay texto enriquecido. |
| `hasTitle` | `boolean` | Si alguna de las formas del título está presente. Condiciona el encabezado y el `aria-label` del toggle. |
| `placeholder` | `string` | Placeholder mostrado en el campo de nota vacío. |
| `noteInput` | `string` | Texto actual de la nota. |
| `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Ciclo de vida del guardado. Alimenta la live region de estado hablado. |
| `statusLabel` | `string` | Anuncio resuelto de la live region para `status`. Vacío cuando está inactivo. |
| `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Estado para el icono. Igual que `status`, excepto que una nota plegada con texto se lee como `saved`. |
| `isExpanded` | `boolean` | Si el campo de nota está expandido. Plegarlo es solo visual; la nota siempre persiste. |
| `onNoteChange` | `(value: string) => void` | Actualiza el texto de la nota. Llámalo con el nuevo valor, por ejemplo desde el `onInput` del textarea. |
| `onNoteBlur` | `(event: unknown) => void` | Guarda la nota. Adjúntalo directamente al `onBlur` del textarea; lee el valor del evento. |
| `onToggle` | `() => void` | Alterna el estado de expandido y plegado. |
**La nota se guarda en `onNoteBlur`, no en cada pulsación de tecla.** Conecta tanto `onNoteChange` como `onNoteBlur`, o las notas silenciosamente nunca persistirán. Mantén el texto de estado en una live region para que los lectores de pantalla anuncien guardando y guardado.
## Diseño
Dale estilo a este bloque con su sección **Design** en el panel de configuración. Son anulaciones por bloque que se aplican encima de tu diseño global y recurren a él cuando están en blanco.
### Text
La sección **Text** de Design te permite controlar la tipografía de dos elementos. Usa el selector **Text element** para alternar entre ellos.
**Title** — el encabezado de la sección encima del campo de nota. La negrita se establece en el Rich Text Editor de arriba (en la pestaña Settings). El color del texto se establece en la sección Toggle de Design.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------- | -------------- |
| **Size** | Tamaño de fuente. | `14px` |
| **Line height** | Multiplicador de altura de línea. | `1.4` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
**Note field** — el texto dentro del textarea donde los compradores escriben su nota.
| Configuración | Qué controla | Predeterminado |
| ------------------ | --------------------------------------------------------- | ------------------------------------- |
| **Text color** | Color del texto de la nota. | Hereda del color de texto del carrito |
| **Size** | Tamaño de fuente. | `14px` |
| **Weight** | Peso de fuente — Light, Regular, Medium, Semibold o Bold. | Regular (400) |
| **Line height** | Multiplicador de altura de línea. | `1.5` |
| **Letter spacing** | Espaciado entre caracteres. | Normal |
¿Qué son las configuraciones de diseño? Aprende más aquí: [Configuraciones de diseño](/es/aftersell/cart/design-settings).