> ## 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. # Блок Notes > Блок Notes в Aftersell Cart: сворачиваемое поле примечаний к заказу, которое сохраняет инструкции покупателя в корзину и заказ. > Блок **Notes** — это сворачиваемое поле, где покупатели могут добавить примечания к заказу или особые инструкции (подарочные сообщения, инструкции по доставке и так далее), не покидая корзину. Примечание сохраняется в корзине и переносится в заказ. Блок Notes со сворачиваемым полем примечаний к заказу, где покупатели могут добавить особые инструкции
## Поведение
* Поле является **сворачиваемым раскрывающимся элементом**, свёрнутым по умолчанию. Сворачивание чисто визуальное — сохранённое примечание всё равно применяется. Если поле свёрнуто и примечание сохранено, отображается галочка, чтобы покупатель знал, что его примечание сохранено. * Примечание **сохраняется, когда покупатель кликает в другое место** (при потере фокуса), с индикацией статуса: сохранение / сохранено / ошибка. * Если примечание корзины изменяется в другом месте — на странице `/cart` или в другой вкладке — поле синхронизируется с ним, если только покупатель уже не начал печатать, чтобы его незавершённое примечание никогда не было перезаписано.
## Настройки
| Настройка | Что она контролирует | По умолчанию | | --------------- | ------------------------------------------------- | ------------------------------------- | | **Title** | Надпись поля. Форматированный текст, переводится. | `Order notes` | | **Placeholder** | Текст-подсказка поля ввода. Переводится. | `Special instructions for your order` |
## Размещение и ограничения
* **Регион:** тело или низ. * **Максимум:** 1 на состояние корзины. * **Состояние:** только заполненная корзина. * Не добавляется по умолчанию. Не заблокирован — вы можете удалить или скрыть его.
## Пользовательский шаблон
Поддерживает [пользовательский шаблон](/ru/aftersell/cart/custom-templates) на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает. | Prop | Тип | Для чего используется | | --------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | | `titleHtml` | `string` | Санитизированный HTML заголовка с форматированием. Пустой, если продавец оставил заголовок пустым. | | `titleText` | `string` | Заголовок в виде обычного текста. Используйте его для `aria-label` текстовой области и как заголовок при отсутствии форматированного текста. | | `hasTitle` | `boolean` | Присутствует ли какая-либо форма заголовка. Управляет заголовком и `aria-label` переключателя. | | `placeholder` | `string` | Подсказка, отображаемая в пустом поле примечания. | | `noteInput` | `string` | Текущий текст примечания. | | `status` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Жизненный цикл сохранения. Управляет озвучиваемой live-областью статуса. | | `statusLabel` | `string` | Готовое объявление live-области для `status`. Пустое в состоянии покоя. | | `displayStatus` | `'idle' \| 'saving' \| 'saved' \| 'error'` | Статус для иконки. Как `status`, за исключением того, что свёрнутое примечание с текстом читается как `saved`. | | `isExpanded` | `boolean` | Развёрнуто ли поле примечания. Сворачивание чисто визуальное; примечание всегда сохраняется. | | `onNoteChange` | `(value: string) => void` | Обновляет текст примечания. Вызывайте с новым значением, например из `onInput` текстовой области. | | `onNoteBlur` | `(event: unknown) => void` | Сохраняет примечание. Прикрепите напрямую к `onBlur` текстовой области; он считывает значение из события. | | `onToggle` | `() => void` | Переключает состояние разворачивания и сворачивания. | **Примечание сохраняется при `onNoteBlur`, а не при каждом нажатии клавиши.** Подключите и `onNoteChange`, и `onNoteBlur`, иначе примечания молча никогда не сохранятся. Держите текст статуса в live-области, чтобы программы чтения с экрана объявляли о сохранении и сохранённом состоянии.
## Дизайн
Стилизуйте этот блок через его раздел **Design** в панели настроек. Это переопределения на уровне блока, которые накладываются поверх вашего глобального дизайна и возвращаются к нему, если оставлены пустыми.
### Текст
Раздел **Text** в Design позволяет управлять типографикой двух элементов. Используйте селектор **Text element**, чтобы переключаться между ними. **Title** — заголовок раздела над полем примечания. Полужирное начертание задаётся в редакторе форматированного текста выше (на вкладке Settings). Цвет текста задаётся в разделе Toggle в Design. | Настройка | Что она контролирует | По умолчанию | | ------------------ | ------------------------ | ------------ | | **Size** | Размер шрифта. | `14px` | | **Line height** | Множитель высоты строки. | `1.4` | | **Letter spacing** | Межбуквенный интервал. | Обычный | **Note field** — текст внутри текстовой области, где покупатели вводят примечание. | Настройка | Что она контролирует | По умолчанию | | ------------------ | ---------------------------------------------------------------- | ----------------------------------- | | **Text color** | Цвет текста примечания. | Наследуется из цвета текста корзины | | **Size** | Размер шрифта. | `14px` | | **Weight** | Насыщенность шрифта — Light, Regular, Medium, Semibold или Bold. | Regular (400) | | **Line height** | Множитель высоты строки. | `1.5` | | **Letter spacing** | Межбуквенный интервал. | Обычный | Что такое настройки дизайна? Узнайте больше здесь: [Настройки дизайна](/ru/aftersell/cart/design-settings).