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

​
Поведение

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

​
Настройки

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

​
Размещение и ограничения

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

​
Пользовательский шаблон

Поддерживает пользовательский шаблон на вкладке Code, который заменяет встроенную разметку этого блока вашим JSX. Вот props, которые он получает.
logoUrl — единственный prop, у которого нет встроенного эквивалента: загруженное изображение Header отображается только пользовательским шаблоном. Если продавец задал логотип, а он не отображается — причина в этом.
Если вы не привяжете onClose к чему-либо, покупатели всё равно смогут закрыть drawer, кликнув по оверлею или нажав Escape, но у вашего header не будет кнопки закрытия. Всегда включайте её.

​
Дизайн

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

​
Текст

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