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

In my shopify cart, I have an item input field after each product in the cart. The user can increase or decrease the number of items in cart with this input field. In desktop mode, there is an item increase / decrease button as well, but this is not showing on mobile devices. The HTML (Liquid Code) of the input field looks like this:

<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 }}">

The "max" attribute is limiting the number to the max. available inventory. As costumers still can manually exceed the limit by using their keyboard (and not the item increase / decrease buttons) I added a JQuery change function at the bottom of that cart-template.liquid file (that solution I found in another post). This JQuery change function looks like this:

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

This JQuery function was working after implementing, it showed the alert and changed the input field the user was editing to the max. inventory. Now the JQuery function is not firing anymore, I don't know what changed. The console says "Uncaught ReferenceError: jQuery is not defined". "max" is obviously not defined according to console. By looking at the input element though, 'max' and 'value' is defined properly inside the input field (e.g value = "1" and max = "8"). If anyone has an idea, I'd be very happy.

CodePudding user response：

In relation to my comment:

<script> and <link> tags are Elements that can be used inside the <head>. In your <head> tag, make sure you link the version of jQuery you would like to use, and you can put your function below the body like so:

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

Relevant articles:

<head>: The Document Metadata (Header) element

The BODY element

Also, side note. IF you do not have any conflicting libraries, you can call jQuery events with $ instead of jQuery.