Event Listener for Variant Select List

RLabelle
Tourist
7 0 1

I'm wondering how to add an event listener for the onchange event for one of my product variant dropdown (select) lists.

onchange I would like to trigger a modal window (I'm using fancybox). I've got everything ready except I can figure out how to listen for the onchange event. 

I've tried using 

$('#product-select-140503999-option-1').change(function() {
      alert( "Handler for .change() called." );
    });

but nothing seems to work. Any help or directly would be greatly appreciated. 

0 Likes
Jason
Shopify Expert
10037 119 1872

Your jQuery method is correct for detecting a change on a <select> element so I'd first assume the ID you're using is wrong. Are you really sure that the ID of that <select> element is "#product-select-140503999-option-1"? 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
RLabelle
Tourist
7 0 1

Hi Jason, thanks for your reply. As far as I can tell that's the ID. A firebug inspect says the ID is product-select-140503999-option-1, when I try that in my code nothing happens.

Is there some other way of creating an event handler for the product variant dropdowns? I see that shopify has selectCallback and that it's used in my site theme (London) . Can that be used to my advantage? All that I need is to generate a modal window when one of my product variant drop down options is selected. 

I have three product variants:

Variant select dropdown 1

Variant select dropdown  2 (Option A and Option B)

Variant select dropdown  3

When Variant 2 is changed to Option B I want to initiate a modal window. 

Thanks again for your assistance.

0 Likes
RLabelle
Tourist
7 0 1

Has anyone successfully interacted with the variant dropdown menus? If so how did they do it? All I'm looking for is a simple hello word example, then I can see how it's done. 

So to reiterate. I'm looking to create an onchange event handler for the variate dropdown menus on a product screen.

Your help is much appreciated.

0 Likes
Jason
Shopify Expert
10037 119 1872

Has anyone successfully interacted with the variant dropdown menus?

All the time. Yes you can make use of the optionSelector callback, or if you'd prefer you can bind your own. Below is the way it's likely working now...

var mySuperCallback = function(variant, selector) {
    /* foo! */
};

jQuery(function() {
    new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: mySuperCallback });
  });

..but there is nothing stopping you from letting the existing script run, than add your own event afterwards (not efficient, but it would work)

I'm not sure if I have a copy of London handy so feel free to post a link to the store and we can tinker with whatever you've got so far (within the browser dev tools).

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
RLabelle
Tourist
7 0 1

That's sweet man. Thanks! I'll try it out first thing tomorrow. :)

0 Likes
RLabelle
Tourist
7 0 1

So it looks like the London theme already has an optionSelector callback inside app.js.liquid on line 106

selectCallback = function(variant, selector) {

      if (variant) {
              var option1 =  variant.option1;  
              if(option1 == "variant value A" || option1 == "variant value B") {
         
                $('#box').show('slow', function() {
                    // Show box prompt.
                 });
              }
      }
}

So that seems to work for me. If one of my options in my variant dropdown is eq to "variant value A" or "variant value B" I give a prompt to the shopper. 

One issue remains. I can't tell which Variant Option has just been changed, hence the original onchange event.

Final Question: Is is possible to know which of the variate options was just changed? In other words, if I had Variant A (Color) and Variant B (Size), how can I tell if Variant B (Size) is the one that was just changed?

I hope my code is helpful but I also hope someone might be able to assist with this one last step. 

 

0 Likes
HunkyBill
Shopify Expert
4355 36 462

That is one of the funkier things about that whole setup. You get handed the variant, and a useless selector object. How many years has it been?

If you setup your own click listeners on option A, B and C, then you can record which selector was hit. Follow that up with the conventional change event trigger, and then you're into the callback with the variant... and you can check your own value for the option selected. 

I just had to do a surgery like that for a nice brand name shop, and it all worked great. So I know that pattern works now. Should've just rewritten option_selector.js years ago to hand off the right selector in the first place.

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

I tried this and it worked. It creates a second select element with all the same options as the original but does not hide the original select element. So I have now two select elements on the page. What am I missing.

0 Likes