Links for titles in cms repeaters

Ask the community
,
1

I am trying to add links to the repeater title to the item page. Bizarrely it looks like you can’t do it but need to use buttons instead. However, we have long titles and the buttons only allow one short line.

Does anyone know of a workaround. Would be so graateful!

2

If the titles can’t be linked to can the button text go onto two lines. I feel like I must be missing something as clickable product titles seems so basic?

3

Are you using dynamic pages for this collection?

4

Yes I am and thanks for replying. :slight_smile:

5

Use following code -

import wixLocation from 'wix-location';
import { currentItem } from 'wix-data';

$w.onReady(() => {
    $w("#text9").onClick(() => {
        const item = $w("#dynamicDataset").getCurrentItem();
        
        const itemPageLink = item["linkid"];

        if (itemPageLink) {
            wixLocation.to(itemPageLink);
        } else {
            console.error("Item page link not found");
        }
    });
});

Replace the “dynamicDataset” with your DatasetID.
Replace the “linkId” with the field ID of your Collection’s page link ID
Replace the “text9” with element ID of your title text

This should do the trick.

Hope it helps
Best Regards
Marshall

6 
Hmm. I've never experienced this but I see now. 

A rigged work-around could be to assign a text element to the title column and include a transparent, non-bordered button *in front of the text*. Connect the button's click event to the slug URL in your connection. You wouldn't the text ::hover effect but it SHOULD work. Plus, it'll allow your text to wrap instead of remaining on one line only.

Because it's repeated, I'm not exactly sure if you can query the dataset for that individual index's URL and assign to the repeated text element. I was going to suggest using wixLocation.to('/ { queried url } ') but I'll let someone else chime in on that.

well, I see V-Blog did exactly that. Started typing yesterday and finished it this morning. Hope it worked!

7

Thank you all for such amazingly helpful responses. The button / text box is clever but as you say you lose hover functionality so I’m hoping I can get Marshall’s version sorted.

it didn’t work but I probably got the wrong think for the item link. This is what I put in the code area.

import wixLocation from ‘wix-location’;
import { currentItem } from ‘wix-data’;

$w.onReady(() => {
$w(“#title”).onClick(() => {
const item = $w(“#CaseStudies1”).getCurrentItem();

    const itemPageLink = item["link-case-studies-1-title];

    if (itemPageLink) {
        wixLocation.to(itemPageLink);
    } else {
        console.error("Item page link not found");
    }
});

});

thanks so much again

Em

8

You forgot to put " sign after the link-case-studies-1-title

9

Also check all the IDs of dataset, fields, and text

10

The code you were given is wrong.

You stated your title element was in a repeater. The code would need to be written way differently for it to work.

11

It is working fine for me - https://wixstudiotemplates.wixstudio.io/parallax/news

12

If you notice on your site, when you click on any title (1, 2, etc), it will only ever go to page of Title number 6. That is because the code is incorrect. It is not written to work with a repeater. The logic used was to work as a static element on the page.

2 Likes
13

I see… Thanks for pointing that out.

14

Took me a little to find it but ….

Here is an old “copy to clipboard ” tutorial I have. One example in this tutorial used a repeater. So when you click on something in a repeater something happens. This should help you understanding how to approach the repeater part of the code:

After checking it out, you should be able to rewrite the repeater code correctly.

This other tutorial used the navigation to a dynamic page, but it uses a static dropdown element connected to a dataset. Just in case anyone needed this logic instead:

15

Hi code queen

Thanks so much for your answer! I can’t quite work it out so can you give a few more pointers. I’m actually quite shocked that titles are not linkable as this is very poor usability. The button fix is ok but affects hovers so not ideal. thanks again

16

Is there no easy solution to this? It’s crazy product titles cant be links in the dynamic page list. It’s such basic functionality. Do I have to pay someone for the code?

17

Can this help anyone figure this out?

let pageurl = g.items[0][‘link-galleries-title’];

18

Or this code? this is driving me insane!

import wixLocation from ‘wix-location’;

export function text3_click(event, $w) {
//Getting the current item of the collection
let itemObj = $w(“#dataset1”).getCurrentItem();
//redirect to the relevant dynamic page.
//“link-Games-title” is the name of the field where the URL is saved
wixLocation.to(itemObj[“link-Games-title”]);
}