How do I use a Collection field in the URL of a Repeater item?

Ask the community
,
1

I have a Collection named Books that have Title, Image, Description, etc. I have a Repeater that displays the Image and Title. I want to click on the Image and go to the Dynamic Page that shows all the information. How do I set up the link using the editor?

If I choose Page as the link type, it allows me to select the proper Dynamic Page, but forces me to choose one item in the Collection…and then every item in the Repeater shows that same detail page.

If I choose URL as the link type, I can’t find any way to specify that the URL should be built dynamically. I tried specifying the root URL plus: “/books/{title}” and “/books/{Title}” and “/{books (Title)}” but all result in 404 errors even though the pages are there if I manually type the URL into my browser. For example, if I have a test book entitled “0001” and try to go to https://…/books/0001 it succeeds.

This seems like a fundamental capability for a Repeater. Is there any way to do it?

2

You can make use of the repeater onItemReady

#repeater1 - the repeater
#image1 - the image In the repeater

import wixLocation from'wix-location';

//paste the below code under your page onReady code ( $w.onReady() )
$w("#repeater1").onItemReady(($item, itemData, index)=>{
 $item('#image1').onClick((event) => {
 wixLocation.to(`/books/${itemData.title}´);
 });
});

Reference →

3

Apparently, there’s something else that I don’t understand to get that to work. (This is my first time adding code to a Wix page.) I turned on Corvid. I went to the code window for the main page and added the code, changing the image name to match my page.

I left the settings on the image to be a link to a URL (with a dummy URL=the main page) since turning off linking for that control made it not clickable.

When I run the page, clicking the images takes me to the dummy URL rather than the individual dynamic page, as shown in the Chrome popup when I fly over the image.

EDIT:

I was able to get it working by the following code.