Last edited 9 months ago
How to only show a compare at price for a product variant if the compare at price exists?
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 %}
How do I do this?
Posts:
Your mootools is unknown to me :0
In a jQuery callback you can do this:
if(variant.compare_at_price == null){ $('.options .price').html('<strong>'+Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}")+'</strong>'); } else { $('.options .price').html('<strong>'+Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}") + '</strong> <span class="compare_at_price">was <del>' + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}") + '</del></span>'); }Posts:
It seems like this should work, but it doesn't. Not understanding why:
Posts:
¯\_(ツ)_/¯
No null in mootools? Again... we'll have to wait for a mootools person to chime in. I'll see if I can get you an answer....
Posts:
@Jamie... null is an unescapable fact of Javascript. Has nothing to do with jQuery or Moo or any other library riding on top of Javascript.
If the code is (variant.compare_at_price == null) or even nicer (!variant.compare_at_price) then so be it.
Posts:
@Imcalilly this logic will work for your scenario...
if (variant.compare_at_price){ // yup, we have a compare at price } else { // nope, there's no compare at price }