Hi everyone, I’ve got a repeater which display Course Modules overview elements coming from a collection called “Modules” via a dynamic dataset. Each element of this repeater displays an image, a title, a description and a button wich connects to a dynamic page with the detailed Course Module choosen. Here’s what it looks like;
What I would like to do is intercepting the event of clicking on the button of each item and check in another collection (called “ModulesSelectionnes” in the code below) if the current user is allowed or not to access to the dynamic page destination. If yes, this page will be opened, if not, another page will be opened aksing the user to pay to access it.
I have then triggered the button click (that seems to overpass the dataset connection for this button) and placed this code :
import wixUsers from 'wix-users';
import wixData from 'wix-data';
export function button1_click(event) {
let currentItem = $w('#dynamicDataset').getCurrentItem();
console.log(currentItem);
let userId = wixUsers.currentUser.id;
wixData.query("ModulesSelectionnes")
.eq("title", userId)
.find()
.then( (results) => {
if(results.items.length > 0) {
let i = 0;
do {
let idModule = results.items[i].idModule;
if(idModule === currentItem.title) {
//display the authorized page
}
i = i + 1;
} while (i <= results.items.length);
//not found in the results so display the payment page
} else {
//no result from the query so display the payment page
}
This code works but the problem I have is that button1, as I triggered the click seems not connected to the dynamic dataset anymore and has the same id on every item of the repeater. So if I click on the button of the first Item or on the button of the third item I get exactly the same results and the same data from $w('#dynamicDataset').getCurrentItem() :
(Same data sent to the console log while having clicked on the 3 different buttons) :
Is someone able to help me ? Maybe I’m not using the right method ?
Thanks.
1 Like
When you use a repeater you can not just use the same code as on your normal page.
You can read about using code for repeaters here.
https://www.wix.com/corvid/reference/$w.Repeater.html
You can see this example here that will help you understand the difference between global actions (outside the repeater) and inline actions (inside the repeater).
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-input-repeaters
Plus, if you use the search function in this forum, you can find many previous posts on how to link a repeater button to a dynamic page.
I think you only missed the association with the compiler, if I understood correctly.
$ item
export function button1_click(event, $item) {
let currentItem = $item('#dynamicDataset').getCurrentItem();
console.log(currentItem);
let userId = wixUsers.currentUser.id;
Thanks AV promotional, this is exactly what I needed ! it works perfectly. I will then post the final code but before I still have one question cause I have a problem to get the value I’m looking for …
Now that the association with the compiler $item is done, I can get the right item data by clicking the button of this item in the repeater. So I get the id (called “title” in the collection but when I try to get the dynamic page destination which is stored in the field called “link-modules-title” in the collection, I get an undefined error in the code… Is this because of the “-” separator in the name ? Do you know how to bypass ?
Thanks.
@rod_didier
Indeed, there is no way to approach it that way.
Try
$currentItem.[“link-modules-title”]
If that doesn’t work, you can simply add an on.Click function
Then build the address alone
for example
// $item(“#container”).onClick((event) => {
wixLocation.to(“/modules/” +$currentItem.title);
// });
@av-promotional
Yes I thought about the option to build the link location manually but i hoped there could be another way …
Unfortunatly, the syntax $currentItem.[“link-modules-title”] is not working…
So I did it like you said:
export function button1_click(event, $item) {
//Add your code for this event here
let $currentItem = $item('#dynamicDataset').getCurrentItem();
let $currentItemId = $currentItem.title;
let $destination = "/modules/"+$currentItemId;
console.log($destination);
wixLocation.to($destination);
}
Unfortunatly my title can contains blank caracters and specific caracters such as “é” or “'” … so the wixLocation is not able to interpret it correctly.
For exemple the console log gives the right result which is “/modules/Module 1: Concepts de base de l’escalade” but the wixlocation.to interprets brings to “https://xxxxxxxx.wixsite.com/website/modules/Module”
When it was stored in the link-modules-title field of the collection, the value was /modules/Module-1%3A-Concepts-de-base-de-l’escalade
So there is a difference between title and link-module-title that was automatically created by wix …
Do you have an idea or recommendation on how to handle this in an “easy” way ?
Ok just using the replace() function works properly.
So finaly, here is the full code to do what I wanted:
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
//TODO: write your page related code here...
});
export function button1_click(event, $item) {
//Add your code for this event here
let $currentItem = $item('#dynamicDataset').getCurrentItem();
let $currentItemId = $currentItem.title;
let $destination = "/modules/"+$currentItemId;
$destination = $destination.replace(/\s/g, '-')
let $user = wixUsers.currentUser;
let $userId = $user.id;
let $isLoggedIn = $user.loggedIn;
if ($isLoggedIn === true) {
wixData.query("ModulesSelectionnes")
.eq("title", $userId)
.find()
.then( (results) => {
if(results.items.length > 0) {
let $i = 0;
do {
let $idModule = results.items[$i].idModule;
if($idModule === $currentItemId) {
wixLocation.to($destination); //display the authorized dynamic page
}
$i = $i + 1;
} while ($i <= results.items.length);
wixLocation.to("/plans-pricing"); //not found in the results so display the payment page
} else {
wixLocation.to("/plans-pricing"); // handle case where no matching items found
}
} )
.catch( (err) => {
let errorMsg = err;
} );
} else {
wixWindow.openLightbox("Inscription")
.then( (data) => {
let $receivedData = data;
} );
}
}
Many many thanks to @AV promotional for your help !
@rod_didier
If I understand your intent, the string needs to be changed to URL
For that there is the function
encodeURI ()
let url = encodeURI($currentItem.title)
let $destination = "/modules/" + url;
@av-promotional ok, my method with replace() seems to work for the moment but maybe in the future I will face some issues with it, so I will try your method encodeURI() which seems more conveniant.
Again a big thanks to you.