Pretty much the question says it all.
Well…
It would help if you provided a bit more information about what exactly you wish to implement
do you mean a user’s profile? like a personal home page? what would you like to have as content there?
I mean member’s profile that can store progress of the specific user.
Hi,
you can certainly create a members page.
You will need to add Member Login App to your page (you can find it in App Market). Add a login link to any of your pages. Here you can find a more detailed article that explains member login:
https://support.wix.com/en/article/adding-a-member-login-button-4628013
Create a profile page that is accessible to site members only. Here you can find an article that explains how to do it step by step:
Now we need a collection that will hold the profile information for each user. Feel free to create any fields you may need for the profile.
Our next steps are:
- to make sure that user has a record in a collection
- to be able to edit that record
To address #1, we can create a record for the user when he first enters the profile page:
import wixUsers from 'wix-users'
import wixData from 'wix-data'
$w.onReady(function () {
// We get a current user, we assume he is logged in
// as the profile page is protected
const currentUser = wixUsers.currentUser
// We query for the record in 'members' collection owned by
// the current user
wixData.query('members')
.eq('_owner', currentUser.id)
.find()
.then(createIfNoUserExists)
});
function createIfNoUserExists(result) {
// We handle the result here,
// if there is no record for the user
if (result.items.length === 0) {
// We create that record,
// note that the _owner field in the record
// will be automatically set by Wix code
wixData.insert('members', {})
} // otherwise you have a user record and may choose to use it
}
Now that we have a record, you can use it to add / modify user profile.
You can also add a dataset to the page and bind any components in the page to the dataset. To set the dataset filter to use the current user item you can add the following code to the onReady handler:
$w('#memberDataset').setFilter(wixData.filter().eq('_owner', currentUser.id))
And you may want to modify the initial insertion a little to also reload the dataset once the record is created:
wixData.insert('members', {})
.then(result => $w('#memberDataset').refresh())
Now you can use the dataset to bind user profile information to the page.
Let me know if you need any more details. And have fun Wix Coding.
Can’t we re-use the member profiles you have for Wix blog and Wix forum?
Currently, there is no way to access Blog and Forum profiles from Wix Code.
Since I’m kind of new to Wix Code, how exactly would I implement this code. Should I make a .js file in the Backend or Public system and add the code. And should they be two separate files?
All this code should go to the page code. You can access the page code for any page by clicking a panel bellow the page (it has the title “ Page Code”). It will open an IDE that lets you write code for that page. You can call Wix Code APIs and interact with page elements there.
What is the memberDataset and is this collection?
So, the collection you want for your members profile is for you to decide. It should include the information you want to store for each user. (Note, that the _owner field I am using is automatically added to every collection, so you don’t need to add it yourself).
Member dataset, that I am referring is a Dataset connected to that “members” collection with Read & Write permissions.
There are some articles on Wix Code page, that guide you through the process of creating a collection and connecting it to dataset:
I did some modifications to the code and got this:
import wixUsers from 'wix-users'
import wixData from 'wix-data'
$w.onReady(function () {
// We get a current user, we assume he is logged in
// as the profile page is protected
const currentUser = wixUsers.currentUser;
// We query for the record in 'users' collection owned by
// the current user
if (currentUser.role !== "Visitor") {
wixData.query('users')
.eq('_owner', currentUser.id)
.find()
.then(createIfNoUserExists);
}
});
function createIfNoUserExists(result) {
// We handle the result here,
// if there is no record for the user
if (result.items.length === 0) {
// We create that record,
// note that the _owner field in the record
// will be automatically set by Wix code
wixData.insert('users', {}).then(result => $w('#dataset7').refresh());
setUserFields(wixUsers.currentUser);
} // otherwise you have a user record and may choose to use it
}
function setUserFields(user) {
let userId = user.id, userEmail;
user.getEmail()
.then( (email) => {
userEmail = email;
});
let values = {
"_owner": userId,
"username": userEmail,
"name": userEmail,
"email": userEmail,
"reports": 0
};
console.log(values);
$w('#dataset7').setFieldValues(values);
}
However, there are some problems with this.
- It makes multiple items for one person
- It doesn’t set any field values
I’m not sure why these problems are happening. Anything helps!
Ok I fixed the previous problems; however, now setProfileButton() doesn’t set the button’s label.
Site Code:
import wixUsers from 'wix-users'
import wixData from 'wix-data'
import wixWindow from 'wix-window'
$w.onReady(() => {
let user = wixUsers.currentUser;
setLoginSignUpButton( wixUsers.currentUser);
});
function setLoginSignUpButton(user) {
let loggedIn = user.loggedIn;
let button = $w('#button2');
if (loggedIn) {
button.label = 'Logout';
createNewUserIfNoneExists(user);
}
let options = {
'mode': 'login',
'lang': 'en'
};
button.onClick(() => {
if (loggedIn) {
wixUsers.logout();
button.label = 'Login or Sign Up';
setProfileButton(user);
} else {
wixUsers.promptLogin();
button.label = 'Logout';
createNewUserIfNoneExists(user);
setProfileButton(user);
}
});
}
function createNewUserIfNoneExists(user) {
let userId = user.id,
userRole = user.role;
if (userRole !== 'Visitor') {
wixData.query('users')
.eq('_owner', userId)
.find()
.then((result) => {
if (result.items.length === 0) {
let insert = {
'reports': 0
};
wixData.insert('users', insert)
.then((results) => {
console.log(results);
console.log('New user added');
wixWindow.openLightbox('Set Profile');
});
}
});
console.log('Hi user!');
} else {
console.log('Hi visitor!');
}
}
function setProfileButton(userId) {
wixData.query('users')
.eq('_owner', userId)
.find()
.then((result) => {
let button = $w('#button3');
if (result.items.length === 0) {
button.label = 'Visitor';
} else {
console.log('Profile button' + result.items[0].username);
button.label = result.items[0].username;
}
});
}