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 设置通过将 Upcart 的 cart drawer 隔离在其自身受保护的环境中来防止这些冲突。启用后，无论主题更新或自定义代码变更，Shadow DOM 都能保持你的购物车设计和布局一致。 但是，如果你的主题或第三方应用需要直接访问购物车元素，这种隔离有时会带来集成上的挑战。

​
技术注意事项

如果你或开发者需要使用 JavaScript 修改 Upcart 内部的元素，使用正确的文档引用非常重要：
  • 针对 Upcart 内部的元素时，使用 upcartDocumentOrShadowRoot。
  • 针对 Upcart 外部的元素（例如你的 Shopify 主题的页眉或页脚）时，使用 document。
即使 Shadow DOM 是隔离的，Upcart 仍然通过其 Public API 和辅助函数提供了与主题和其他应用交互的方式。

​
故障排除与限制

在大多数情况下，启用 Shadow DOM 会自动修复 CSS 和布局冲突。
不过，总有一些场景可能仍会遇到问题：
  • **定价应用：**如果另一个应用需要直接修改购物车内的价格或结账行为，Shadow DOM 会使其变得困难，因为它对外部脚本隐藏了 Upcart 的内部结构。
  • **主题层面的 JavaScript：**在启用 Shadow DOM 时，使用 document.querySelector() 的自定义脚本可能找不到购物车元素。
如果你需要针对这些集成测试商店的行为，可以临时禁用它：打开购物车编辑器，前往 Settings → Cart settings，展开 Advanced Settings，然后取消勾选 Render cart in shadow DOM。