Direct repeater item to dynamic page

i want users to click on one item in repeater page and then direct them to a dynamic page and show data of selected item at that place,
may you help me?:slight_smile: please help if you know very greatfull if i know it
thanks

1 Like

Hi,

First you need to get the current Item onClick, then to use these data to redirect the page to that item’s dynamic page. So your code should look something like this :

   $w("#ItemContainer").onClick( (event, $w) => {
 let targetId = $w("#dataset1").getCurrentItem()._id;
  wixLocation.to('/dynamicPage/'+ targetId) // 
} );

Note that i used the id to be the page Title ( Path ) .

Hope this helps!
Best,

Mustafa

thanks, i’m so happy :wink:

Hello,

@mhammouz I have the same issue, but have no idea how to code it to get it to work… can you help me please? My website is www.maidstonelabour.com, and the repeater page is from the Menu: Key People: Councillors & Candidates (www.maidstonelabour.com/2019-council-candidates) I’d like to be able to click on the image in each repeater and for the user to be taken to the dynamic page that corresponds to that person’s biography page, which is located in the dataset connected in that page…

Cheers,

Jessica

Hello! I am trying to do the same thing. My repeater has the words “Read More” and no pre-programmed way to link it to the dynamic page. Only the images link to the dynamic page.

I copied and pasted Mustafa’s example above.

The only thing I changed was “#ItemContainer” to “#text47” (button name). Is that correct?

It’s not working. The only error appears to be: “wixLocation” is “undefined.”

Am I supposed to change wixLocation to the Field Key? How do I point to the page?

Do not use wixLocation.to.to
Omit one of the “.to”

Points for speed! But … it didn’t work :frowning:

$w(“#text47”).onClick( (event, $w) => {
let targetId = $w(“#dataset1”).getCurrentItem()._id;
wixLocation.to(‘/dynamicPage/’+ targetId) //
} );

Is the last “targetId” supposed to be the button # also?

Sorry - I took web design classes almost 20 years ago :frowning:

You probably has to change the _id and use the field key with the link to your target page.
for example:

let targetId = $w("#dataset1").getCurrentItem()["link-title"];
wixLocation.to(targetId);
//check your collection to see the field key. Be sure to use the field key and not the field name.

Well, that didn’t do it, but I’m out of time today. I’ll try again tomorrow - thank you!

Thoroughly confused.

After J.D.'s post I tried a few things. The latest:

$w(“#text47”).onClick( (event, $w) => {
let targetID = $w(“#dataset1”).getCurrentItem()[“link-mobilestorytimekit-Kit-Info-title”];
wixLocation.to(‘/dynamicPage/’+ targetID) //
} );

I still don’t know if I’m supposed to change “wixLocation” and what I’m supposed to type in its place.
And targetID - that’s another one I’m not sure of.
#item container is the name of the button “Read More”
I changed “link-title” to my field key

Is there a spelling error? Something else I’m missing?
Am I supposed to do something on the dynamic page side?

Why is there a “Read More” button on this repeater Wix? Wix tech support will not help me - they sent me here instead.

delete this: ’ /dynamicPage/'+
Use:

wixLocation.to(targetID);

Like this:

$w(“#text47”).onClick( (event, $w) => {
let targetID = $w(“#dataset1”).getCurrentItem()[“link-mobilestorytimekit-Kit-Info-title”];
wixLocation.to(‘wixLocation.to(targetID);’+ targetID) //
} );

That didn’t work either :frowning:
And there were these errors:

There was an error in your script
The element selector function (usually $w) cannot be used before the page is ready

I successfully coded the next and previous buttons on the dynamic page, so this is everything on that page, if that makes a difference (?):

import {local} from ‘wix-storage’;

const linkField = “link-mobilestorytimekit-Kit-Info-title”; // replace this value

$w.onReady( function () {
$w(“#dataset1”).onReady(() => {
const numberOfItems = $w(“#dataset1”).getTotalCount();

$w("#dataset1").getItems(0, numberOfItems) 
  .then( (result) => {  

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem(‘dynamicPageURLs’, dynamicPageURLs);
} )
. catch ( (err) => {
console.log(err.code, err.message);
} );
} );
} );

$w(“#text47”).onClick( (event, $w) => {
let targetID = $w(“#dataset1”).getCurrentItem()[“link-mobilestorytimekit-Kit-Info-title”];
wixLocation.to(‘wixLocation.to(targetID);’+ targetID) //
} );

I thought that maybe I misunderstood, so I changed to this, but still no dice:

import {local} from ‘wix-storage’;

const linkField = “link-mobilestorytimekit-Kit-Info-title”; // replace this value

$w.onReady( function () {
$w(“#dataset1”).onReady(() => {
const numberOfItems = $w(“#dataset1”).getTotalCount();

$w("#dataset1").getItems(0, numberOfItems) 
  .then( (result) => {  

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem(‘dynamicPageURLs’, dynamicPageURLs);
} )
. catch ( (err) => {
console.log(err.code, err.message);
} );
} );
} );

$w(“#text47”).onClick( (event, $w) => {
let targetID = $w(“#dataset1”).getCurrentItem()[“link-mobilestorytimekit-Kit-Info-title”];
‘wixLocation.to(targetID);’ //
} );

First of all, you need of course to import wixLocation from ‘wix-location’;
Second, I’m not sure what kind of page is it. On one hand you counted the numberOfItems which means there’re many items in the dataset. On the other hand, you used .getCurrentItem() that can get a single item. So you should elaborate a little bit more and explain what you’re trying to achieve.

So sorry! And I’ve been googling wixLocation and nothing tells me what this means. I’m supposed to import something?

I have a dataset with multiple Story Time kits, with: kit name, image, short description, and long description. We have about 14 of these kits right now.
I have a page with a repeater that has the list of kits, names, and short descriptions.
When you click an image on the repeater it opens a dynamic page with the name, a larger image, short description, and a long description. Only the image will link to a dynamic page with the usual Wix tools.

I asked Wix how to make a next and previous button on the dynamic page for each kit, and they sent me a bunch of links. I tried everything until those buttons worked. I also asked Wix how to make this link I’m trying to make now, but they didn’t understand the question when I referred to it as “Read More.”

Visual aid:
https://www.keokuklibrary.org/mobile-story-time

I really do appreciate you trying to help.

Now I got you.
So at top of the page code, you should write:

import wixLocation from 'wix-location';

Since text47 is inside a repeater, you can’t treat it as a regular item, and instead of your onClick() function, you should use this code:

$w("#repeater1").onItemReady( ($item, itemData, index) => {
 $item("#text47").onClick( (event) => {
 wixLocation.to(itemData["link-mobilestorytimekit-Kit-Info-title"]);
 }); 
})

and put the $w(“#repeater1”).onItemReady() function inside the $w.onItemReady().

I’m sure I mangled your instructions! Can you tell me what’s wrong with this picture?

import wixLocation from ‘wix-location’;
import {local} from ‘wix-storage’;

const linkField = “link-mobilestorytimekit-Kit-Info-title”; // replace this value

$w.onReady( function () {
$w(“#dataset1”).onReady(() => {
const numberOfItems = $w(“#dataset1”).getTotalCount();

$w("#repeater1").onItemReady( ($item, itemData, index) => { 

$item(“#text47”).onClick( (event) => {
wixLocation.to(itemData[“link-mobilestorytimekit-Kit-Info-title”]);

$w("#dataset1").getItems(0, numberOfItems) 
  .then( (result) => {  

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem(‘dynamicPageURLs’, dynamicPageURLs);
} )
. catch ( (err) => {
console.log(err.code, err.message);
} );
} );
})

It doesn’t like the punctuation at the end, that’s for sure.

add })}) after this line: wixLocation.to(itemData[“link-mobilestorytimekit-Kit-Info-title”]);