应用脚本和主题 defer 顺序冲突报未定义
现象#
应用注入的脚本比主题脚本先执行,控制台报 Uncaught ReferenceError: Shopify is not defined,刷新几次又偶尔正常。
原因#
- ScriptTag 不支持 defer,脚本插在 head 末尾,早于主题的 defer 脚本
- 主题脚本带 defer 后按文档顺序执行,应用脚本插入位置不同结果就不同
- 应用用 DOMContentLoaded 初始化,事件已经过去不再触发
- 多个应用各自注入 jQuery,后加载的覆盖前一个版本
处理步骤#
- 初始化前先判断
document.readyState再决定是否监听 - 不要依赖全局
$,改用自带模块或先检测 window.Shopify - 把初始化挂到自定义事件上,由主题在就绪之后再统一触发
- 在 DevTools 的
Network面板确认脚本真实执行顺序 - 多个脚本共存时统一依赖版本,避免重复引入同一个库文件
验收标准#
控制台无 ReferenceError,连续刷新 10 次挂件都能正常初始化。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。