Skip to main content

Обзор

Если вы столкнулись с проблемой отсутствия стрелок карусели в модуле апсейлов Upcart, обычно это связано с проблемой совместимости с темой вашего магазина. Чтобы решить её, вы можете вручную добавить стрелки, применив настройку с помощью пользовательского HTML в настройках редактора Upcart. Чтобы получить доступ к полям пользовательского кода в Upcart: Cart Editor > Settings, затем вкладки Custom HTML и Custom CSS. Settings — это строка вкладок; всё, что не помещается, находится за More settings.

HTML

Для этого исправления откройте выпадающее меню HTML и выберите «Scripts (before load)», затем вставьте следующий код в этот раздел:
Не используйте здесь голый document.querySelector. В большинстве магазинов Upcart отрисовывается внутри shadow root (это значение по умолчанию для новых установок), а document.querySelector не может заглянуть внутрь него — скрипт ничего не найдёт и без проверок if выбросит ошибку на null. Строка host?.shadowRoot ?? document выше работает в обоих случаях.
Примечание об устаревших функциях: колбэки window.upcartOnCartOpened по-прежнему работают, но являются устаревшими и выводят предупреждения в консоль. Используйте upcartSubscribeCartOpened во всех новых скриптах.
Вот как должны выглядеть ваши настройки пользовательского HTML в Upcart: Настройки Custom HTML в Upcart со скриптом стрелок карусели в Scripts Before Load

CSS

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

Объяснение

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