Hello there community. I need your help with strikethrough a price in a repeater.
Project is simple. Inside the repeater we want two formatted price fields. One with the discounted price and one with the original price with a strikethrough line over it. In the database there is a field "formatted price" and a field "formatted discounted price" which have the same values when nothing is on discount.
So when nothing is on discount the "formatted discounted price" will show the orginal price.
When something is on discount the "formatted discounted price" will show the discounted price and
the "formatted price" should appear showing the original price with a strikethrough....
Simple? I don't know... Maybe for the experts is that's why i need your help....
thx in advance
Try console.logging everything to make sure nothing is off...
First thing you need to do is set the text element that displays the discountedPrice to Hidden on Load.
After that, your code seems right.
$w("#dataset1").onReady(() => { const currentItem = $w("#dataset1").getCurrentItem() const { price, discountedPrice } = currentItem $w("#repeater1").forEachItem(() => { discountedPrice < price ? $w("#text170").show() : $w("#text170").hide() $w("#text170").html = `<span style="text-align: center; color:red; text-decoration: line-through;font-size:13px"> ${$w("#text170").text} </span>` }) })
All right here is my code
$w("#dataset1").onReady( () => { const currentItem = $w("#dataset1").getCurrentItem() const {price,discountedPrice} = currentItem $w("#repeater1").forEachItem( ($w) => { if (discountedPrice < price) { $w("#text170").show() } else { $w("#text170").hide() } $w("#text170").html = `<span style="text-align: center; color:red; text-decoration: line-through;font-size:13px">${$w("#text170").text}</span>`; }); }); });
if i get rid of the else { } part the "text170" is shown with the price....
it seems that it does not do the comparison... so it hides it....
this is without the else part...
we want this to be shown only in the mug.... Not in the other products as the two prices are the same...
thx again for the effort
Ok let me try the code then and i'll get back to you...thx again...
Hi and thx for helping a lot! In the code you sent me there is no regularPrice and discountPrice for me to replace...where exactly shpould i do that??
thx again and hope we solve it out!
$w.onReady(() => { $w("#dataset1").onReady(() => { const currentItem = $w("#dataset1").getCurrentItem() //Rename regularPrice and discountPrice with the field keys //that correspond to the prices you need, but NOT the formatted ones //Should be price and discountPrice I think const { price, discountPrice } = currentItem $w("#repeater1").forEachItem(() => { if (discountPrice < price) { $w("#textDiscountPrice").show() $w("#textRegularPrice").hide() } else { $w("#textDiscountPrice").hide() $w("#textRegularPrice").show() } $w("#text170").html = `<span style="font-family:arial; color:red; text-decoration: line-through;font-size:15px">${$w("#text170").text}</span>` }) }) })
To get the price from the collection without using the element manually connected, you are going to need a lot more knowledge of coding. The way I did, uses the text value that the text170 is getting from the manual connection you did, transforms it in a number and stores it in the variables.
In fact, is better to use parseFloat() instead of parseInt().
let regularPrice = parseInt($w("#textRegularPrice").text)
So, as I can see, you are pretty fresh at this. First you need to connect the elements to the collection, I assume you know how to do that. Then, you have to get the value, transform it to number again so you can compare them. Like this:
let regularPrice = parseInt($w("#textRegularPrice").text, 10) let discountPrice = parseInt($w("#textDiscountPrice").text, 10) if (discountPrice < regularPrice) { $w("#textDiscountPrice").show()$w("#textRegularPrice").hide() } else { $w("#textDiscountPrice").hide()$w("#textRegularPrice").show() }
if (discountPrice < regularPrice) { $w("#textDiscountPrice").show() $w("#textRegularPrice").hide() } else { $w("#textDiscountPrice").hide() $w("#textRegularPrice").show() }
Yes you have to use something to compare, but I don't know your code, so I imagined you would change the variables to the ones you have there.
You can do it in many ways, either only applying the strike-through or using the .show() / .hide() methods with two elements.
I must be sleepy, just checked my answer and noticed that I started talking about the two elements only to give you the simpler answer.
I'm sorry, I gave you the wrong answer before, forget about that one. Just create two elements, one for the regular price and other for the discounted price with strike-through, and use the if statement that you thought of:
if (discountPrice < regularPrice) { $w("#textPrice").html = `<span style="text-decoration: line-through">${price}</span>` } else { $w("#textPrice").html = `<span style="text-decoration: none">${price}</span>`
Has anyone an answer?
Anyone can give a hint?
Thx for the reply... Isn't it easier to show the strikethrough only if the new price is lower than the old? Just an if statement but i dont know how to apply it...
Anyone has an idea?? Maybe an expert could help us?
Hello, with this code i managed to strikethrough the text wich is the formatted price... How can i show it only if the formatted price is different from the discounted price?
this must be an "if...then" statement but what is the sysntax?
I have 2 textboxes..
the one is connected to the formatted price and the other is connected to the discounted price.... Before the discount they have the same price.... Without the" if.... then" they appear both and the one has a strikethrough. I want to show this only if they are different...
We must hide by default the formatted price and only show it if it is different from the discounted price....Any ideas???
$w.onReady(function () { $w("#dataset1").onReady( () => { $w("#repeater1").forEachItem( ($w) => { $w("#text170").html = `<span style="font-family:arial; color:red; text-decoration: line-through;font-size:15px">${$w("#text170").text}</span>`; }); }); });
Hello friend.
There are a lot of ways of achieving the same result.
You could create a text element, like $w("#textPrice") and manipulate its HTML with some text-decoration, like:
$w("#textPrice").html = `<span style="text-decoration: line-through">${price}</span>`
But, to do that, first you have to grab the price from the collection and put it in this price variable that I put inside the HTML Text Style.
If you need help with that, I'll have to know more about the project to help you out.
Cheers.
This is exactly the problem I have. Any help would be great. Thanks
Anyone??