1

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

1

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.