Shopify Liquid: How to only show a compare at price for a product variant if the compare at price exists?

1
votes

I'm trying to show the compare at price for some product variants but I can't figure out how to only show it when there is compare at price for the variant that is greater than zero. It's showing compare at prices of $0.00.

It's using javascript to dynamically update the the price. Here's that code:

<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>

The script works fine when I have a raw <div id="compare-price"></div>. The dynamic compare at price for each variant gets added to that div. But when there is no compare at price it still adds $0.00.

How do I hide the div when there is not a compare at price for the variant? I'm trying to do something like this:

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

Anyone know how to do this?

2
javascriptmootoolsshopifyliquid

2 Answers

1
votes

Ok, this is what I got to work. Might not be the most elegant solution but it's working:

<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>
0
votes

Why don't you just check the compare at price in the callback? You're handed the variant, therefore you can check the prices... and deal with them appropriately. 

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