Use case

  • Display a table with variants / inventory levels / qty selectors for each variant
  • Button to add all selected variant quantities with a single click
  • Unavailable variants (with 0 stock) should have selector buttons disabled / inactive

Display a table with variants

        <div class="wholesale-form">
            <table width="100%" class="wholesale-form">
                <td width="23%"> Size </td>
                <td width="23%"> In Stock </td>
                <td width="43%"> Order Qty </td>
            {% for variant in product.variants%}
                <tr class="variant  {% if variant.inventory_quantity <= 0 %}  stock-out {% endif%}">
                <td class="size">{{variant.title}}</td>
                    <div class="purchase-details__quantity product-quantity-box" style="width: auto">
                    <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span>
                    <input type="number" data-variant="{{}}" min="0" size="2" class="quantity" name="quantity" id="quantity" value="0"  max="{{ variant.inventory_quantity }}"  />
                    <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
            {% endfor %}
            <button id="bulk-add" class="action_button ">Add selected to cart</button>

Add all selected variant quantities with a single click

    var payLoad = []
    var qtychecker = 0
        $('.wholesale-form .variant:not(.stock-out)').each(function(){
            var product = {}
            qtychecker =  qtychecker + parseInt($(this).find('.quantity').val())
            product.quantity = parseInt($(this).find('.quantity').val())
   = $(this).find('.quantity').attr('data-variant')
        if(qtychecker > 0){  
  '/cart/add.js', {items:  payLoad}, function(data, response){ 
            if(response == 'success'){
          },"json").fail(function(data,response) {alert(data.responseJSON.description); location.reload()}  )
        	alert('Product quantity must be greater than zero')