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

Question

在我的 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 }}">

“最大”属性将数量限制为最大值。可用库存。由于客户仍然可以使用他们的键盘（而不是项目增加/减少按钮）手动超过限制，我在该购物车底部添加了一个 JQuery 更改功能-template.liquid 文件（我找到的解决方案在另一个 post) 中。此 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”）。如果有人有想法，我会很高兴。

Answer 1

关于我的评论：

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

<!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

The BODY element

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

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

JQuery change function of input field is not defined (shopify cart)

jquery

liquid

shopify