Text clickable in repeater

Ask the community
, ,
1

I have created a repeater that shows blog posts from the dataset.
As you see in the code, if the text is longer than the designated area for the plain content, it will be reduced to 400 signs and the “read more” will be added.
Works perfectly.
Now, the question is… as I am very new to coding, is there any way to make “read more” text clickable and redirect to the specific blog post url in the repeater?
Thank you in advance.

$w . onReady ( () => {
$w ( “#dataset” ). onReady ( () => {

$w ( “#repeater” ). onItemReady ( ( $item , itemData , index ) => {
let longTitle = itemData . plainContent ;
var shortTitle = longTitle . substr ( 0 , 400 );
$item ( “#text216” ). text = shortTitle + " " + " read more " ;
})

2

You just need to create the click with the context event, because it is a repeater, like this:

$w.onReady(() => {
    $w("#textRepeater").onClick((event, $item) => {
        $item = $w.at(event.context) //This creates the context (the item inside the repeater)
        $item("#textRepeater").text = "Clicked!" //This changes the text in the context
    })
})
3

Thank you for your feedback, Bruno!
Maybe I wasn’t very clear…I want something like this:

Lorem ipsum dolor sit amet consecte Read more

…the text inside the repeater is shortened with my code, followed by the “Read more” which should be clickable…

4

Just make the Read more a separate text element with the ID textRepeater and put the same code I wrote.

Instead of:

$item("#textRepeater").text ="Clicked!"

Just put whatever you want it to do.

5

Ok, but to be able to click and follow a link to a specific post page the format should be:
$item ( “#textRepeater” ). html = “whatever!”

6

Bruno already gave you the right solution.

This is all you need to achieve your aim.

import wixLocation from 'wix-location';

$w.onReady(function () {
    $w("#txtReadMore").onClick((event, $item) => {
        $item = $w.at(event.context) 
        $item("#txtReadMore").text = "Clicked!"
        wixLocation.to("http://google.com"); // Put in here a url to dynamic-page.
    })
});