未定义输入字段的 JQuery 更改功能（shopify 购物车）答案

【问题标题】：JQuery change function of input field is not defined (shopify cart)未定义输入字段的 JQuery 更改功能（shopify 购物车）
【发布时间】：2021-10-04 12:35:01
【问题描述】：

在我的 shopify 购物车中，我在购物车中的每个产品之后都有一个项目输入字段。用户可以使用此输入字段增加或减少购物车中的商品数量。在桌面模式下，还有一个项目增加/减少按钮，但在移动设备上不显示。

输入字段的 HTML（液体代码）如下所示：

<input onblur="this.form.submit();" type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" max="{{ item.variant.inventory_quantity }}" min="0" aria-label="{{ 'cart.label.quantity' | t }}">

“max”属性将数量限制为最大值。可用库存。由于客户仍然可以通过使用他们的键盘（而不是项目增加/减少按钮）手动超出限制，我在该 cart-template.liquid 文件的底部添加了一个 JQuery 更改功能（我在另一篇文章中找到了该解决方案）。这个 JQuery 更改函数如下所示：

<script>
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);
  }
});
</script>

这个 JQuery 函数在实现后工作，它显示警报并将用户正在编辑的输入字段更改为最大。存货。现在 JQuery 函数不再触发了，我不知道发生了什么变化。控制台说

Uncaught ReferenceError: jQuery is not defined

"max" 显然不是根据控制台定义的。不过，通过查看输入元素，“max”和“value”在输入字段中被正确定义（例如 value = "1" 和 max = "8"）。如果有人有想法，我会很高兴。

【问题讨论】：

在您的相关 HTML 中，您是否引用了 jQuery？如果您确定在代码之前引用它。
@BeerusDev 非常感谢您的回答！我瞎了！我将 Jquery 从移到，这很重要！因此，当我尝试运行更改功能时，JQuery 尚未执行。知道如何确保在函数启动之前执行 JQuery 吗？我真的不想把 JQuery 重新放在头上，因为这个问题现在似乎是迄今为止出现的唯一问题，并且中的 JQuery 阻塞了我的脚本并需要加载 tinme。

标签： jquery shopify liquid

【解决方案1】：

关于我的评论：

<script> 和<link> 标签是可以在<head> 中使用的元素。在你的<head> 标签中，确保你链接了你想要使用的jQuery版本，你可以像这样把你的函数放在body下面：

<!DOCTYPE html>

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
</head>

<body>
<input onblur="this.form.submit();" type="number" class="cart__quantity-selector" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" max="{{ item.variant.inventory_quantity }}" min="0" aria-label="{{ 'cart.label.quantity' | t }}">

<!-- relevant body html -->

</body>


<script>
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);
  }
});
</script>

</html

<head>: The Document Metadata (Header) element

The BODY element

另外，附注。如果您没有任何冲突的库，则可以使用 $ 而不是 jQuery 调用 jQuery 事件。

【讨论】：

感谢您的回答！我专注于shopify制作的以下说明。在第 2 点下，它说，“什么 js 应该在 head 标签中？”答案是“没有！”那是错的吗？ shopify.com/partners/blog/javascript-performance
我现在做什么，因为中的 JQuery 似乎很好，并且由于没有阻塞而大大加快了我的页面速度，我只在购物车时在中执行 JQuery模板。 {% 如果模板包含 'cart' %}{{ 'jquery-2.2.3.min.js' |资产网址 | script_tag }} {% endif %}。我使用 {% unless template contains 'cart' %} {{ 'jquery-2.2.3.min.js' |资产网址 | script_tag }} {% endunless %} 如果用户在除购物车之外的任何其他页面上，则在正文中执行 JQuery。你认为这是一个很好的解决方案？
我会说是，我会将它加载到你的 body 标签的底部，只要确保它在你的函数之前加载
如果有帮助，别忘了点赞 :)