> ## 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. # Блок Empty cart > Блок Empty cart — контент, который отображается, когда у покупателя нет товаров. > Блок **Empty cart** — это контент, который отображается, когда в корзине нет товаров, обычно сообщение и кнопка «продолжить покупки», чтобы пустой drawer оставался полезным и соответствовал бренду. Он появляется только в **пустом состоянии** корзины; другие блоки (например, Header) могут находиться рядом с ним в том же состоянии. Блок Empty cart с сообщением пустого состояния и призывом к действию продолжить покупки
## Поведение
* Блок появляется только тогда, когда корзина пуста. Как только покупатель добавляет товар, корзина переключается в заполненное состояние, и этот блок заменяется вашим макетом заполненной корзины. * В редакторе ссылка CTA неактивна, поэтому клик по ней не уводит вас со страницы во время работы над дизайном.
## Настройки
| Настройка | Что она контролирует | По умолчанию | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | | **Empty cart text** | Сообщение пустого состояния. Форматированный текст. | `Your cart is empty.` | | **Button text** | Надпись на кнопке. Поддерживает встроенное HTML-форматирование. | `Continue shopping` | | **Button link** | Куда ведёт кнопка. | `/collections/all` | | **Background color** | Цвет фона блока. Пустое значение оставляет его прозрачным, поэтому виден собственный фон корзины. | `transparent` | | **Alignment** | Как выравниваются текст и кнопка блока — **Left** или **Center**. | Center | | **Fit to height** | Заполняет ли блок оставшуюся высоту тела корзины с вертикальным центрированием или занимает высоту по содержимому — **Fill remaining height** или **Fit content**. | Fill remaining height |
## Размещение и ограничения
* **Регион:** тело. * **Максимум:** 1 на состояние корзины. * **Состояние:** только пустая корзина. Этот блок не появляется в заполненном состоянии. Новые корзины по умолчанию также включают Header в пустом состоянии; см. [Как работают корзины?](/ru/aftersell/cart/how-carts-work). * Добавляется в новые корзины по умолчанию. Не заблокирован — вы можете удалить или скрыть его.
## Пользовательский шаблон
Поддерживает [пользовательский шаблон](/ru/aftersell/cart/custom-templates) на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает. | Prop | Тип | Для чего используется | | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | | `text` | `string` | Сообщение пустой корзины в виде санитизированного HTML. | | `cta` | `string` | Надпись кнопки призыва к действию в виде обычного текста. | | `ctaHtml` | `string` | Надпись кнопки призыва к действию в виде санитизированного HTML — то, что отображает встроенная разметка по умолчанию. | | `href` | `string` | Куда указывает призыв к действию. | Этот блок отображается только тогда, когда корзина пуста, поэтому в props нет объекта cart. Отображайте `href` как настоящий ``, а не как навигацию через скрипт, а `text` — через `dangerouslySetInnerHTML`, поскольку это уже санитизированный HTML.
## Дизайн
Стилизуйте этот блок через его раздел **Design** в панели настроек. Это переопределения на уровне блока, которые накладываются поверх вашего глобального дизайна и возвращаются к нему, если оставлены пустыми.
### Текст
Раздел **Text** в Design позволяет управлять типографикой двух элементов. Используйте селектор **Text element**, чтобы переключаться между ними. **Message** — текст сообщения пустого состояния. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше (на вкладке Settings), а не здесь. | Настройка | Что она контролирует | По умолчанию | | ------------------ | ------------------------ | ------------------- | | **Font** | Шрифт для сообщения. | Наследуется из темы | | **Size** | Размер шрифта. | `18px` | | **Line height** | Множитель высоты строки. | `1.3` | | **Letter spacing** | Межбуквенный интервал. | Обычный | **Button label** — текст на кнопке продолжения покупок. Цвет текста задаётся в разделе Button в Design. | Настройка | Что она контролирует | По умолчанию | | ------------------ | ---------------------------------------------------------------- | -------------- | | **Size** | Размер шрифта. | `15px` | | **Weight** | Насыщенность шрифта — Light, Regular, Medium, Semibold или Bold. | Semibold (600) | | **Line height** | Множитель высоты строки. | `1.47` | | **Letter spacing** | Межбуквенный интервал. | Обычный |
### Кнопка
Раздел **Button** позволяет стилизовать кнопку CTA независимо от глобального дизайна кнопок. Используйте переключатель **Default / Hover** для переключения между двумя состояниями. | Настройка | Состояние | Что она контролирует | | -------------------- | --------- | ----------------------------------------------------------------------------------------- | | **Background color** | Default | Заливка кнопки в состоянии покоя. Возвращается к глобальному цвету фона кнопки. | | **Text color** | Default | Цвет надписи кнопки в состоянии покоя. Возвращается к глобальному цвету текста кнопки. | | **Background color** | Hover | Заливка кнопки при наведении курсора покупателем. Возвращается к цвету фона по умолчанию. | | **Text color** | Hover | Цвет надписи кнопки при наведении. Возвращается к цвету текста по умолчанию. | | **Border color** | — | Цвет границы кнопки (оба состояния). Возвращается к глобальному цвету границы кнопки. | | **Border radius** | — | Скругление углов кнопки. Возвращается к глобальному радиусу границы кнопки. | Что такое настройки дизайна? Узнайте больше здесь: [Настройки дизайна](/ru/aftersell/cart/design-settings).