Shopify 应用与扩展

多个应用脚本加载顺序冲突导致功能异常

现象#

单独装某个应用正常,和另一个应用一起装就报 $ is not defined 或购物车更新失效。

原因#

  • 两个应用都引入不同版本的 jQuery 或同一工具库,后者覆盖前者
  • 脚本用 defer 与 async 混用,执行时依赖的 DOM 或全局变量还没就绪
  • 都监听 cart:updated 类事件但互相 stopPropagation
  • 应用 A 改写 window.fetch,应用 B 的请求被拦截

处理步骤#

  1. 在 Network 面板按时间排序,确认哪个库先加载、被谁覆盖
  2. 让两个应用都改用 type="module" 或统一 defer,避免阻塞顺序不确定
  3. 在自己的脚本里做能力检测而不是假设全局变量存在
  4. 定位冲突后联系其中一个应用方改为沙箱式实现,或替换功能重叠的应用

验收标准#

两个应用同时启用时各自功能正常,控制台无全局变量覆盖报错,购物车流程无中断。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。