Limit Quantity Dropdown Based on Product Options

Question

I have product_options.js loaded into my store, I'm looking to make the quantity dropdown max value change when a user selects a variant. I have a quantity dropdown working, though it's not changing based off stock levels.

Here's the code running the variant selectors:

  <script>
    // <![CDATA[
    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add-to-cart-button').removeClass('disabled').removeAttr('disabled').html('Add to Cart');
        } else {
          // Variant is sold out.
          $('#add-to-cart-button').html('Sold Out').addClass('disabled').attr('disabled', 'disabled');
        }
        // Whether the variant is in stock or not, we can update the price and compare at price.
        if ( variant.compare_at_price > variant.price ) {
          $('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</s>');
        } else {
          $('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );
        }

        {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
          $('.selector-wrapper').hide();
        {% endif %}
      } else {
        // variant doesn't exist.
        $('#add-to-cart-button').val('Unavailable').addClass('disabled').attr('disabled', 'disabled');
      }
    }
    // initialize multi selector for product
    jQuery(function($) {
      new Shopify.OptionSelectors("product-select", { product: {{ product | json }} , onVariantSelected: selectCallback });
    });
    // ]]>
  </script>

The Liquid on the product page.

    <select id="product-select" name="id">
            {% for variant in product.variants %}
              <option value="{{ variant.id }}"
                {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
          >
            {{ variant.title }} - {{ variant.price | money }}
          </option>
        {% endfor %}
       </select>

       <label for="quantity">Qty: </label>
       <select id="quantity" name="quantity">
         {% for i in (1..10) %}
           <option value="{{ i }}">{{ i }}</option>
         {% endfor %}
       </select>

Is there anyway to change the i value based off the variant change callback?

Answer 1

You need to check the variant quantity on variant change and create an option using javascript and append it to the quantity selected. so your code becomes:

 $("#quantity option").remove();
 for(i=1; i<=variant.inventory_quantity;i++){
   $('#quantity').append('<option val='+i+'>'+i+'</option>');
 }

<script>
    // <![CDATA[
    var selectCallback = function(variant, selector) {
      if (variant) {
        if (variant.available) {
          // Selected a valid variant that is available.
          $('#add-to-cart-button').removeClass('disabled').removeAttr('disabled').html('Add to Cart');
        } else {
          // Variant is sold out.
          $('#add-to-cart-button').html('Sold Out').addClass('disabled').attr('disabled', 'disabled');
        }
        // Whether the variant is in stock or not, we can update the price and compare at price.
        if ( variant.compare_at_price > variant.price ) {
          $('#price-field').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<s class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</s>');
        } else {
          $('#price-field').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );
        }

        {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
          $('.selector-wrapper').hide();
        {% endif %}
      // here we add and update the quantity select when variant changed
      $("#quantity option").remove();
      for(i=1; i<=variant.inventory_quantity;i++){
        $('#quantity').append('<option val='+i+'>'+i+'</option>');
      }
      } else {
        // variant doesn't exist.
        $('#add-to-cart-button').val('Unavailable').addClass('disabled').attr('disabled', 'disabled');
      }
    }
    // initialize multi selector for product
    jQuery(function($) {
      new Shopify.OptionSelectors("product-select", { product: {{ product | json }} , onVariantSelected: selectCallback });
    });
    // ]]>
  </script>

Answer 2

use variant.inventory_quantity;

https://www.shopify.com/partners/shopify-cheat-sheet

<label for="quantity">Qty: </label>
   <select id="quantity" name="quantity">
     {% for i in (1.. variant.inventory_quantity) %}
       <option value="{{ i }}">{{ i }}</option>
     {% endfor %}
   </select>