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

# Модуль объявлений

> Узнайте, как настроить панель объявлений в вашем drawer Upcart, включая высоту, положение, таймер обратного отсчета, форматирование текста и цвета.

<div id="height">
  # Высота
</div>

Настройка Height управляет толщиной панели объявлений. Доступны три варианта: **Slim**, **Normal** и **Thick**. Slim делает drawer более компактным, освобождая место для содержимого корзины, что особенно полезно на небольших экранах. Normal — промежуточный вариант. Thick обеспечивает больший визуальный акцент, помогая вашему сообщению выделяться для покупателей.

<div id="position">
  # Положение
</div>

Используйте настройку Position, чтобы выбрать, где панель объявлений будет отображаться внутри cart drawer: **Before products** (перед товарами) или **After products** (после товаров).

* **Before products** размещает панель в верхней части тела корзины, непосредственно под заголовком.
* **After products** размещает ее в нижней части тела корзины, прямо над футером — ниже модулей примечаний и апселлов, если они тоже размещены там.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-bar-position-comparison.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=10c93ddb37a1b682ee6ffd8c22ca0365" alt="Две корзины Upcart, сравнивающие панель объявлений над и под товарами" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-duration">
  ## Длительность таймера
</div>

Если вы хотите, чтобы объявление истекало через заданное время, задайте обратный отсчет в поле **Timer duration**. Формат — `MM:SS`: `05:00` для пяти минут, `00:30` для тридцати секунд. Секунды должны быть в диапазоне `00`–`59`; поле не принимает большие значения.

Обратный отсчет запускается только в том случае, если текст объявления содержит переменную таймера. Когда время истекает, вся панель объявлений автоматически удаляется из корзины.

<Note>
  Встроенный таймер обратного отсчета основан на сессии и отсчитывает от заданного количества минут. Он не поддерживает повторяющиеся или ежедневные отсчеты, которые сбрасываются в определенное время (например, отсчет до 14:00 каждый день). Эта функциональность в настоящее время недоступна в Upcart.
</Note>

<div id="announcement-text">
  ## Текст объявления
</div>

Этот раздел позволяет ввести и отформатировать сообщение, отображаемое в баннере объявлений. Вы можете стилизовать отдельные части текста с помощью панели форматирования над полем ввода, которая включает жирный шрифт, курсив, подчеркивание и цвет.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-color-picker-open-styling.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=b5cf7eef319675ff522346102babd4ff" alt="Открытый выбор цвета для стилизации текста в редакторе текста объявления" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  Поле Announcement Text не поддерживает гиперссылки — в панели форматирования нет кнопки ссылки или URL, а вставленные теги `<a>` или Markdown-ссылки удаляются при сохранении. Чтобы сделать объявление кликабельным или включить ссылку, используйте вместо этого модуль **Custom HTML** (см. ниже).
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### Добавление ссылки или URL в объявление
</div>

Поскольку встроенное поле Announcement Text не отображает гиперссылки, вы можете заменить или дополнить панель объявлений, добавив ссылку через Custom HTML:

1. Перейдите в **Upcart > Cart Editor > Settings > Custom HTML**.

2. Установите **HTML Location** в значение **Above announcements/rewards** (чтобы отображаться над панелью объявлений) или **Below header/announcements/rewards** (чтобы отображаться прямо под ней).

3. Вставьте фрагмент с вашей ссылкой, например:

   ```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <div style="text-align: center; padding: 8px;">
     <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;">
       Shop the sale →
     </a>
   </div>
   ```

4. Нажмите **Save**, затем протестируйте в вашей действующей корзине.

Подробнее о расположениях Custom HTML и стилизации см. [Custom HTML](/ru/upcart/custom_html) и [Custom CSS](/ru/upcart/custom_css). Служба поддержки Upcart не пишет и не отлаживает пользовательский код — обратитесь к эксперту Shopify, если вам нужна помощь с его созданием.

Если вы используете функцию обратного отсчета, вставьте переменную таймера прямо в ваше сообщение. Используйте `{{timer}}` для корзин V2 или `{TIMER}` для корзин V1.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-announcement-text-field-timer.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=4ba5a19c53cfefb36cc37c1d560c6b3e" alt="Поле текста объявления с добавленной переменной обратного отсчета таймера" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

<div id="important">
  ## Важно
</div>

Обязательно вводите переменную таймера вручную (`{{timer}}` для V2, `{TIMER}` для V1), а не копируйте ее. Это позволит избежать скрытых проблем с форматированием, которые могут помешать корректному отображению таймера в вашей действующей корзине.

<div id="font-size">
  # Размер шрифта
</div>

Вы можете управлять размером текста объявления с помощью ползунка — доступны значения от 10px до 24px. Это помогает обеспечить читаемость как на мобильных устройствах, так и на компьютерах.

<div id="colors">
  # Цвета
</div>

Background Color позволяет задать общий цвет заливки панели объявлений. Border Color позволяет настроить горизонтальные линии над и под баннером для оформленного вида контейнера.

<div id="advanced-timer-configuration">
  # Расширенная настройка таймера
</div>

Для дополнительной функциональности можно использовать JavaScript для настройки таймера обратного отсчета. Добавляйте свой скрипт в раздел **«Scripts (Before Load)»**, а не в модуль Custom HTML. Это требование, связанное со временем загрузки, а не ограничение безопасности: Custom HTML выполняет скрипты, но они запускаются слишком поздно, чтобы надежно подключиться к событию загрузки корзины. Раздел «Scripts (Before Load)» запускает ваш код до загрузки корзины, поэтому колбэки, такие как `upcartSubscribeCartLoaded`, срабатывают корректно. Пример кода:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<script>
  window.upcartSubscribeCartLoaded(function(event) {
    // Your countdown timer code here
    // event.cart contains the cart object with .items[], .total, .currency
  });
</script>
```

Примечание об устаревшем API: window\.upcartOnCartLoaded по-прежнему работает, но объявлен устаревшим и выводит предупреждение в консоль. Используйте upcartSubscribeCartLoaded для всех новых скриптов.

Обязательно тщательно проверяйте размещение и синтаксис вашего кода. Некоторые ограничения платформы всё еще могут влиять на обработку скриптов.