0
292
ViewsAdding 2 products to cart with 1 add to cart button Shopify
I want to add 2 products in cart on one Add to Cart Button. I have two select options with same variants with one products. Add to cart button will add same product but different variants products. Here is my select option code.
<div class="product-single-variant-item">
<label>Power (Left Eye)</label>
<select name="id_left" id="productSelect_left">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}>
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[0] }}
</option>
{% else %}
<option disabled="disabled">
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[0] }} - (Out of Stock)
</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="product-single-variant-item">
<label>Power (Right Eye)</label>
<select name="id_right" id="productSelect_right">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}>
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[1] }}
</option>
{% else %}
<option disabled="disabled">
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[1] }} - (Out of Stock)
</option>
{% endif %}
{% endfor %}
</select>
</div>
HTML GENERATED CODE
<div class="product-single-variant d-none d-md-flex align-items-center mt-auto">
<div class="product-single-variant-item">
<label>Power (Left Eye)</label>
<select name="id_left" id="productSelect_left">
<option value="34353935515783" selected="selected">
±0.00
</option>
<option value="34353935548551">
-0.50
</option>
<option value="34353935581319">
-0.75
</option>
<option disabled="disabled">
-1.00 - (Out of Stock)
</option>
<option disabled="disabled">
-1.25 - (Out of Stock)
</option>
<option disabled="disabled">
-1.50 - (Out of Stock)
</option>
<option disabled="disabled">
-1.75 - (Out of Stock)
</option>
<option disabled="disabled">
-2.00 - (Out of Stock)
</option>
<option disabled="disabled">
-2.25 - (Out of Stock)
</option>
<option disabled="disabled">
-2.50 - (Out of Stock)
</option>
<option disabled="disabled">
-2.75 - (Out of Stock)
</option>
<option disabled="disabled">
-3.00 - (Out of Stock)
</option>
<option disabled="disabled">
-3.25 - (Out of Stock)
</option>
<option disabled="disabled">
-3.50 - (Out of Stock)
</option>
<option disabled="disabled">
-3.75 - (Out of Stock)
</option>
<option disabled="disabled">
-4.00 - (Out of Stock)
</option>
<option disabled="disabled">
-4.25 - (Out of Stock)
</option>
<option disabled="disabled">
-4.50 - (Out of Stock)
</option>
<option disabled="disabled">
-4.75 - (Out of Stock)
</option>
<option disabled="disabled">
-5.00 - (Out of Stock)
</option>
<option disabled="disabled">
-5.25 - (Out of Stock)
</option>
<option disabled="disabled">
-5.50 - (Out of Stock)
</option>
<option disabled="disabled">
-5.75 - (Out of Stock)
</option>
<option disabled="disabled">
-6.00 - (Out of Stock)
</option>
<option disabled="disabled">
-6.50 - (Out of Stock)
</option>
<option disabled="disabled">
-7.00 - (Out of Stock)
</option>
<option disabled="disabled">
-7.50 - (Out of Stock)
</option>
<option disabled="disabled">
-8.00 - (Out of Stock)
</option>
<option disabled="disabled">
-8.50 - (Out of Stock)
</option>
<option disabled="disabled">
-9.00 - (Out of Stock)
</option>
<option disabled="disabled">
-9.50 - (Out of Stock)
</option>
<option disabled="disabled">
-10.00 - (Out of Stock)
</option>
</select>
</div>
<div class="product-single-variant-item">
<label>Power (Right Eye)</label>
<select name="id_right" id="productSelect_right">
<option value="34353935515783" selected="selected">
±0.00
</option>
<option value="34353935548551">
-0.50
</option>
<option value="34353935581319">
-0.75
</option>
<option disabled="disabled">
-1.00 - (Out of Stock)
</option>
<option disabled="disabled">
-1.25 - (Out of Stock)
</option>
<option disabled="disabled">
-1.50 - (Out of Stock)
</option>
<option disabled="disabled">
-1.75 - (Out of Stock)
</option>
<option disabled="disabled">
-2.00 - (Out of Stock)
</option>
<option disabled="disabled">
-2.25 - (Out of Stock)
</option>
<option disabled="disabled">
-2.50 - (Out of Stock)
</option>
<option disabled="disabled">
-2.75 - (Out of Stock)
</option>
<option disabled="disabled">
-3.00 - (Out of Stock)
</option>
<option disabled="disabled">
-3.25 - (Out of Stock)
</option>
<option disabled="disabled">
-3.50 - (Out of Stock)
</option>
<option disabled="disabled">
-3.75 - (Out of Stock)
</option>
<option disabled="disabled">
-4.00 - (Out of Stock)
</option>
<option disabled="disabled">
-4.25 - (Out of Stock)
</option>
<option disabled="disabled">
-4.50 - (Out of Stock)
</option>
<option disabled="disabled">
-4.75 - (Out of Stock)
</option>
<option disabled="disabled">
-5.00 - (Out of Stock)
</option>
<option disabled="disabled">
-5.25 - (Out of Stock)
</option>
<option disabled="disabled">
-5.50 - (Out of Stock)
</option>
<option disabled="disabled">
-5.75 - (Out of Stock)
</option>
<option disabled="disabled">
-6.00 - (Out of Stock)
</option>
<option disabled="disabled">
-6.50 - (Out of Stock)
</option>
<option disabled="disabled">
-7.00 - (Out of Stock)
</option>
<option disabled="disabled">
-7.50 - (Out of Stock)
</option>
<option disabled="disabled">
-8.00 - (Out of Stock)
</option>
<option disabled="disabled">
-8.50 - (Out of Stock)
</option>
<option disabled="disabled">
-9.00 - (Out of Stock)
</option>
<option disabled="disabled">
-9.50 - (Out of Stock)
</option>
<option disabled="disabled">
-10.00 - (Out of Stock)
</option>
</select>
</div>
</div>
I think it can be done by AJAX. But I don't know how to do with AJAX request. I'm trying to add something like this using AJAX.
$(function(){
var variantLeft = $('#productSelect_left option:selected').val();
var variantRight = $('#productSelect_right option:selected').val();
var totalVariant = [variantLeft, variantRight];
$('#AddToCart').on('click', function(){
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: totalVariant
},
dataType: 'json',
success: function (data){}
});
});
});
But my code isn't working only add one variants with first one selected. Also my selection isn't working with select. Need help!
Here is the reference site how I want. Output should be like this.
2 answers
Answer question0
Let me breakdown your question into two parts -:
- Add same product with diffrent variant ?
- Selection not working with change
<select>?
Answer - 1
I saw code and notice you use same option value for both. So how, you differentiate both variant. You have to pass key for variant or write code at backend for diffrenciate.
If your backend have already this functionality then ok.
Answer - 2
selectnot working with change the option. Because there is no code foronchange. So at the time of page load selected options save by jquery.
fix code like -:
<script>
var variantLeft = $('#productSelect_left option:selected').val();
var variantRight = $('#productSelect_right option:selected').val();
$('#productSelect_left').on('change', () => {
variantLeft = $('#productSelect_left option:selected').val();
console.log(variantLeft);
});
$('#productSelect_right').on('change', () => {
variantRight = $('#productSelect_right option:selected').val();
console.log(variantRight);
});
$('#AddToCart').on('click', function(){
var totalVariant = [variantLeft, variantRight];
console.log(totalVariant)
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: totalVariant
},
dataType: 'json',
success: function (data){}
});
});
</script>
output -:
Same variant list
select change
Edited -: As in second image there are two diffrent id's. So if backend got these two id's then by the match of these id fecth variant and make combinedata-structure like
[{product_id: {variantLeft: varient}}, {product_id: {varianttRight: varient}]variantLeft and variantRightare comes inside ajax request.
And process one by one to add two product with same product name with different varient. May be you have change some backend code for this.
Remove console.log() from script. It used for only test.
0
This can be achieved without Javascript by using name="id[]" on variant select:
<select name="id[]" id="productSelect_left">
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
Then:
<select name="id[]" id="productSelect_right">
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
Of course both inside the same "add to cart" form.
Didnt' use it since a while but should work (this is a known solution).
If you use Ajax API, you may simply serialize the form on submit event.