Magento迁移Shopify后HTML中jQuery代码失效问题求助

核心问题 #

从Magento迁移到Shopify后，产品详情页的自定义HTML文档中，<script>标签内依赖RequireJS的jQuery代码无法正常执行，且涉及1000+产品，无法逐个重写代码。

可行解决方案 #

1. 批量移除RequireJS包裹逻辑（推荐） #

Shopify主题默认已全局加载jQuery，完全不需要用RequireJS来引入依赖。可以批量替换所有产品HTML中的RequireJS包裹代码，直接使用原生jQuery写法：

替换规则

将原代码中的RequireJS包裹部分：

require(['jquery','fancymedia' ], function ($) {
    $(document).ready(function() {
        $('.fancybox-media').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            helpers : {
                media : {}
            }
        });
    });
});

替换为：

$(document).ready(function() {
    $('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });
});

全局加载依赖资源

在Shopify主题的theme.liquid文件的<head>标签内，全局引入fancybox的CSS和JS（用CDN即可）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

若使用旧版fancybox，替换为对应版本的CDN链接即可。

批量操作方法

• 用Shopify后台的批量编辑器导出所有产品的HTML字段（如产品描述、自定义metafield），用VS Code等文本编辑器的全局替换功能处理后，再导回Shopify。
• 或通过Shopify API编写简单脚本，批量更新产品的对应字段。

2. 修复RequireJS配置（保留原逻辑） #

若必须保留RequireJS包裹的代码，需解决模块路径错误和全局jQuery冲突问题：

完整RequireJS配置示例

在theme.liquid的<head>中引入RequireJS并配置：

<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js"></script>
<script>
require.config({
    baseUrl: 'https://cdn.shopify.com/s/files/.../assets/js', // 替换为你的JS资产目录URL
    paths: {
        jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min', // 映射全局jQuery，避免重复加载
        fancymedia: 'fancybox-media.min', // 确保文件存在于baseUrl路径下
        owlcarousel: 'owl.carousel.min'
    },
    // 处理非AMD规范的第三方插件
    shim: {
        fancymedia: {
            deps: ['jquery'],
            exports: '$.fn.fancybox'
        },
        owlcarousel: {
            deps: ['jquery'],
            exports: '$.fn.owlCarousel'
        }
    }
});
</script>

注意：所有配置的模块文件（如fancybox-media.min.js）必须上传到Shopify的对应资产目录，否则会出现404错误。

3. 检查内容安全策略（CSP） #

部分Shopify商店或主题会启用CSP，阻止内联脚本执行。若浏览器控制台出现Refused to execute inline script类错误，需：

• 进入Shopify后台在线商店 > 偏好设置 > 内容安全策略，调整设置允许内联脚本。
• 或给内联脚本添加nonce属性（需配合主题代码修改）。

4. 替代方案：使用Shopify原生产品媒体功能 #

若自定义HTML仅用于图片轮播和媒体弹窗，可直接使用Shopify自带的产品媒体库：

• 在产品后台添加多图、视频等媒体资源。
• 启用主题自带的媒体弹窗功能，无需自定义JS代码。
  该方案长期更稳定，但需逐个产品迁移媒体资源，适合部分产品优化。

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