jQuery to replace text in div when particular text is shown in another div (dynamically updated Shopify pricing variants)

Question

I'm working on a Shopify theme, and have set variants for different product options.

When you change between variants using the dropdown, the product price updates dynamically.

I want to be able to show the price in an additional currency beside the main price.

I've used the below jQuery to do this, but the price doesn't update live - until the page is refreshed (and because the variant choice remains intact, the price updates). It just doesn't update live without refreshing.

if (jQuery(".product-price").html().indexOf('18.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$58.86");
}

if (jQuery(".product-price").html().indexOf('19.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$62.14");
}

if (jQuery(".product-price").html().indexOf('25.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$81.80");
}

if (jQuery(".product-price").html().indexOf('26.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$85.04");
}

Updated version, still not working:

$(document).ready(function(){
$(".single-option-selector").change(function(event) { //HERE IS WHERE YOUR DROPDOWN ID GOES
if (jQuery(".product-price").html().indexOf('18.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$58.86");
}
if (jQuery(".product-price").html().indexOf('19.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$62.14");
}
if (jQuery(".product-price").html().indexOf('25.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$81.80");
}
if (jQuery(".product-price").html().indexOf('26.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$85.04");
}
});
});

You need to wrap these with something that lets the code know you changed the dropdown. Where's your code for the dropdown? — jonmrich
The dropdown is the one which Shopify inserts when you add variants/options to products - which might be the tricky part — Matt Kempster
Inspect that dropdown and get the ID from it and use that in my code in the answer below. — jonmrich
Doesn't seem to work - there are 2 different <select> fields which determine this. They have the same class, but doesn't seem to work using that. Will post below: — Matt Kempster

jonmrich jonmrich · Accepted Answer · 2017-03-14T17:45:52

You need to run your code when the dropdown is changed. Something like this:

$("#yourDropdown").change(function(event) { //HERE IS WHERE YOUR DROPDOWN ID GOES

    if (jQuery(".product-price").html().indexOf('18.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$58.86");
}

if (jQuery(".product-price").html().indexOf('19.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$62.14");
}

if (jQuery(".product-price").html().indexOf('25.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$81.80");
}

if (jQuery(".product-price").html().indexOf('26.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith("$85.04");
}
});

Make sure all of this is wrapped with a document.ready

jQuery to replace text in div when particular text is shown in another div (dynamically updated Shopify pricing variants)

1 Answers