Shopify 应用与扩展

应用脚本和主题 defer 顺序冲突报未定义

现象#

应用注入的脚本比主题脚本先执行,控制台报 Uncaught ReferenceError: Shopify is not defined,刷新几次又偶尔正常。

原因#

  • ScriptTag 不支持 defer,脚本插在 head 末尾,早于主题的 defer 脚本
  • 主题脚本带 defer 后按文档顺序执行,应用脚本插入位置不同结果就不同
  • 应用用 DOMContentLoaded 初始化,事件已经过去不再触发
  • 多个应用各自注入 jQuery,后加载的覆盖前一个版本

处理步骤#

  1. 初始化前先判断 document.readyState 再决定是否监听
  2. 不要依赖全局 $,改用自带模块或先检测 window.Shopify
  3. 把初始化挂到自定义事件上,由主题在就绪之后再统一触发
  4. 在 DevTools 的 Network 面板确认脚本真实执行顺序
  5. 多个脚本共存时统一依赖版本,避免重复引入同一个库文件

验收标准#

控制台无 ReferenceError,连续刷新 10 次挂件都能正常初始化。

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