Skip to main content

​
Что делает Shadow DOM

Когда настройка Render Cart in Shadow DOM включена, Upcart создаёт автономное пространство, которое отделяет его стили и скрипты от остальной части вашего магазина. Это означает:
  • Глобальный CSS вашей темы не может переопределить дизайн Upcart.
  • Стили Upcart также не будут мешать вашей теме.
  • Корзина остаётся единообразной на разных устройствах и темах.
Можно представить Shadow DOM как «защитный пузырь» вокруг вашей корзины, который помогает ей выглядеть и работать так, как задумано.

​
Как это происходит

Темы Shopify и сторонние темы часто содержат глобальный CSS и JavaScript, которые могут непреднамеренно влиять на внешний вид или поведение Upcart. Настройка Render Cart in Shadow DOM помогает предотвратить эти конфликты, изолируя корзину-drawer Upcart в собственном защищённом окружении. При включении Shadow DOM сохраняет дизайн и макет вашей корзины неизменными, независимо от обновлений темы или изменений пользовательского кода. Однако если вашей теме или стороннему приложению нужен прямой доступ к элементам корзины, такая изоляция иногда может создавать сложности интеграции.

​
Технические аспекты

Если вам или разработчику нужно изменять элементы внутри Upcart с помощью JavaScript, важно использовать правильные ссылки на документ:
  • Используйте upcartDocumentOrShadowRoot при обращении к элементам внутри Upcart.
  • Используйте document при обращении к элементам вне Upcart (например, к шапке или подвалу вашей темы Shopify).
Хотя Shadow DOM изолирован, Upcart по-прежнему предоставляет способы взаимодействия с вашей темой и другими приложениями через свой Public API и вспомогательные функции.

​
Устранение неполадок и ограничения

В большинстве случаев включение Shadow DOM автоматически устраняет конфликты CSS и макета.
Однако всегда могут быть сценарии, в которых проблемы всё же возникают:
  • Приложения ценообразования: если другому приложению нужно напрямую изменять цены или поведение оформления заказа внутри корзины, Shadow DOM может это затруднить, поскольку скрывает внутреннюю структуру Upcart от внешних скриптов.
  • JavaScript на уровне темы: пользовательские скрипты, использующие document.querySelector(), могут не находить элементы корзины при включённом Shadow DOM.
Если вам нужно протестировать поведение магазина с такими интеграциями, вы можете временно отключить настройку: откройте Cart Editor, перейдите в Settings → Cart settings, разверните Advanced Settings и снимите флажок Render cart in shadow DOM.