Variation updated with jQuery is not being added to cart

Technical Q&A
1

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.

2

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.

2 Likes
3

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.

4

I guess it’s time for you to share your store url (preview link, if unpublished/under password). Generally @Anonymous 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.

1 Like
5

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.

6

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.

1 Like
7

That did it! Thank you!!