skip to Main Content

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?

2

Answers


  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");
    
    Login or Signup to reply.
  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!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search