skip to Main Content

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?

2

Answers


  1. 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>
    
    Login or Signup to reply.
  2. 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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search