Question

我试图显示某些产品型号的价格比较，但我无法弄清楚如何在大于零的变量价格进行比较时显示它。它以0.00美元的价格进行比较。

它使用javascript动态更新价格。这是代码：

<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('purchase').removeClass('disabled'); // remove unavailable class from add-to-cart button
$('purchase').disabled = false;           // reenable add-to-cart button
$('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
$('compare-price').innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");  // update compare at price
} else {
// variant doesn't exist
$('purchase').addClass('disabled');      // set add-to-cart button to unavailable class
$('purchase').disabled = true;              // disable add-to-cart button      
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};

// initialize multi selector for product
window.addEvent('domready', function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
});
-->
</script>

当我有一个原始<div id="compare-price"></div>时，脚本工作正常。每个变体的价格动态比较都会添加到该div中。但是当价格没有比较时，它仍然会增加0.00美元。

如果变量的价格没有比较，我该如何隐藏div？我正在尝试做这样的事情：

{% if product.variant.compare_at_price %}
    <div id="compare-price"></div>
{% endif %}

任何人都知道怎么做？

Answer 1

好的，这就是我的工作。可能不是最优雅的解决方案，但它正在发挥作用：

<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('purchase').removeClass('disabled'); // remove unavailable class from add-to-cart button
$('purchase').disabled = false;           // reenable add-to-cart button
$('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
if(variant.compare_at_price > 0.0) {
$('compare-price').innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");  // update compare at price
} else {
$('compare-price').innerHTML = "";
}
} else {
// variant doesn't exist
$('purchase').addClass('disabled');      // set add-to-cart button to unavailable class
$('purchase').disabled = true;              // disable add-to-cart button      
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};

// initialize multi selector for product
window.addEvent('domready', function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
});
-->
</script>

Answer 2

为什么不在回调中检查价格比较？您交给了变体，因此您可以检查价格......并适当地处理它们。

if(variant.compare_at_price > 0.0) {
    $('compare-price').show().innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");
} else {
    $('compare-price').hide();
}

Shopify Liquid：如果价格比较存在，如何仅显示产品变体的价格比较？

2 个答案: