Variation updated with jQuery is not being added to cart

Solved
lbecz
New Member
4 0 0

We have a page that dynamically updates one of the variation selections on page load, through jquery, based on what the url of the previous page was. However, when adding to cart, the variation is showing the initial selection rather than the one updated through jquery.

This is the code which updates the select element on page load.

 

$(document).ready(function() {
   	var referrer =  document.referrer;
    if (referrer.indexOf('size_2') >= 0) {
      	limit = 2;
      	$('option[value="1 Recipe Starter Kit"]').removeAttr('selected');
      	$("select#SingleOptionSelector-product-one-time-0").val("2 Recipe Lite Box");
    } else if (referrer.indexOf('size_3') >= 0) {
      	limit = 3;
    	$("select#SingleOptionSelector-product-one-time-0").val("3 Recipe Cocktail Box").trigger('change');
       	$('option[value="1 Recipe Starter Kit"]').removeAttr('selected');
      	$('option[value="3 Recipe Cocktail Box"]').attr('selected', 'selected');
		$('.recipe-container input[type=checkbox]').prop('checked', true);   
    }
  });

 

 

I'd like to understand why, after this runs and the item is added to cart, that it is adding the default variation rather than the updated one.

0 Likes
Speedimize
Shopify Partner
165 26 80

Hi @lbecz 

Welcome to Shopify Community. 

Simply changing the text to add an option will not work. Try to trigger the change event. Below is an example:

$("select#SingleOptionSelector-product-one-time-0").val("2 Recipe Lite Box").trigger('change');

 

Hope that will helps you. 

Kind Regards.

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
lbecz
New Member
4 0 0

I have actually applied this already in the 3 Recipe tier which was what I was testing on, and the Add to cart still ignored the change. To be safe I applied it to both but did not see any difference in results.

0 Likes
tim
Shopify Expert
2937 141 982

I guess it's time for you to share your store url (preview link, if unpublished/under password). Generally @Speedimize gave you the right advice, but it's hard to be spot on without seeing the problem.

Theme code should update hidden select/data, which is then used as source of variant id when adding to cart. Theme code listens for the "change" event, so simply updating value of your drop-down without triggering "change" would not trigger event listeners and would not change the variant selected.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
lbecz
New Member
4 0 0

Hello!

So here is the page where the process begins: https://craftycocktails.com/collections/cocktail-recipe-kits/size_2-recipe-lite-box

The user will have 1, 2 or 3 recipe options selected on the left sidebar. If 2 or 3 are selected, when the user clicks into one of the products (ignore the first one, but any of the other products like "Vodka (Infused)" will be using the correct template), 2 or 3 recipe will be automatically selected.

Once you pick the recipes you want and add to cart, the item appears in your cart but only with 1 Recipe added, and only charging for that.

0 Likes
Speedimize
Shopify Partner
165 26 80

This is an accepted solution.

Hi @lbecz 

Thanks for sharing with us these crucial details, now it's possible to handle this.

The reason is clear, the code is triggered before you can change the options. To avoid this, try adding a setTimeout.

For example as below:

 

$(document).ready(function() {
  var referrer =  document.referrer;
  setTimeout(function () {
    if (referrer.indexOf('size_2') >= 0) {
      limit = 2;
      $('option[value="1 Recipe Starter Kit"]').removeAttr('selected');
      $("select#SingleOptionSelector-product-one-time-0").val("2 Recipe Lite Box").trigger('change');
    } else if (referrer.indexOf('size_3') >= 0) {
      limit = 3;
      $("select#SingleOptionSelector-product-one-time-0").val("3 Recipe Cocktail Box").trigger('change');
      $('option[value="1 Recipe Starter Kit"]').removeAttr('selected');
      $('option[value="3 Recipe Cocktail Box"]').attr('selected', 'selected');
      $('.recipe-container input[type=checkbox]').prop('checked', true);
    }
  }, 500);
});

 

We also added trigger ('change') to the first condition.


In the example above, your code will fire 500ms later. If you ask how we checked, we just inserted a part of the code in the Chrome console. We launched and tried to add an option, and the option was applied on the shopping cart page.

After that, it became clear that your code is simply triggered earlier than necessary.

Hope that helps you.

We Speedimize your store
Have a problem with speed performance, send me email here: hello@speedimize.io


If our advice was helpful please LIKE or ACCEPT SOLUTION
lbecz
New Member
4 0 0

That did it! Thank you!!

0 Likes