Shopify商品页调用JS函数失败求助：测试站可正常运行

嘿，我来帮你解决这个问题！你的JS在测试站正常但Shopify不生效，大概率是代码加载时机不对或者Shopify的环境适配问题，咱们一步步来搞定：

一、先搞定Shopify商品页的JS调用方式 #

Shopify的主题有固定的文件结构，不能随便放代码，得按规则来：

方法1：把代码放到主题资产文件（推荐） #

1. 登录Shopify后台 → 在线商店 → 主题 → 找到你的主题，点击「操作」→「编辑代码」
2. 在左侧「Assets」文件夹下，点击「添加新资产」，创建一个叫count-up.js的文件，把你的JS代码粘贴进去
3. 找到商品页的模板文件：如果是新版主题，找Sections/main-product.liquid；老版主题找Templates/product.liquid
4. 在这个文件的最底部，</body>标签之前，添加这段代码引入你的JS：

   {{ 'count-up.js' | asset_url | script_tag }}
   

   这样能保证JS在页面DOM加载完成后再执行，避免找不到元素的问题。

方法2：直接嵌入到商品页模板 #

如果不想单独建文件，也可以直接在商品页模板的</body>前用<script>标签包裹代码，但一定要记得加DOM加载监听（后面代码部分会讲）。

二、你的JS代码存在的几个潜在问题 #

我看你给的代码片段，有几个地方适配Shopify环境需要调整：

1. 依赖jQuery的坑 #

Shopify有些主题默认没引入jQuery，或者引入的版本和你测试站不一样，导致$('#output')报错。解决办法：

• 要么在theme.liquid的</head>前加jQuery引入：

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  

• 要么直接改成原生JS，摆脱jQuery依赖，比如把$('#output')换成document.getElementById('output')，这样更稳妥。

2. 没有等待DOM加载完成 #

测试站可能刚好DOM先加载完，但Shopify页面加载顺序复杂，导致代码执行时#output元素还没渲染出来，自然没效果。必须把代码包裹在DOM加载完成的事件里：

用jQuery的写法：

$(document).ready(function() {
  // 把你的整个代码放在这里面
  let output, started, duration, desired, animationTimer; 
  duration = 5000; 
  desired = '50'; 

  output = $('#output');
  // 先检查元素是否存在，避免报错
  if (!output.length) return;
  
  started = new Date().getTime(); 

  animationTimer = setInterval(function() {
    const elapsed = new Date().getTime() - started;
    const progress = Math.min(elapsed / duration, 1);
    const currentValue = Math.floor(progress * parseInt(desired));
    
    output.text(currentValue);

    // 达到目标或超时就停止定时器
    if (progress >= 1 || currentValue >= parseInt(desired)) {
      output.text(desired);
      clearInterval(animationTimer);
    }
  }, 30);
});

原生JS写法（推荐，无依赖）：

document.addEventListener('DOMContentLoaded', function() {
  let output, started, duration, desired, animationTimer; 
  duration = 5000; 
  desired = '50'; 

  output = document.getElementById('output');
  // 元素不存在就直接退出，避免报错
  if (!output) return;
  
  started = new Date().getTime(); 

  animationTimer = setInterval(function() {
    const elapsed = new Date().getTime() - started;
    const progress = Math.min(elapsed / duration, 1);
    const currentValue = Math.floor(progress * parseInt(desired));
    
    output.textContent = currentValue;

    // 终止动画的条件
    if (progress >= 1 || currentValue >= parseInt(desired)) {
      output.textContent = desired;
      clearInterval(animationTimer);
    }
  }, 30);
});

3. 变量未声明导致冲突 #

你的animationTimer没加let/var/const，会变成全局变量，很容易和Shopify主题的其他JS代码冲突，所以一定要加上声明。

4. 确保页面有对应元素 #

商品页里必须有一个id为output的元素，比如：

<span id="output">0</span>

否则代码找不到元素，自然不会有任何效果。

最后排查小技巧 #

打开浏览器开发者工具（按F12），切换到「Console」面板，刷新页面看有没有报错：

• 如果显示$ is not defined：就是jQuery没加载，要么加jQuery，要么换成原生JS
• 如果显示Cannot set property 'textContent' of null：就是#output元素不存在，检查商品页模板里有没有这个元素

内容的提问来源于stack exchange，提问作者Mirko Unchained Wallace