d
Topic
lmcalilly Shopify Partner Dailyvinyl.com
Posts:
32
Last edited August 21, 2012

How to only show a compare at price for a product variant if the compare at price exists? This post is outdated

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?

 

i
Replies
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5854
August 21, 2012

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

 

 

http://evolvedesign.co ::: http://twitter.com/bacchus
lmcalilly Shopify Partner Dailyvinyl.com
Posts:
32
August 22, 2012

It seems like this should work, but it doesn't. Not understanding why:

 

<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').show().innerHTML = Shopify.formatMoney(variant.compare_at_price, "{{shop.money_with_currency_format}}");
    } else {
        $('compare-price').hide();
    }
} 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>

 

Jamie Chief Officer of Funness shopify.com/plus
Posts:
5854
August 22, 2012

¯\_(ツ)_/¯

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

http://evolvedesign.co ::: http://twitter.com/bacchus
Posts:
2710
August 22, 2012

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

Specializing in Shopify Apps hunkybill@gmail.com http://www.resistorsoftware.com
Posts:
163
August 22, 2012

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

 

John --- http://experts.shopify.com/patternhead --- www.rawsterne.co.uk --- http://twitter.com/patternhead --- A few Shopify sites that I've worked on... http://oreedesign.com/ ::: www.carstache.com ::: www.waltzingmousestamps.com ::: http://shoprustyknuckles.com ::: www.papermash.co.uk ::: http://shop.mulberryroad.com

Log in or sign up for an account to reply.

This thread has been closed! You will not be able to reply.