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

# Начало работы с настройками Upcart

> Узнайте, как использовать HTML, CSS и JavaScript для создания пользовательских функций и стилизации вашей корзины-шторки.

⚠️ **Важное уведомление**

Пример настройки в этом документе работает только с V1.0 модулей корзины Upcart. Если вы недавно обновили корзину до версии 2, этот код настроек не будет работать. Вам нужно будет использовать новые селекторы для версии 2, приведённые в [руководстве по миграции.](/ru/upcart/upcart_v20_migration_guide)

Решения для V2.0 см. в остальной документации по настройкам.

<div id="overview">
  # Обзор
</div>

Upcart даёт вам полный контроль над изменением внешнего вида и поведения корзины с помощью **пользовательского HTML**, **пользовательского CSS** и **JavaScript**. Эти инструменты позволяют добавлять новые функции, стилизовать корзину под ваш бренд или внедрять логику для улучшения работы корзины.

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

***

Прежде чем начать, обязательно ознакомьтесь с [политикой настроек Upcart](/ru/upcart/upcart_customization_policy), чтобы знать, что поддерживается нашей командой, а что нет.

<div id="add-content-with-html">
  ## Добавление контента с помощью HTML
</div>

HTML используется для добавления статического контента, такого как текст, баннеры или кнопки, в вашу корзину. Вы можете выбрать одно из нескольких расположений HTML в редакторе **Custom HTML** (например, над кнопкой оформления заказа, внизу корзины, между товарами).

Распространённые сценарии использования:

* Добавление пользовательских сообщений
* Вставка юридических оговорок или ссылок на политики
* Выделение сроков доставки или информации о доставке

**Пример:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Редактор Custom HTML в Upcart с добавлением благодарственного сообщения над кнопкой оформления заказа" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Добавление логики с помощью JavaScript
</div>

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

Оберните код в тег `<script>` и разместите его в **Custom HTML > Scripts (Before Load)** или **Above Announcements**, в зависимости от того, когда он должен выполняться.

**Пример: [Ограничение корзины одним апсейлом за раз](/ru/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **Примечание об устаревших функциях:** колбэки `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` и `window.upcartOnCartLoaded` по-прежнему работают, но являются устаревшими и выводят предупреждения в консоль. Используйте `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` и `upcartSubscribeCartLoaded` во всех новых скриптах.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Редактор Custom HTML Scripts Before Load в Upcart с JavaScript, скрывающим модуль апсейлов" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Примечание для разработчиков:**\
Upcart предоставляет полную [документацию Public API](https://rokt.notion.site/upcart-public-api), в которой перечислены все функции, переменные и рекомендуемые шаблоны, доступные для расширенных настроек. Мы рекомендуем ознакомиться с ней при создании более сложных скриптов или интеграций.

***

<div id="style-your-cart-with-css">
  ## Стилизация корзины с помощью CSS
</div>

CSS управляет внешним видом элементов вашей корзины. Используйте его для настройки отступов, цветов, размеров шрифтов или скрытия нежелательных элементов. **Custom CSS** — одна из вкладок в разделе **Settings** (за **More settings**, если строка вкладок не помещается).

Распространённые сценарии использования:

* Изменение цвета названия товара или кнопок
* Настройка размера шрифта или выравнивания
* Добавление отступов между разделами

**Пример: изменение цвета заголовка апсейлов в V1.0:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Редактор Custom CSS в Upcart со стилизацией цвета заголовка апсейлов и подтверждением сохранения изменений" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Дополнительные ресурсы
</div>

Хотите улучшить свои навыки HTML, CSS или JavaScript? Ознакомьтесь с этими бесплатными инструментами:

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Поддержка по настройкам
</div>

Команда поддержки Upcart не может помочь с внедрением пользовательского кода. Для более сложных изменений мы рекомендуем нанять [эксперта Shopify](https://www.shopify.com/ca/partners/directory).