How to strikethrough text with code?

Ask the community
,
1

Hi,

So I would like to strike through a text element (which would be the previous price) with some code on each page that contains repeaters.

Anyone know what code to put in on the pages to convert a normal text into a striken through one ?

2

Text elements can contain a subset of HTML in them. You could use the text-decoration: line-through style.

Read more about this:

3

Thanks but this is all mumbo Jumbo to me ^^

Could you maybe provide the bit of code to do that ?
The text I need striken through is named #text80

4

How does the text get in there? Is the text element connected to a dataset?

5

Yes it is connected to a filed in one of the datasets. #dynamicDataset

6

Something like this, but you might have to play with it a little:

$w.onReady(function () {
	$w("#dataset1").onReady( () => {
  		$w("#text80").html = `<span style="text-decoration: line-through">${$w("#text80").text}</span>`
	} );

});
1 Like
7

Amazing ! It works, well amost :

It doesn’t fetch the data anymore so the text displayed is the placeholder one.

Also, can I have the same with red bold Italic Arial in fontsize 15 please ?

8

  1. Can you show us your full code, so I can try and see why you’re seeing the placeholder text

  2. The style property of the span element is a standard HTML attribute that takes CSS styles. You can add any additional styles in there as long as they are supported. The list of supported styles is in one of the links above. I suggest using this site to learn more about the style attribute: HTML Styles

9

The text can be seen right under the truck icon

10

Hi,
You shouldn’t create two different “onReady” functions…
Place the code in the first “$w(”#dynamicDataset").onReady" only and delete the second.

11

Alright.

It still strikes the text through, but the text doesn’t change according to the data it is connected to. Also I can’t really figure out how to put what and where to make it red Arial 15.

This is what I tried, to no avail :

$w.onReady(function () {
	$w("#dynamicDataset").onReady( () => {
		//trims the date and time
$w("#repeater2").forEachItem( ($w) => {
const originalDate = $w("#text89").text;
const newDate = originalDate.split(' ').splice(1, 4).join(' ');
$w('#text89').text = newDate;
 console.log('Time removed from Date/Time Stamp: New Date ' + newDate);
	});
	//strikes through 'previous price' (not working now)
	$w("#dataset1").onReady( () => {
  		$w("#text80").html = `<span style="font-family:arial;" style="color:red;" style="text-decoration: line-through">${$w("#text80").text}</span>`;
	} );
});
});
12

bump !

13

Hi,
Can you please share a link to your site ?
Roi

14

Here :

evywhere you seee a previous price, that’s what I want to strikethrough

15

bump

16

Hi Tristan,
You have syntax mistakes. You should add style attribute only one time.
Try this line:

$w("#text80").html = `<span style="font-family:arial; color:red; text-decoration: line-through;font-size:15px">${$w("#text80").text}</span>`;Roi
17

Thanks, but it doesn’t display the data connected to this text, only the placeholder text.

18

Move the line to the $w(“#repeater2”).forEachItem scope.

$w("#text80").html = `<span style="font-family:arial; color:red; text-decoration: line-through;font-size:15px">${$w("#text80").text}</span>`;

Roi

19

Thanks a lot it works !

20

Hi guy ! I try to get strikethrough text code with your code, but also it doesn’t display the data connected database to this text, only the placeholder text. Could you please expand “Move the line to the $w(” #repeater2 “).forEachItem scope” but still not work.