How Do I Connect a Title to a Page URL?

Ask the community
,
1

Greetings,

I’m trying to create a “Latest Posts” box for my forum. The one that Wix gives you has too much information and can’t be edited. I just want the title of the post of the five most recent posts.

I know how to connect a text element to my data set, but only buttons allow you to connect to both a title and URL. Is there any way around this?

Buttons don’t show the full title. I’d like to have the full title show and be able to click the title.

2

Heya David!

Text elements have onClick() events that you can use in order to make them do something once clicked.
For example - assuming your title & link of the relevant text element is stored in a collection, if you’d retrieve the link you can use it in our wixLocation.to() API on the event of clicking on the text.
It should look something like this:

let link = (your link from the collection)
$w('#text1').onClick(()=>{
    wixLocation.to(link);
})

Let me know if it works for you.

Doron.

3

Okay! I think I’m close. . . I just can’t get the wixLocation.to(link) to except the variable I’ve created. Can anyone see where I’m going wrong?

Here is my code:

export function text27_click(event) {      
    let link = $w('#dataset1').getCurrentItem().pageURL;              
    $w('#text27').onClick(()=>{      
    wixLocation.to(link); 
})

I’m getting “wixLocation” is not defined.

4

Here’s what I’m trying now:

import wixLocation from 'wix-location';
export function text27_click(event) {       
  let link = $w('#dataset1').getCurrentItem().pageURL;   
  $w('#text27').onClick(()=>{
  wixLocation.to(itemObj);
});
}

Now it’s saying it needs to be a string. . . Am I just way off on both accounts, or is there a simple fix here?

Could really use some input.

5

You’ll see below that I’ve tried something else. Simply put, I’m trying to create the “Newest Posts” field on the right of this forum, complete with clickable titles that change color on hover.

What I have now is dynamic titles of forum posts showing up. I just need to make them clickable and then have them change color.

6

Actually you’re pretty close!
First in order to make your life easy try to console the value & type of the variable the causing you trouble. See if it holds what you expect.
Then, the method of wixLocation.to indeed expects a string. You can turn the value to string simply by using the JS method toString() .

The only thing is that I don’t know why you’d send in the wixLocation the entire itemObj. You should send the link.toString(). (And again, always check that the values that you’re sending are actually the ones you expect).

7

@Doron Alkalay : Thank you for your guidance on this. I’m not exactly sure how to use the console . . . or where it is. But this is my code now:

export function text27_click(event) {
     let link = $w('#dataset1').getCurrentItem().pageURL;
     $w('#text27').onClick(()=>{
     link.toString();
});
}

All I’m trying to do is create the “Newest Posts” section you see here on the right in these forums. Unfortunately, my code still isn’t working, though. It seems straight-forward enough. I just don’t know what I’m missing.

If I have just one example, I could easily do everything else I need to do. I just need to see one working example of a “Newest Post” section. Is there any chance you can fix this for me?

8

All you had to change from the last version is the itemObj in the last line to the link you retrieved from your collection. Since the format is apparently not of type string as it should, use the method toString() in order to correct it.

Your code should look like this:

let link = $w('#dataset1').getCurrentItem().pageURL;
     $w('#text27').onClick(()=>{
     link.toString();
});

Note that in this bit of code you already define the onClick event so no need to use the syntax of “export function text27_click(…etc”, simply put my bit of code in the onReady function of your site and it will trigger every time the text is clicked.

Doron.

9

@Doron Alkalay : Sorry. It’s still not working. I had to change the field key. I had “pageURL” instead of “pageUrl”. Thought that was the silver bullet, but no.


$w.onReady(function () {
   let link = $w('#dataset1').getCurrentItem().pageUrl;
   $w('#text27').onClick(()=>{
      link.toString();
   });
});
10

@davidallenfarrell It is my bad, you need the API function as well -

$w.onReady(function () {
   let link = $w('#dataset1').getCurrentItem().pageUrl;
   $w('#text27').onClick(()=>{
     wixLocation.to(link.toString());
   });
});

Let me know if it works for you, if not, please share a link to the page where you try to implement this code snippet so I can inspect the issue furthermore.

Doron.

11

Thank you guys , I have also this issue but now solved Thank you.

12

Can you post what you have, my man???

13

@doron-alkalay

Sorry, I posted this reply in the wrong spot.

I got it to work, but I have four posts in the repeater. The titles for each post are showing up, but the links all point to the same forum post.

Any ideas?

import wixLocation from 'wix-location';
$w.onReady( () => {
   $w("#dataset1").onReady( () => {
      let link = $w('#dataset1').getCurrentItem().pageUrl;
      $w('#text18').onClick(()=>{
         wixLocation.to(link.toString());
      });
   });
});