Repeaters and Dynamic Pages

Discussion Ask a question
,
1

I have a dataset that consists of only text items…

I am using a “Repeater” to display that dataset on a “regular” page. All works fine…

I want to be able to “click” on any container in the repeater and be taken to a dynamic page I have created for that dataset. But I am not given that option.

I guess I could also use a galery to do this but galleries insist on using images (which make sense) so this will not work in my use case.

For galleries, there is an option to “link” to a dynamic dataset. I do not see this for repeaters. Is this not the idea behind repeaters?

Guidance would be appreciated. Thanks!

2

I just did this in the last few hours.

The way I did it was … put a text field in the repeater’s container to hold a URL. Hide the text field as soon as the page hits onReady.

While doing forEachItem in your repeater, set the URL for each item.

Create an onClick for the container. In the onClick, use wixLocation.to( ), to go to the URL for that item.

You can also set up a colored shape that matches the size of the container, and is a different color to the background of the container. You can show( ) and hide ( ) this shape in mouseIn( ) and mouseOut( ) event handlers, if you wanna give a visual indication. (This is a hack because there is no facility to change the color of a container’s background, from what I can see.

This is all really hacky, shitty stuff, but I constantly find myself doing things like this while doing Wix Code. The features are extremely limited.

3

Many thanks! At least I am not nuts… :slight_smile:

I had hoped (and thought) this would be easy to do. I guess not.

I appreciate the help and will follow what you said. Can you share the code you used to set the URL?

I also find myself having to hack things quit a bit (and this is a super simple web site).

Thanks and happy 2018!

4

Here you go …

for (let i=0; i<totalNumThreads; i++) { 
		// construct new object for repeater data, from the current forum 
		URL = wixLocation.baseUrl + "threads/viewthread/" + threads.items[i]._id;   
		//get the name of the owner of the forum 
		var ownerName; 
		if (forums.items[i].isAdmin) 
			ownerName = ""; 
		else 
			ownerName = forums.items[i].ownerId.firstname + " " +  
                                                   forums.items[i].ownerId.lastname; 
		// get the creation date of the forum 
		var createdDate = forums.items[i]._createdDate.toDateString(); 
		newRepeaterItem = { 
			"_id" : i.toString(10), 
			"URL" : URL, 
			"title" : forums.items[i].title, 
			"ownerName" : ownerName, 
			"createdDate" : createdDate 
		}; 
		// push new object onto repeater data 
		repeaterData.push(newRepeaterItem);		 
} 
$w('#repeater').data = repeaterData; 

$w("#repeater").forEachItem(($w, itemData, index) => { 
	
	$w("#textThreadName").text = itemData.title; 
	$w("#textURL").text = itemData.URL; 
	$w("#textURL").hide(); 
	$w("#textOwnerName").text = itemData.ownerName; 
	$w("#textCreatedDate").text = itemData.createdDate; 

});

Merry New Year! :-/

2 Likes
5

Again, thanks for the help. My use case is a bit different but your code gave me ideas on what I needed to do. My dynamic page is basically: /Services/ where NAME is the the name of a business. It would be great to grab the actual URL (which is in the record) but I could not figure out how to do that.

My solution was basically to create the URL (which is pretty easy using standard JavaScript) and then pass that into wixLocation.to(). The trickiest bit was replacing the spaces in the name with dashes to follow the URL format wix uses.

This really, really should be built into repeaters as it must be a common use case…Repeaters are GREAT for showing a dataset in a nice format. But you should be able to easily click on a container and get to the relevant dynamically generated page.

Thanks again!

export function container1_click(event, $w) { 
	const urlName = "/Services/" + $w("#bizName").text.replace(/\s/g , "-"); 
	wixLocation.to(urlName);  
 
}
6

Absoutely, to all you said.

7

also you can try to do it without code by using buttons.
option 1 (if you have short texts) - instead of adding text to a repeater item, add a button, then connect button label to text and button link to dynamic page.
option 2 - add a text field and connect to text (as you did) and add a button on top of it (remove label text and make it transparent), then connect button link to dynamic page link. You can make button as big as your item. You can have a hover effect on your item as a bonus :slight_smile:

8

Hi if a dynamioc page is linked to using a script like this, will Google bots find and index it?

9

You can make your text fields as Rich Text and then there you can hyperlink it.