How to use jQuery with callback function?

Question

I have tried taking the code from the callback functions to return a variable value based on variant inventory but I can't get this working.

<input id="quantityselector" type="number" name="quantity" value="1"
  min="1" max="{{ product.variants.first.inventory_quantity }}">

Which allows users to add more than a single item at a time and as you can see have set max and min values, the max value I have set to be equal to the max number in stock, this works great on a single variant but not the the secondary variant as the max value doesn't update accordingly.

I'm thinking that this is because it is static html and I need to drop some jquery in here using the callback function but can't figure it out, anyone able to help?

Answer 1

When a user change the variation you need to update value of your input element each time

Then only it will work like what you are thinking You can use this jquery selector to select and change max and min attributes

$("#quantityselector").attr("max","your value");

Answer 2

you can use Jquery for the update:

$("#quantityselector").attr("max",newValue);

and to rescue the stock of each Varainte make use of all the data in JSON of the product, this can be printed directly with Liquid:

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

Through JQuery get the Json and get the variants: and within each Variant will have the available stock:

Json Image

and already with the data, you can pull it and place it as a new value of the max, of the input, just make sure to make that change with the event of change of the input when you change the variant!