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

# Блок баннера

> Блок Banner в Aftersell Cart: баннер с сообщением внутри выдвижной корзины, с опциональным таймером обратного отсчёта.

> Блок **Banner** — это полоса с сообщением внутри корзины, полезная для промоакций, сообщений о доставке или создания срочности, например уведомления о бесплатной доставке, объявления о распродаже или сообщения «корзина зарезервирована». Он может включать работающий таймер обратного отсчёта.

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-banner-block-reservation-countdown.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=8aff1b333a8ebe9005d2d70bc7f9a2cd" alt="Блок баннера в выдвижной корзине Aftersell с сообщением об обратном отсчёте резервирования" width="1366" height="106" data-path="images/aftersell/cart-banner-block-reservation-countdown.png" />
</Frame>

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

* **Обратный отсчёт запускается только при выполнении всех трёх условий:** таймер включён, текст содержит токен `{{timer}}`, и длительность больше нуля. В противном случае баннер отображается как статический текст.
* Таймер отсчитывает время в формате `MM:SS` и запоминается для вкладки покупателя (он сохраняется при навигации по вашему магазину в течение сеанса), поэтому не перезапускается на каждой странице.
* **Когда таймер достигает `00:00`, весь баннер исчезает**, поэтому покупатели никогда не видят обнулённые часы.
* В предпросмотре редактора таймер работает по кругу, и баннер никогда не скрывается, чтобы вы могли продолжать его оформлять.

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

| Настройка                 | Что она контролирует                                                                                                                                            | По умолчанию                                   |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Text**                  | Сообщение с форматированным текстом. Включите токен `{{timer}}`, чтобы показать обратный отсчёт.                                                                | `Your cart is reserved for {{timer}} minutes!` |
| **Countdown timer**       | Включает или выключает обратный отсчёт.                                                                                                                         | Вкл.                                           |
| **Minutes** / **Seconds** | Длительность обратного отсчёта. Два числовых поля, отображаемых после включения **Countdown timer**, показываются в формате `MM:SS` там, где стоит `{{timer}}`. | 10 минут                                       |

Текст поддерживает перевод.

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

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

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

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

| Проп                          | Тип       | Для чего он нужен                                                                                                                  |
| ----------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `text`                        | `string`  | Сообщение баннера в виде очищенного HTML, где токен `{{timer}}` **уже заменён** работающим обратным отсчётом.                      |
| `shouldUseTimer`              | `boolean` | `true`, когда обратный отсчёт для этого баннера запущен.                                                                           |
| `isTimerExpiredAndShouldHide` | `boolean` | `true`, когда обратный отсчёт достиг нуля.                                                                                         |
| `isLoading`                   | `boolean` | Здесь всегда `false`: блок отображает встроенный скелетон во время загрузки и вызывает ваш шаблон только после готовности корзины. |

Отдельного пропа `timer` нет. Обратный отсчёт интерполируется в `text` за вас, поэтому достаточно отобразить `text`.

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomTemplate(props) {
  // The built-in banner removes itself at 00:00; a custom template must do the same.
  if (props.shouldUseTimer && props.isTimerExpiredAndShouldHide) return null;

  return (
    <div className="cart-external-banner" style={{ padding: '10px', textAlign: 'center' }}>
      <span dangerouslySetInnerHTML={{ __html: props.text }} />
    </div>
  );
}
```

<Warning>
  Этот ранний return важен. Без него ваш баннер продолжит отображаться после истечения таймера, а поскольку токен уже подставлен, покупатели увидят застывшее `00:00`.
</Warning>

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

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

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

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

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

<div id="style">
  ### Стиль
</div>

| Настройка            | Что она контролирует                                                         | По умолчанию |
| -------------------- | ---------------------------------------------------------------------------- | ------------ |
| **Background color** | Заливка фона баннера.                                                        | `#000000`    |
| **Text color**       | Резервный цвет текста (переопределяется редактором форматированного текста). | `#ffffff`    |
| **Border**           | Есть ли у баннера граница — **None** (0px) или **Show** (1px).               | None         |
| **Border color**     | Цвет границы, когда выбрано **Show**.                                        | Прозрачный   |

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