Hello community, I have been trying for days to create a members area. Creating the members area is of course not a problem, but members should fill out their own profile, according to my specifications, and this should be accessible to everyone (i.e. public). In short: Is it possible to create a member area where you can click on a profile and show personal information? Because when i click on a Profile after i create a Member area, it doesnt happend anything
I am grateful for any help!
That is because when you create a members area, it is only for members to use. Therefore only the individual member can see their own profile and be able to update it as they wish too.
If you add Wix Members Area to your website, then you will get a page in that area that shows all existing members and every member can click on other members profiles to view.
https://support.wix.com/en/site-members/setting-up-a-members-area
If you add your own members area and profile through the code tutorial link below, then these member profiles are only available to be accessed by the member themselves.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
If you are wanting public users to have access to member profiles, then it is best that you create some sort of page where all your members can enter in the info that they want to be made public which is then saved into a ‘public’ dataset where everybody can view info from that collection on another page which is open to everybody.
Thank you very much for your answer!
the last paragraph is what i need i think. if i understand it right , it means that users create a profile and each visitor can look at it. do you have an idea where i can find a tutorial? i think the first link only describes how i create a members page that is private, isn’t it?
Just have a page, similar design to profile page, where each member can access it themselves and fill out a user input form with all the info etc that they wish to show on their public profile and be able to edit it if and when needed.
So, basically the same format as the profile page in the code tutorial, however replace member own profile with their public profile and their update public profile page.
This form data can then be saved to a new database, say call it ‘publicprofile’ which can then be added to a new public page which shows all the public profiles in repeaters so that you don’t have to fill out each seperate profile yourself.
On this public profile page simply add a repeater of your choice/design and fill it with all the fields from your ‘publicprofile’ dataset.
you help me a lot! i understand now how to link a page together . But do I have to create a member page first? (that’s what i did)… but how does it work, that a profile is created automatically after registration of a member where you can click on it? (I need pretty much the same thing as “Wix Blog”. Only that I don’t want the “Blog format”. I’m sorry for all the questions but I’m getting desperate…
Thx
For the Wix Blog, you will need to use the Wix Blog unless you want to try and do it all yourself through the use of code, which will be a complex job for yourself or even if you hired somebody from the Wix Arena to do it for you.
I have a similar setup to yourself where I used the Wix Members Area code tutorial as a basis for my Members only page, which is where my login button is, note that this is the only place that my members can log themselves in and out.
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area
On my Members only page, I also have buttons connecting to the profile page (from the tutorial page), My Account page from Wix Members and two additional buttons as well.
So, you can have the tutorial as it is and setup to go straight to their Profile page, however you can always change the location that you are wanting them to go to first.
For Members, I use a combination of Wix’s own Member Area which I use the My Account page and other pages from it like the Forum, Blog, Members, Profile pages etc( Note that this Profile page is only shown to other members).
https://support.wix.com/en/site-members/setting-up-a-members-area
I just don’t have the Wix Member Login Bar showing so they can’t login or logout anywhere apart from my Members page. (All these Wix Member pages will be listed under Member Pages in your Site Structure.)
With also adding in more Member pages as with the two dynamic pages for the Profile and Update Profile pages (these will be listed under Member Pages (Dynamic) in your Site Structure).
I then have finally a bunch of other regular pages that are setup with the permission of Members only and these are only accessed from my Members only page or further into the Members only area.
Public Profile Pages
For your own Public Profile and Update Public Profile pages, simply copy the same tutorial as for the original profile pages and instead of creating a Members dataset, simply call it something like PublicProfile and then carry on with the tutorial using your PublicProfile dataset instead.
Obviously, you will need to have a Public Profile button from your Members page so that they can be directed it to/ However, like the Profile page, as they are already logged in, then it should go straight to their own Public Profile page.
This will mean that they will have to potentially input data twice if you collect the same info on their own Profile page as well as on the Public Profile pages.
However, I would for security reasons, always give the user the choice of what they want to be made public or not and not just assume that they will want something made public.
As for example, they might put their own contact email and telephone number on their own Profile, however on their Public Profile they might put a general company email and telephone number.
If you have stuck with PublicProfile name, then this will be listed as PublicProfile Pages (Dynamic) in your Site Structure.
Then simply setup another page which is setup for Everybody to view and on this page show a Repeater which displays all the Public info from your PublicProfile dataset.
Obviously you will have to decide what is on your public profile repeaters and that will all depend on whatever you are wanting to show to everybody, like company name, address, phone number, email, website etc.
As for the repeaters on the page, this is easily done, you can simply add a repeater from the Wix Editor menu list and delete everything inside it and add whatever you want to have in it - you don’t have to just use what they have already got setup in it.
https://support.wix.com/en/article/repeater-item
https://support.wix.com/en/article/adding-and-setting-up-repeaters-lists-grids
https://support.wix.com/en/article/editing-a-repeater-item
https://support.wix.com/en/article/deleting-a-repeater-item
https://support.wix.com/en/article/saving-and-publishing-repeaters
Then for connecting repeaters to datasets.
https://support.wix.com/en/article/about-displaying-database-content-in-a-repeater
https://support.wix.com/en/article/about-your-database-collection-fields
Videos about using repeaters:
https://www.youtube.com/watch?v=uiftGNZsLXA
https://www.youtube.com/watch?v=LSRolsCJQuI
This is the code for my Members only page, which is based on the members area/profile page code tutorial.
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`);
}
This is the code for my Login lightbox which only pops up when the user clicks on the Login button on my Members only page.
The user gets to log themselves in and the lightbox will automatically close and refresh my Members only page.
This refresh is needed for myself so that my Members only code, as shown above, is kicked into gear and the Login button changes to Logout and my Member only elements are shown too.
You shouldn’t need this if you migrate to another page after a user logs themselves in, so simply change the wixLocation.to url address to something else.
However, if you also need the page refreshed as you are staying on the same page, then simply keep the wixLocation.url.
import wixUsers from 'wix-users';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#forgotPassword").onClick( (event) => {
//wixWindow.lightbox.close()
wixUsers.promptForgotPassword()
.then( ( ) => {
//
} )
.catch( (err) => {
let errorMsg = err; //"The user closed the forgot password dialog"
});
});
});
export function loginButton_onclick(event) {
let email = $w("#email").value;
let password = $w("#password").value;
wixUsers.login(email, password)
.then( () => {
console.log("User is logged in");
wixWindow.lightbox.close();
wixLocation.to(wixLocation.url); //This reloads the same page and allows code to show hidden member parts.
} )
.catch( (err) => {
console.log(err);
$w("#errorMessage").expand(); // You can delete this line if you are not going to add an error message. Use a regular text element set to 'collapse on load' from the Properties Panel.
} );
}
Finally, to help you out a bit more, here is the code for my custom signup/register lightbox too.
This works perfectly and closes after registering details before moving the user onto my signup status page, then both names will be saved in contacts and once site member is manually approved the member details will be added to ‘members’ database.
if you are approving your new members immediately, then you can edit this code to have the signup/register lightbox close and the login lightbox open automatically too by adding this line after wixWindow.lightbox.close() and remove the wixLocation.to line and wixLocation import at top of code too.
wixWindow.openLightbox(“Login”);
import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#registerButton").onClick( (event) => {
let email = $w("#email").value;
let password = $w("#password").value;
let first = $w("#firstName").value;
let last = $w("#lastName").value;
wixUsers.register(email, password, {
contactInfo: {
"firstName": $w('#firstName').value,
"lastName": $w('#lastName').value,
}
} )
.then( (result) => {
let resultStatus = result.status;
wixWindow.lightbox.close();
wixLocation.to("/sign-in-status"); //Change the URL ending to whatever page you want to send the user to after they log in.
} );
} );
});
Not forgetting that if you do custom lightboxes to login or signup/register, then you will need to change your Wix Member Signup settings:
https://support.wix.com/en/article/corvid-enabling-custom-site-registration