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

can you please show the relevant HTML. Also, you should consider using console.log(parseInt($(this).val())) to see what value is being compared to 30. It's entirely possible you're getting NaN from parseInt, in which case you'd want to test for that and only use parseInt on fields that contain numbers. — devlin carnate, Dec 30 '15 at 18:55
Perhaps whatever you're using to inject `{tag_saleprice}` isn't working? Try `console.log($(this).val())` — Andrue Anderson, Dec 30 '15 at 18:59
For some reason i dont get nothing, can you elaborate the code the way you think it should be — Ricardo Alves, Dec 30 '15 at 19:01
I am not sure maybe because theres a "£" on the string? but tex() or val() is not working in this case — Ricardo Alves, Dec 30 '15 at 19:08
If you have multiple products on page that would not work as you should have id unique. Change it to a class. — E_p, Dec 30 '15 at 19:11
https://jsfiddle.net/v06xv207/ i have added `$ - dollar` sign with pseudo element for price — Vitorino fernandes, Dec 30 '15 at 19:27
I can quite say that Vitorino solution is quite right but still not working, I am starting to think that there's something else avoiding it from happening, I will get back to it in 1 hour — Ricardo Alves, Dec 30 '15 at 19:34
Right, I discovered that the reason why nothing is working is because of the "£" sign when the {tag_saleprice} is generated when i was playing with Vito's Fiddle version I tried inputing the prices as generated on the DOM lets say £35 and it breaks the results, does any one know how i can avoit it from reading the "£" https://jsfiddle.net/v06xv207/1/ — Ricardo Alves, Dec 30 '15 at 20:08

score 2 · Answer 1 · edited Jan 13 '16 at 07:13

2

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

edited Jan 13 '16 at 07:13

L84

45,514
58
177
257

answered Dec 30 '15 at 19:05

Nora

3,093
2
20
22

score 1 · Answer 2 · answered Dec 30 '15 at 19:17

1

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

answered Dec 30 '15 at 19:17

devlin carnate

8,309
7
48
82

@Skwashy - sure it does. Are you looking at your browser's console log? – devlin carnate Dec 30 '15 at 19:45
I added an html element to hold the value I was passing to console.log, so you can see the result without looking at the browser console log. here's that version: https://jsfiddle.net/21chf5an/2/ – devlin carnate Dec 30 '15 at 19:47

score 0 · Accepted Answer · answered Dec 30 '15 at 22:32

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

Show offer depending on product price

3 Answers3