On a product page, a customer can select from different variants. In a "select" element, all the variants are stored. This element is hidden with display none. So, users can select variants using all fancy things like swatches and other fun stuff but under the hood its just a "select" element which keeps track of which variant is being used. Its value is variant id.
I am attaching an image to be more clear on what's going on.
Goal: Get the variant id on change of variant.
Problem: I am unable to detect the change event on this select element.
Limitations: I am not allowed to touch the HTML of this code. I can only append a javascript file at run time on this page in <head> tag and I need to detect the change event in that script.
$(document).ready(function(){
$('body').on('change', "select[name='id']", function(){
console.log('here');
});
});
I can get its value just fine with below code at any time I want.
console.log($("select[name='id']").val());
Any ideas that why change event won't be detected?
On a product page, a customer can select from different variants. In a "select" element, all the variants are stored. This element is hidden with display none. So, users can select variants using all fancy things like swatches and other fun stuff but under the hood its just a "select" element which keeps track of which variant is being used. Its value is variant id.
I am attaching an image to be more clear on what's going on.
Goal: Get the variant id on change of variant.
Problem: I am unable to detect the change event on this select element.
Limitations: I am not allowed to touch the HTML of this code. I can only append a javascript file at run time on this page in <head> tag and I need to detect the change event in that script.
$(document).ready(function(){
$('body').on('change', "select[name='id']", function(){
console.log('here');
});
});
I can get its value just fine with below code at any time I want.
console.log($("select[name='id']").val());
Any ideas that why change event won't be detected?
Share Improve this question asked Sep 20, 2018 at 20:55 awebartisanawebartisan 1,5141 gold badge16 silver badges28 bronze badges 12-
Have you tried using the select id instead? So,
#ProductSelect– Jean Paul Commented Sep 20, 2018 at 21:01 -
id keeps changing... the only attribute that remains same is
name="id". Its a convention followed by Shopify themes. – awebartisan Commented Sep 20, 2018 at 21:03 -
"The fancy things" probably set the select's value by using the
.valmethod which doesn't triggerchangeevent. – Ram Commented Sep 20, 2018 at 21:03 -
Yes. I thought of same. If they are changing the value, they have to manually trigger the change event.
trigger('change')like so. and most probably they are not doing it. In that case, is it the end of it? – awebartisan Commented Sep 20, 2018 at 21:05 - 1 The site uses shopify. I think this is the main file: cdn.shopify./s/files/1/1715/0827/t/5/assets/…. A huge bundle of several libraries. Why don't you listen to click event of the buttons instead? Then you can get the corresponding value of the select event. – Ram Commented Sep 20, 2018 at 21:41
3 Answers
Reset to default 4As per the jQuery documentation change() is not fired when val() is set programmatically
Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.
You need to do it manually when you set val()
$("select[name='id']").val(354).trigger('change');
Edit[0]: After your ments on what you were trying to do I took a quick look at the js.
I found that the template fires a custom event variantChange
$("#ProductSection--product-template").on("variantChange", function(evt){alert($("select[name='id']").val());});
Good Luck;
Since the goal was to get the current value of variant id, here is how I got to that.
Getting the value is not a problem, so when page loads, store the initial value in localStorage then listen to change event on form. Thankfully, change event is triggering on Form element.
$('body').on('change', 'form[action^="/cart/add"]', function () {
console.log($('select[name="id"]').val());
});
Compare the value with previous value and see if its changed. If yes, then do my thing. If not, wait for another change event on form. Yeah, I hope it will work for the long run.
Thank you all !!
I think that should know what triggers this, I mean if change when you change the select of the sizes then inside this you get the value that you need, for example:
$(document).on("change","#select1",function(){
var valuneed = $("#select2").val();
console.log(valuneed);
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="11">size a</option>
<option value="21">size b</option>
</select>
<select id="select2">
<option value="21">value a</option>
<option value="22">value b</option>
</select>And if the update of the second select takes a seconds (is the usual) then you just add a settimeout
If there is more than just on trigger, then you:
$(document).on("change","#select1, #selector2, #selector3",function(){
Let me know if this is what you need.