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

> В этой статье объясняется, как исправить отсутствующие стрелки карусели в действующей витрине, когда они отображаются в предпросмотре редактора.

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

Если вы столкнулись с проблемой отсутствия стрелок карусели в модуле апсейлов Upcart, обычно это связано с проблемой совместимости с темой вашего магазина.

Чтобы решить её, вы можете вручную добавить стрелки, применив настройку с помощью пользовательского HTML в настройках редактора Upcart.

**Чтобы получить доступ к полям пользовательского кода в Upcart:**

**Cart Editor** > **Settings**, затем вкладки **Custom HTML** и **Custom CSS**. Settings — это строка вкладок; всё, что не помещается, находится за **More settings**.

***

<div id="html">
  ## HTML
</div>

Для этого исправления откройте выпадающее меню HTML и выберите **«Scripts (before load)»**, затем вставьте следующий код в этот раздел:

```
<script>
  window.upcartSubscribeCartOpened(() => {
    setTimeout(() => {
      // The cart may render inside a shadow root, where document.querySelector
      // cannot reach it. Search the shadow root when there is one.
      const host = document.getElementById('upCart');
      const scope = host?.shadowRoot ?? document;

      const buttonLeft = scope.querySelector('.control-arrow.control-prev');
      if (buttonLeft) buttonLeft.innerText = "<";

      const buttonRight = scope.querySelector('.control-arrow.control-next');
      if (buttonRight) buttonRight.innerText = ">";
    }, 300);
  });
</script>
```

<Warning>
  **Не используйте здесь голый `document.querySelector`.** В большинстве магазинов Upcart отрисовывается внутри shadow root (это значение по умолчанию для новых установок), а `document.querySelector` не может заглянуть внутрь него — скрипт ничего не найдёт и без проверок `if` выбросит ошибку на `null`. Строка `host?.shadowRoot ?? document` выше работает в обоих случаях.
</Warning>

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

Вот как должны выглядеть ваши настройки пользовательского HTML в Upcart:

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="Настройки Custom HTML в Upcart со скриптом стрелок карусели в Scripts Before Load" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

<div id="css">
  ## CSS
</div>

Если у вас всё ещё есть проблемы с положением стрелок карусели, попробуйте применить следующее исправление CSS:

```
.carousel.carousel-slider .control-next {  
  right: -34px !important;  
}
```

***

<div id="explanation">
  ## Объяснение
</div>

Мы часто используем псевдоэлементы CSS (`::before`), содержащиеся внутри кнопок, для отображения стрелок карусели. Однако некоторые темы магазинов блокируют отрисовку псевдоэлементов, из-за чего стрелки карусели исчезают из корзины-шторки.

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