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
Does anyone have an idea on the matter? Maybe an expert could help?
This is exactly the problem I have. Any help would be great. Thanks
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.
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> ;
});
});
});
Anyone has an idea?? Maybe an expert could help us?
You can do that using a simple conditional inside the template literal you are using. For example:
$w("#textPrice").html = `<span style="text-decoration: line-through">${oldPrice > newPrice ? oldPrice : newPrice}</span>`
This template literal has a ternary inside that you read like this:
${oldPrice > newPrice ? oldPrice : newPrice}
Is oldPrice is bigger (>) than newPrice ? Yes, then oldPrice : No, then newPrice.
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…
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>`
@bwprado shouldnt we declare somewhere what is discountprice and regularprice?
Listen i have two textboxes…the one has the syrikethrough price which is hidden by default and we want to show it only when the price is bigger than the discounted… if theu are the same which means that no discount has been applied it will stay hidden…
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.
if (discountPrice < regularPrice) {
$w("#textDiscountPrice").show()
$w("#textRegularPrice").hide()
} else {
$w("#textDiscountPrice").hide()
$w("#textRegularPrice").show()
}
My code is just this… Can you tell me where to declare variables and dot the if statement? discount price should get the discountprice from the products database and regular price should get the regular price from the products database…How do i do that?? thx in advance…
$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> ;});});});
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()
}
In fact, is better to use parseFloat() instead of parseInt() .
let regularPrice = parseInt($w("#textRegularPrice").text)
In the repeater i have connected the one text box with the name “text170” with the field Formatted Price (text) with fieldkey: formattedPrice.
The other text box with the name “text167” is connected with the field Formatted Discounted Price (Text) with fieldkey: formattedDiscountedPrice
I need the variable regularPrice and the variable discountPrice to be connected with those from the database of products…
The code your are giving me is doing that think…thx in advance…
I think we r getting close
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.