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

# Пользовательский HTML

> Добавляйте пользовательский HTML или JavaScript в корзину с помощью встроенного HTML-редактора.

Раздел **Custom HTML** в Upcart позволяет вставлять пользовательский код в различные части корзины-шторки.\
Вы также можете писать JavaScript с помощью тегов `<script>` и взаимодействовать с корзиной через [Public API](https://rokt.notion.site/upcart-public-api) Upcart (например, `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Где это найти**
</div>

Перейдите в: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **Как это работает**
</div>

Выпадающий список **HTML Location** позволяет выбрать, где код появится внутри макета корзины. В зависимости от вашего выбора код будет внедрён в соответствующую область корзины.

С его помощью вы можете добавить:

* Пользовательские сообщения
* Текст о доверии
* Интеграции с приложениями
* Аналитические сниппеты
* Хуки для стилизации
* Промоконтент, например баннеры с персонализированными предложениями или скидками
* Гарантии на товары, укрепляющие доверие покупателей

<div id="dynamic-tokens">
  ## **Динамические токены**
</div>

Вы можете использовать следующий токен внутри любого поля Custom HTML для вставки актуальных данных корзины:

| Токен                 | Что он отображает                                                              |
| --------------------- | ------------------------------------------------------------------------------ |
| `{{UPCART_SUBTOTAL}}` | Текущий промежуточный итог корзины, отформатированный в валюте вашего магазина |

**Пример:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

Этот токен работает во всех полях расположения HTML, кроме **Scripts (Before Load)**, где вместо него следует использовать JavaScript API. Это единственный динамический токен, доступный в полях Custom HTML.

<div id="available-html-locations">
  ## **Доступные расположения HTML**
</div>

|                                        |                                                                                                                                                           |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Расположение                           | Описание                                                                                                                                                  |
| **Above announcements/rewards**        | Верхняя часть корзины, под заголовком корзины.                                                                                                            |
| **Below header/announcements/rewards** | Сразу под любыми объявлениями или панелями вознаграждений.                                                                                                |
| **Between each line item**             | Вставляется под каждым товаром в корзине.                                                                                                                 |
| **Below cart items**                   | Непосредственно под товарными позициями корзины, над нижними модулями.                                                                                    |
| **Above footer/add-ons**               | Под товарами корзины и апсейлами, над дополнениями.                                                                                                       |
| **Above checkout button**              | Внутри футера, непосредственно над кнопкой оформления заказа и промежуточным итогом.                                                                      |
| **Below checkout button**              | Внутри футера, непосредственно под кнопкой оформления заказа.                                                                                             |
| **Bottom of cart**                     | В самом низу шторки (за пределами футера).                                                                                                                |
| **On empty cart screen**               | Отображается рядом с текстом «Your cart is empty».                                                                                                        |
| **Scripts (Before Load)**              | Невидимая область для выполнения JavaScript **до** загрузки корзины. Идеально подходит для отслеживания, условной логики или пользовательского поведения. |

<div id="custom-css-optional">
  ## **Пользовательский CSS (необязательно)**
</div>

Вы можете стилизовать свой HTML с помощью редактора **Custom CSS**, который находится в:\
**Upcart > Cart Editor > Settings > Custom CSS**

Например, чтобы настроить выравнивание пустой корзины:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```