Help with members area & profile

I built Members Area in the past with no problem, but recently I can not make it work anymore.
I restarted a new site & attempted to build members area following step-by-step instructions.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
By I could not even make “My Profile” button open. Could someone help please?
https://drtinaxu.wixsite.com/mysite-2/members-area

Have you added the onClick event handler function to the button through the properties panel?

A profile button onClick event handler for navigating members to their profile pages

Yes I did, same as Login button which works fine.

Okay, had to ask first as many people have simply forgotten to add it, it is easily done :wink:

So next question…

Have you added the code to the export function for the Profile button as stated in the tutorial?

When the profile button is clicked, we use an event handler to send members to their personal profile page.

We add an event handler by selecting the profile button and we use the Properties panel to add a handler for the onClick event.

Then we add the event handler code, which looks like this:

export function profileButton_click(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
$w.onReady( () => {
if (wixUsers.currentUser.loggedIn) {
$w(“#loginButton”).label = “Logout”;
$w(“#profileButton”).show();
}
else {
$w(“#loginButton”).label = “Login”;
$w(“#profileButton”).hide();
}
} );
export function loginButton_click(event) {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w(“#loginButton”).label = “Login”;
$w(“#profileButton”).hide();
} );
}
// user is logged out
else {
let userId;
let userEmail;

// prompt the user to log in
wixUsers.promptLogin( {“mode”: “login”} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query(“Members”)
.eq(“_id”, userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
“_id”: userId,
“email”: userEmail
};
// add the item to the collection
wixData.insert(“Members”, toInsert)
. catch ( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w(“#loginButton”).label = “Logout”;
$w(“#profileButton”).show();
} )
. catch ( (err) => {
console.log(err);
} );
}
}
export function profileButton_click(event) {
wixLocation.to(/Members/${wixUsers.currentUser.id});
}

Please put your code in a code block when you paste up code as it makes it so much easier to read.

A quick scan through your code and it looks okay as it seems that you have simply copied over the tutorial and used the same dataset name and elements name etc.

So therefore make sure that your dataset name and elements names are the same on your actual page and that they match what is in the code.

Also, make sure that the profile page is using the ID field as you have used that in your profile button link, if you have used another field then you will need to match the field in your button link.

Otherwise, I would go back through the tutorial itself and double check that you have done everything that is stated in the tutorial as you might have simply missed something out which is making the button not work.

I have used the tutorial myself for a base starting point for a members only page, so I know that the code itself works fine.

My code used:

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();

}
else {
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter").show();

}
} );

export function loginbutton_onclick(event) {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter").show();

} );
}
// user is logged out
else{
let userId;
let userEmail;

// prompt the user to log in
wixUsers.promptLogin( {"mode": "signup"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();

} )
.catch( (err) => {
console.log(err);
} );
}
}

export function profilebutton_onclick(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}

export function entermembersbutton_onclick(event) {
wixLocation.to(`/members-area`);
}

export function myaccountbutton_onclick(event) {
wixLocation.to(`/account/my-account`);
}

export function websiteupdatebutton_onclick(event) {
wixLocation.to(`/website-update`);
}