Ad

JQuery To Replace Text In Div When Particular Text Is Shown In Another Div (dynamically Updated Shopify Pricing Variants)

- 1 answer

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");
}
});
});
Ad

Answer

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

Ad
source: stackoverflow.com
Ad