Shopify Narrative主题导入Fancybox失败：$.fancybox非函数问题排查

这个错误的核心原因几乎都是jQuery实例冲突，结合你的情况和网站源码来看，问题大概率出在以下几点：

1. 重复加载jQuery导致实例覆盖 #

Shopify的Narrative主题默认已经内置了jQuery（查看你的网站源码，确实在页面底部加载了主题自带的jQuery），而你手动添加了jquery-latest.min.js，这会导致页面加载两个不同的jQuery实例：

• 你先加载了自己的jQuery，接着加载Fancybox，此时Fancybox会绑定到这个jQuery实例上
• 之后主题自带的jQuery又被加载，覆盖了全局的$和jQuery变量，新的jQuery实例并没有Fancybox的方法，所以调用$(...).fancybox()时就会报错

解决方法： #

直接移除你手动添加的这行代码：

{{ 'jquery-latest.min.js' | asset_url | script_tag }}

完全使用主题自带的jQuery即可，Shopify主题的jQuery版本通常都能兼容Fancybox 3。

2. 加载顺序问题（确保Fancybox在jQuery之后加载） #

即使你移除了重复的jQuery，也要保证Fancybox的JS文件是在主题自带的jQuery之后加载的。建议把你的Fancybox加载代码放在theme.liquid的</body>标签之前（而不是页面头部），这样能确保它在主题的jQuery加载完成后再执行。

调整后的代码应该是：

{{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
{{ 'jquery.fancybox.js' | asset_url | script_tag }}

3. 检查是否启用了jQuery noConflict模式 #

有些Shopify主题会使用jQuery.noConflict()来避免和其他库冲突，这时候全局的$变量会被释放，不再指向jQuery。如果你的代码里用了$(...)来调用fancybox，就会出错。

解决方法： #

把调用fancybox的代码改成使用jQuery代替$，或者在ready回调里重新映射$：

// 方式1：直接用jQuery
jQuery(document).ready(function() {
  jQuery('.your-image-selector').fancybox();
});

// 方式2：在回调里映射$
jQuery(document).ready(function($) {
  $('.your-image-selector').fancybox();
});

验证方法 #

修改后，你可以在浏览器控制台输入以下命令，检查Fancybox是否正确绑定到jQuery实例：

jQuery.fn.fancybox

如果返回一个函数，说明绑定成功；如果返回undefined，则需要重新检查加载顺序和是否有其他冲突。

内容的提问来源于stack exchange，提问作者bee