> ## 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.

# Блок Header

> Блок Header в Aftersell Cart: заголовок, количество товаров, логотип и элемент закрытия, закреплённые вверху drawer-корзины.

> Блок **Header** — это закреплённая верхняя область drawer-корзины, придающая ей чёткий заголовок и очевидный способ закрытия. Вы управляете его макетом, назначая **Title**, **Logo** и **Close button** в левую и правую секции. Поскольку Header закреплён вверху, он остаётся видимым, пока остальная часть корзины прокручивается.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-header-block-title-item-count.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e60cc6dbfe8728eb818d20cf5aa8ae5c" alt="Блок Header с заголовком корзины, количеством товаров и элементом закрытия вверху drawer-корзины" width="689" height="91" data-path="images/aftersell/cart-header-block-title-item-count.png" />
</Frame>

<div id="behavior">
  ## Поведение
</div>

* Header закреплён вверху drawer-корзины и не прокручивается вместе с телом корзины.
* Элемент закрытия всегда доступен и закрывает drawer.

<div id="settings">
  ## Настройки
</div>

| Настройка | Что она контролирует                                                                                                                                                                                                                         | По умолчанию                 |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| **Left**  | Какие элементы отображаются в левой секции (`Title`, `Logo`, `Close button`) и в каком порядке.                                                                                                                                              | `Title`                      |
| **Right** | Какие элементы отображаются в правой секции (`Title`, `Logo`, `Close button`) и в каком порядке.                                                                                                                                             | `Close button`               |
| **Title** | Заголовок корзины в виде форматированного текста. Поддерживает токены `{{cart_item_count}}` и `{{total_price}}`.                                                                                                                             | `Cart • {{cart_item_count}}` |
| **Image** | Изображение, передаваемое пользовательскому шаблону как `props.logoUrl`. Это поле появляется только при активном пользовательском шаблоне, и встроенный header никогда его не отображает. Поддерживаемые форматы: WebP, JPEG, PNG, GIF, SVG. | Нет                          |

Заголовок переводится. Если ваш заголовок оказывается пустым (например, незаданный перевод), корзина по умолчанию показывает **Cart**, чтобы header никогда не был пустым.

Элементы отображаются в том порядке, в котором вы их выбираете, слева направо, и каждый элемент может быть назначен только одной секции одновременно.

<div id="placement-and-limits">
  ## Размещение и ограничения
</div>

* **Регион:** только верх.
* **Максимум:** 1 на состояние корзины.
* **Состояние:** заполненная и пустая корзина (у каждого состояния свой экземпляр Header).
* Добавляется в новые корзины по умолчанию в обоих состояниях. Не заблокирован, поэтому вы можете удалить или скрыть его с помощью переключателя-глаза.

<div id="custom-template">
  ## Пользовательский шаблон
</div>

Поддерживает [пользовательский шаблон](/ru/aftersell/cart/custom-templates) на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает.

<Note>
  `logoUrl` — единственный prop, у которого нет встроенного эквивалента: загруженное изображение Header **отображается только пользовательским шаблоном**. Если продавец задал логотип, а он не отображается — причина в этом.
</Note>

| Prop           | Тип                                       | Для чего используется                                                                                                                 |
| -------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `title`        | `string`                                  | Заголовок header в виде санитизированного HTML, с уже подставленными `{{cart_item_count}}` и `{{total_price}}`.                       |
| `logoUrl`      | `string \| null`                          | Загруженное изображение header. `null`, если продавец его не задал.                                                                   |
| `leftSection`  | `('title' \| 'logo' \| 'close_button')[]` | Элементы, выбранные для левой секции, в порядке отображения.                                                                          |
| `rightSection` | `('title' \| 'logo' \| 'close_button')[]` | Элементы, выбранные для правой секции, в порядке отображения.                                                                         |
| `itemCount`    | `number`                                  | Количество товаров в корзине, как его видит покупатель.                                                                               |
| `onClose`      | `() => void`                              | Закрывает drawer. Привяжите его к вашему элементу закрытия.                                                                           |
| `isLoading`    | `boolean`                                 | Здесь всегда `false`: блок отображает встроенный скелетон во время загрузки и вызывает ваш шаблон только тогда, когда корзина готова. |

<Warning>
  Если вы не привяжете `onClose` к чему-либо, покупатели всё равно смогут закрыть drawer, кликнув по оверлею или нажав Escape, но у вашего header не будет кнопки закрытия. Всегда включайте её.
</Warning>

<div id="design">
  ## Дизайн
</div>

Стилизуйте этот блок через его раздел **Design** в панели настроек. Это переопределения на уровне блока, которые накладываются поверх вашего глобального дизайна и возвращаются к нему, если оставлены пустыми.

<div id="text">
  ### Текст
</div>

Раздел **Text** в Design позволяет управлять типографикой заголовка корзины. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше (на вкладке Settings), а не здесь.

| Настройка          | Что она контролирует     | По умолчанию        |
| ------------------ | ------------------------ | ------------------- |
| **Font**           | Шрифт для заголовка.     | Наследуется из темы |
| **Size**           | Размер шрифта.           | `18px`              |
| **Line height**    | Множитель высоты строки. | `1.3`               |
| **Letter spacing** | Межбуквенный интервал.   | Обычный             |

Что такое настройки дизайна? Узнайте больше здесь: [Настройки дизайна](/ru/aftersell/cart/design-settings).