Force product variant options refresh

BenF
New Member
12 0 0

Hi,

I am trying to find a way to force the product page variant dropdowns generated by OptionSelectors to refresh programatically.

For example. If I had a product with multiple variants (color and size), and wanted a button to show Black in XL, click on the button and have that variant selected. Or (and this is the exact use case I am working on), click on a thumbnail and the variant changes accordingly (user has Black in XL selected, but clicks on the White thumbnail, the selection changes to White XL, or the first listed White if there is no White XL).

Here's the problem. I have the logic working. I can programatically figure out which variant I need, and use jQuery to select it. And the selection works, in that if I then hit Add To Cart the correct variant is added. The problem is that the <select> controls themselves don't update to reflect the selection change. So, if the selection was Black, user clicked on White, the <select> still shows Black, but White will get added to the cart. I have tried forcing a jQuery change event, but that does not seem to do it. And I am guessing that this is not a jQuery issue or a JavaScript one, but that it is a matter of forcing the Shopify intelligently created <select> controls to refresh. But, can't seem to make that happen.

Any ideas? Thanks.

--- Ben

Replies 16 (16)
HunkyBill
Shopify Expert
4615 54 532

@BenF,

This is 100% Javascript and you kinda answered your own question.

With Javascript, you can change the currently selected option of a dropdown. 

So, when you detect the click on a thumbnail, and you know the variant id, in that event handler, select your dropdown, and change the selected option to the same. 

There is no such thing as using the server to intelligently re-render the controls. Once Liquid is rendered, you're in change with your Javascript.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
BenF
New Member
12 0 0

Well, not quite ... the problem is that I am using JavaScript and I am changing the selected control and the selection is indeed changing. That's is working, and it is indeed pure JavaScript. The proof of this is that when I click the ADD TO CART option the right variant gets added to the cart. The problem is that while the select control in the DOM is updated and is correctly representing the changed selection, the actual UI controls are not. It is as if the JavaScript that Shopify uses to render the variants into multiple controls is unaware that some other code changed the selection, and is therefore not updating to reflect the selection change. And thus my question about finding a way to force a refresh of the Shopify JavaScript, the code that converts the single <select> to the multiple <select> controls.

--- Ben

HunkyBill
Shopify Expert
4615 54 532

@BenF.

Ok. So if you're that far along, take the option_selection.js file Shopify kindly supplies for this task and take it apart. You might (hopefully) find that it is not that complex... ideally, you will see that it really does nothing much impressive but parse the JSON of the product and turn the variant options into select elements. 

Since you are dealing with these select elements yourself, simply override or extend that existing code for your own purposes. I recommend you single step through that code with some breakpoints where you suspect the action you're interested in lies, and I bet you'll experience great relief that you can just hack in one or two lines of Javascript to do as you wish.

Best of luck, and I am pretty sure you'll succeed. It is after all not much more than that. A couple of arrays, some DOM builder, and event handlers... very common and typical patterns for Javascript.

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Caroline_Schnap
Shopify Staff
5705 1 357

Hi Ben,

No need to groke nor edit the file option_selection.js.

Sounds to me like you're faced with a timing issue.

One easy way to circumvent this is to add your code after the options drop-downs have been added to the page.

This would be right after this call:

new Shopify.OptionSelectors("id", { product: {{ product | json }}, onVariantSelected: selectCallback });

^ above code is usually in product.liquid — but sometimes is in theme.liquid.

Here's an example...

Demo: http://gusikowski-inc5583.myshopify.com/products/comfort-plus

Image now that the Queen and King gray squares are thumbnails. The key here is to give each of these elements a title attribute set to the option values they represent. 

<ul id="options">{% for variant in product.variants %}
  <li><a title="{{ variant.option1 }}" href="#">{{ variant.option1 }}</a></li>{% endfor %}		
</ul>

 

Then back to the options code...

After this:

new Shopify.OptionSelectors("id", { product: {{ product | json }}, onVariantSelected: selectCallback });

Add that:

jQuery('#options a').click(function() {
  var optionValue = jQuery(this).attr('title'); // what have I just clicked on?
  jQuery('select.single-option-selector:contains(' + optionValue + ')').val(optionValue).trigger('change');
  return false;
});

Done. In bold is done all the work.

  1. Find the select element generated by the options code that contains the value, eg. 'Queen'
  2. set that select element to that value, eg. 'Queen'
  3. .. and trigger a change event on the select element, finally.

 

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Caroline_Schnap
Shopify Staff
5705 1 357

Hey, no one cares? This is pretty neat effort to explain things ^

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Jamie
Shopify Staff (Retired)
5711 0 159

I care :)

I thought you went three extra miles here.

Jamie | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Caroline_Schnap
Shopify Staff
5705 1 357

Thanks, and I did! I went exactly 4.5 extra kms ~ 3 miles. I am glad you noticed :-) That's all the attention I need. I am all good now. 

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Shopaholla_E-Co
Tourist
48 0 1

Hey Caroline, 

Having trouble getting an error on the option_selection.js in my theme I've developed for a customer, http://bradycases.com. Here's my error I'm getting, any help would be awesome:

TypeError: Result of expression 'oldSelector' [null] is not an object.


Shopaholla E-commerce
Caroline_Schnap
Shopify Staff
5705 1 357

I am getting no JavaScript error on your product pages — those that use option_selection.js : http://www.bradycases.com/products/12u-shock-rack

As for your home page, I get an error in jquery.tools.min.js. That's caused by you including two (different) jQuery frameworks in your theme: you use google.load (why are you using that?) to get 1.4.2, and you also include 1.3.2 in jquery.tools.min.js. Use only one.

 

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog