Show offer depending on product price

Question

I currently looked around for some attractive ways to engage to customers perspectives and I came across to elaborate a message for each product "depending on its price".

This topic is mainly for Business Catalyst but some expert on javascript may help.

The target is use liquid or some flexible Javascript on the small-product layout and calculate product price if higher or equal to 30 and display a you got free shipping for this product

I am currently using a jquery but not working dont know why!?

$('.price').each(function(){
    if(parseInt($(this).val()) > 30) {
   $('#get-free').show();
}
});

<div class="small-product round-corner">
 <div class="im-on-sale-{tag_onsale}">SALE</div>
 <div class="photo">{tag_smallimage}</div>
 <div class="title lato">{tag_name}</div>
<div class="price lato"><!--Price: -->{tag_saleprice}</div>
 <div class="retail-price">{tag_retailprice}</div> 
 <div class="instock">{tag_instock} IN STOCK</div>
<div id="get-free" style="display: none;">FREE SHIPPING FOR THIS PRODUCT</div>
<!--<div class="add-to-cart-small">{tag_addtocart,<img src="/images/ui-pieces/add-to-cart-small.png" width="25" height="25" />}</div>-->
<div class="lato rating-stars"><span class="smallString" style="display: none;">{tag_itemurl_nolink}</span></div>
 <div class="favorite loggedin lato"> {tag_addtofavorites,<div class="grey-link"><img src="/images/ui-pieces/favourites-icon.png" width="15" height="15">  ADD TO FAVORITES</div>, <div class="grey-link"><img src="/images/ui-pieces/close-bt.png" width="15" height="15"> REMOVE FAVORITE}</div>
</div>

Some help is much appreciated.

Thanks

Answer 1

You should try using .text() ( http://api.jquery.com/text/ ) or .html() instead of val() . val() is used mainly for form input fields ( http://api.jquery.com/val/ )

Answer 2

Use text() instead of val() for non-input elements like divs. Also, you should test for NaN using isNaN when using parseInt, although in this case the desired effect (showing the free pricing) would not occur if the price field were blank.

if(!isNaN(parseInt($(this).text())) && parseInt($(this).text()) > 30)

Here is a Fiddle Demo

Answer 3

Thanks to a piece of code from Vitorino I was able to come to a clear point but the real reason why it didn't get the string correctly was because of the "£" sign that was generated by the {tag_saleprice} by using .replace(/[^0-9.]/g, ""); that I used before, I was able to pass the value clear of the sign "£", below is the code for those who need:

$('.price').each(function() {
var price = $(this).text().replace(/[^0-9\.]/g, "");
   if (parseInt(price) >= 30) {
    $(this).siblings('.get-free').show();
  }
});

Demo