Making a container clickable

[reymcfc]

Hi, i’m currently working on a repeater that has container on dynamic pages… the problem is i want to make the container clickable using code but the container is connected with the dataset and each item has different URLs (/dynamicPage/{Title}) and I already tried several ways but it didn’t work out.

What should i put in the $fieldKey if i want to connect it with different URLs each item according to their respective Titles? Thanks!

import wixLocation from 'wix-location';
$w.onReady(function () {
    $w("#container1").onClick( (event) => {
        wixLocation.to("$fieldKey");
    })

});

[CODE-NINJA]

Everything what is INSIDE REPEATER → $item (not $w)
If you use $w INSIDE REPEATER you will call all items (at once).

Create a REPEATER ( ‘#repeater1’ ) on your page.
Rename your REPEATER-Container to → ‘#container1’

Paste the following code to your page: Test the SETUP.

let data = [
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

$w.onReady(function () {
    $w('#repeater1').data = data;
    $w('#repeater1').onItemReady(($item, itemData, index)=>{
        console.log("Item-Data: ", itemData); 
        console.log("Index: ", index);
        
        $item('#container1').onClick(()=>{
            console.log("Selected-Item-Data: ", itemData); 
        });
    });
});

[josephchancewatkins]

What is the end goal in having something clickable in the repeater? You already can have each repeater link to it’s respective pages using the database. If you have something clickable in the repeater, it’s going to repeat on all of the elements.
If you could tell me the goal you are trying to achieve then I could help you better, but I am honestly having a hard time figuring out what could be put on a repeater that should be clicked other than the links to their respective dynamic pages.

[CODE-NINJA]

There a a lot of different scenarios, where you will need, what Reyhan Pratama is searching for.

For example a simple CHANGING of container-color.
Or you want to change the label of the clicked item in your REPEATER.

Just two simple examples, where you will need, exactly what the post-opener was searching for.

[reymcfc]

i’m creating a real estate website, i wanted the container (which is inside a repeater) can be clicked and directing them to each real estate…

[CODE-NINJA]

@reymcfc
Were you able to solve your problem already?
If not → show your DATABASE where you have the DYNMIC-DB-FIELDS inside.

I assume your REPEATER is connected with a DATABASE by a DATASET (non-dynamic), right?

[reymcfc]

@russian-dima i still haven’t solved my problem… and you’re right my repeated is connected through a dataset, this is the field that i want to connect with my container which is the “Cluster - Sidoarjo” field…

[reymcfc]

@russian-dima the repeater i’ve shown above is on the Dynamic Page (All)

[CODE-NINJA]

@reymcfc Yes! I already assumed it. I first wanted to ask you that question, but deleted my post again, because it was clear.

Here an [almost] working example! Why → [almost] ???
Because the last step will be done by your own

Let’s go!
Here on this example page, you will find a reconstruction of your project-setup…

https://russian-dima.wixsite.com/my-site-3/dynamicslides

-Containing a DYNAMIC-ALL page
-and a the DYNAMIC-ITEM page

Of course the repeater is placed on the dynamic-ALL page, since it normaly is generated automaticaly, when you convert your normal (non-dynamic page) into a DYNAMIC page.

However! Because you surely will use the already prepared DATASET-connection generated automaticaly by wix, you will have the ability to open the dynamic page by a BUTTON-click (the button itself is also already generated automaticaly and is also connected by the same dynamic-dataset).

That means → clicking onto —> (in this example)

You are able to navigate to the corresponding DYNAMIC-PAGE!

But what you want is → a REDIRECTION to DYNAMIC-PAGE by a CLICK onto CONTAINER !

Here the code, which will do all the magic…

import wixLocation from 'wix-location';

$w.onReady(function () {   
    $w('#listRepeater').onItemReady(($item, itemData, index)=>{
        console.log("Item-Data: ", itemData); 
        console.log("Index: ", index);
        
        $item('#container1').onClick(()=>{console.log("clicked!");
            console.log(itemData["link-dynamicslides-title"]);
            wixLocation.to(`/dynamicPage/${itemData["link-dynamicslides-title"]}`);
        });
    });
});

All you will have to do is to replace your DATA-FIELD, which you already have shown in one of your uploaded pics. The importent-part is marked orange!

Oh, wait wait wait → But i said it is almost working!
Somthing still missing!
To get the complete solution you will have to take a look into the CONSOLE and investigate the RESULTS!

Good-luck and have fun!

EDIT: A screenshot of the related DATABASE…for better understandings!

[reymcfc]

@russian-dima Thanks man! I took a look at the console, and it says exactly like what your screenshot, but on the test site and the published site it still won’t direct me to the supposed page… am i missing something?

[CODE-NINJA]

@reymcfc
Like already mentioned! → YES, you are → But what is it? Tip: Url-Prefix!

[reymcfc]

@russian-dima Thanks a lot man it worked!! you’re the best

[CODE-NINJA]

@reymcfc No, problem! Do not forget to like it, if you really liked it

[josephchancewatkins]

@reymcfc I’d recommend you go inside your database and create a Column called “Website Links” and give it the type “URL”, then make a button on the repeater that when clicked has a hyperlink to that URL.
This will allow you to have a unique link for each repeater according to each Real Estate.

[josephchancewatkins]

@reymcfc I’d recommend you go inside your database and create a Column called “Website Links” and give it the type “URL”, then make a button on the repeater that when clicked has a hyperlink to that URL.
This will allow you to have a unique link for each repeater according to each Real Estate.

[josephchancewatkins]

@reymcfc The “Cluster” URL is automatically generated by Wix using Dynamic Pages. If you create a Button in the container and make the hyperlink to “Cluster Sidarjo”, then the repeater should automatically link to it without any coding.