How to add multiple variants to cart???

New Member
3 0 0

Hello all,

I'm trying to create a wholesale site where customers can add different quantities for each variant to the cart at the same time. I found this post helpful in getting the product page to look the way we need: https://ecommerce.shopify.com/c/ecommerce-design/t/add-to-cart-multiple-variants-quantities-158891

But it will not let me add the items to the cart.

I'm just using the Simple theme at the moment.

In product.liquid, I have replaced

<select id="product-select" name="id" class="hidden">
		{% for variant in product.variants %}
		   <option {% if variant == product.selected_or_first_available_variant %} selected=                  "selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
		 {% endfor %}
</select> 	
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" id="add" class="btn add-to-cart" />

with this:

{% assign linklist = linklists['order-form'] %}
<form>
  {% for variant in product.variants %}
     
  
    {{ variant.title }} - {{ variant.price | money }} <br />          
      

    <input type="hidden"  value="{{ variant.id }}" id="variant-{{ forloop.index0 }}"/>
             
    Qty:
    <input  type="number" value="0" id="quantity-{{ forloop.index0 }}"/>
    
    <!-- shows quantity for testing reference -->      
    {{ variant.inventory_quantity  }} in stock for v.id {{ variant.id }}.

 
  <br />  

  {% endfor %}

  <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
    <div class="purchase">
      {% unless product.available %}
      <p>Sold Out</p>
      {% else %}
      <br />
      <input type="submit" value="Add!" class="btn" id="submit-table"/>
	
       {% endunless %}<input type="reset" class="btn" value="Reset">
    </div>
  </div>  
</form>

I have also added this script at the bottom:

<!-- tetchi blog js for link list | http://www.tetchi.ca/shopify-tutorial-order-form/ -->
<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionnally.
if (typeof jQuery === 'undefined') {
    document.write({{ "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"; | script_tag | json }});
	document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
}
//]]>
</script>

<script>
	var length = {{ product.variants.size }};

$(document).ready(function () {
	$("#quantity-0").focus();    
	$("#submit-table").click(function(e) {     
		e.preventDefault();
		//array for Variant Titles
		var toAdd = new Array();
        var qty ;
		for(i=0; i < length; i++){
        
			toAdd.push({
				variant_id: $("#variant-"+i).val(),        
				quantity_id: $("#quantity-"+i).val() || 0
			});
		}
		function moveAlong(){
			if (toAdd.length) {
				var request = toAdd.shift();
				var tempId= request.variant_id;
				var tempQty = request.quantity_id;
				var params = {
					type: 'POST',
					url: '/cart/add.js',
					data: 'quantity='+tempQty+'&id='+tempId,
					dataType: 'json',
					success: function(line_item) { 
						//console.log("success!");
						moveAlong();

					},
					error: function() {
						//console.log("fail");
						moveAlong();
						
					}
				};
				$.ajax(params);
			}
			else {				
				document.location.href = '/cart';
			}  
		};
		moveAlong();
	});
});

Any thoughts on why it won't add the cart would be much appreciated!

0 Likes
New Member
1 0 0

Were you ever able to solve this problem. I am having the same problem and am curious as to your fix.

0 Likes

Hello,
This thread is quite old, but if this helps others who are looking for the same solution for adding multiple variants to the cart at once.

You can use MultiVariants ‑ Bulk Order to allows your customers to order multiple variants and quantities of the same product in just one click.

Here is the demo, you can take a look.

Multiple variants bulk order with grid swatch layout.png

 

0 Likes