Add product to cart with selected variant.

Highlighted
Shopify Partner
3 0 0

Hi,
Scenario : I select a product with a size variant and then click on a button ( buy now button)  that button bring a modal box and in modal box i have option to buy two different products with the size variant that i already selected and that product with selected variant add into the cart. 

This all is working, problem is that the code is not taking the selected variant and it's always add the first variant.

Code:

<script>
$(".select-btn").click(function(e){
showsubOffer();
e.preventDefault();
});
function showsubOffer(){

modal = new tingle.modal({
closeMethods: ['overlay', 'escape'],
closeLabel: "Close"
});
modal.setContent($('#jojo-popup').clone().show());
modal.open();

$('.inner-close').click(function(){
modal.close();
});

$('#btn-yes-do').click(function(){
modal.close();
});

$('#btn-yes-do').click(function(){
$.ajax({
type: 'POST',
url: '/cart/add.js',
//async: false,
data: {
quantity: 1,
id: {{ all_products['annual'].selected_or_first_available_variant.id }}
},
dataType: 'json',
success: function(){
location.href = '/cart';
},
cache: false
});
});

$('#btn-no-do').click(function(){
var id="{{ variants_id }}";
$.ajax({
type: 'POST',
url: '/cart/add.js',
//async: false,
data: {
quantity: 1,
id: {{ all_products['quarterly'].selected_or_first_available_variant.id }}
},
dataType: 'json',
success: function(){
location.href = '/cart';
},
cache: false
});
});

}
</script>

0 Likes
Shopify Partner
3 0 0

Can someone please asnwer on above question?

0 Likes
Highlighted
Pathfinder
103 8 16
id: {{ all_products['quarterly'].selected_or_first_available_variant.id }}

 

You grab the Variant ID in 

 

var id= {{variant.id}}

But then your not using it when its needed in the first line of code.  Overall to me this seems like a very complicated way to handle it.

 

If you save the variant ID as a Variable, you should be able to use update.js to send it to the cart with 

/cart/update?updates[Variant_ID_here]=1

I do this with sections (where i pre-set the variants mind you) here:  https://demo.ecomdev.ca/ if you want to take a look.

 

1 Like
Highlighted
Shopify Partner
3 0 0

Thanks you. 

I am not sure that var vid="{{ variants_id }}"; is actually capturing the current selected variant.problem.jpg
is there a way we can capture the current value of the input ? ie in the above screenshot "40170763854" if we can pass this to the cart then i think the problem can be solved.

I am much thankful to you.
https://p7hsasbv8xiom6kw-19177383.shopifypreview.com

0 Likes
Highlighted