Shopify购物车数量输入框JQuery change函数报未定义错误排查问询

问题根因 #

你看到的核心报错是Uncaught ReferenceError: jQuery is not defined，所谓的「max未定义」是该报错的衍生问题：因为jQuery未加载成功，你写的整段校验函数根本没有执行，后续的max变量赋值、属性读取逻辑都没有运行，和你输入框的max属性是否正常无关。
出现jQuery未定义的常见原因有2种：

• 你所使用的Shopify主题近期做了更新，移除了默认加载的jQuery依赖
• 你添加的自定义脚本放置位置早于jQuery库的加载位置，执行脚本时jQuery还没有被加载完成

解决方案 #

方案一：兼容jQuery依赖（适合确认主题仍会加载jQuery的场景） #

把你原来的脚本替换为以下代码，调整为页面全部资源加载完成后再执行校验逻辑，避免提前执行找不到jQuery：

<script>
window.addEventListener('load', function() {
  if (window.jQuery) {
    jQuery('[max]').change(function() {
      var max = parseInt(jQuery(this).attr('max'), 10) || 10000;
      var value = parseInt(jQuery(this).val(), 10) || 0;
      if (value > max) {
        alert('We only have ' + max + ' items of this product in stock');
        jQuery(this).val(max);
        this.form.submit();
      }
    });
  }
});
</script>

方案二：原生JS重写（更推荐，无额外依赖） #

现在很多新版Shopify主题都默认不加载jQuery，直接用原生JS重写校验逻辑可以彻底避免依赖问题，性能也更好：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const allLimitInputs = document.querySelectorAll('[max]');
  allLimitInputs.forEach(input => {
    input.addEventListener('change', function() {
      const max = parseInt(this.getAttribute('max'), 10) || 10000;
      const currentValue = parseInt(this.value, 10) || 0;
      if (currentValue > max) {
        alert(`We only have ${max} items of this product in stock`);
        this.value = max;
        this.form.submit();
      }
    });
  });
});
</script>

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