Question

我正在使用Shopify主题，并为不同的产品选项设置了变体。

使用下拉列表在变体之间进行更改时，产品价格会动态更新。

我希望能够以主要价格旁边的其他货币显示价格。

我已经使用下面的jQuery来执行此操作，但价格并未实时更新 - 直到页面刷新（并且因为变体选择保持不变，价格更新）。它只是在没有刷新的情况下直接更新。

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

更新版本，仍无效：

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

Answer 1

更改下拉列表时需要运行代码。像这样：

$("#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");
}
});

确保所有内容都包含document.ready

当特定文本显示在另一个div中时，jQuery替换div中的文本（动态更新的Shopify定价变体）

1 个答案: