Example Description
In this example, we created a custom members area that includes a login, profile, and account page. Site visitors can sign up/log in, see a list of class members and their profiles, and edit their own profiles.
How We Built It
Collection Data
We built a Class Members collection with the following fields:
Name: Class member’s name
Email: Class member’s email
Profile Picture: Class member’s profile picture
Subtitle: Class member’s profile description
Favorite Dish: Class member’s favorite dish
Page Elements
We added the following elements to our pages:
Home:
Custom navigation menu in the header: For page navigation and logging out
Button: For logging in, or signing up to the site
My Profile:
Image: For displaying a class member’s profile picture
Text elements: For displaying a class member’s profile detail fields and data
Button: Displays only if a class member is viewing their own profile page. When clicked, it navigates to that class member’s My Account page where they can edit their profile.
My Account:
Text elements: For displaying the current class member’s account details
2 Text inputs and 2 text boxes: For editing the current class member’s account details
Upload button: For adding a profile picture
2 buttons: For uploading an added profile picture, and submitting updated account information
Class Members:
Repeater: For displaying the class members. Each item contains 2 text elements that hold the class member’s name and subtitle, an image element for the class member’s profile picture, and a button for navigating to their profile page.
Site Code
Our site contains the following code:
masterPage.js:
Adds onClick() event listeners to the buttons in the custom navigation menu displayed on all pages. When a member clicks one of these buttons, they are directed to the corresponding page.
repeatFunctions.js:
A public file that contains 2 functions we call frequently throughout our site pages. These functions check if the current member is logged in, and get the current member’s ID.
Home page:
Checks if the site visitor is logged in. If they are, the custom navigation menu is displayed. If not, the site visitor is prompted to log in with a login button.
When the site visitor clicks on the login button, it brings them to a login/ signup modal. If the site visitor isn’t already a member of the site, they need to sign up before logging in.
When the site visitor is logged in, we run a Wix-data query to see if the current member’s profile information is in our data collection. If not, a new item is added to the data collection for the current member’s ID with default profile information.
Class Members page:
Sets the repeater data for the Class Members collection, displaying a list of all class members with their name, profile picture, subtitle, and a button that links to the specific member’s profile page using their ID.
My Account page:
Gets the current member’s data from the Class Members collection and sets it as placeholder values in the input fields.
Adds an event listener to the upload button and the selected file to upload.
Adds an onClick() event listener to the submit button. When a member clicks the submit button, the Class Members collection is updated using the page’s input values. The member is then directed to their profile page to see their recent account changes.
My Profile page:
When the page is loaded, it uses wixLocation.query to get the member ID found in the current page’s URL, and uses that to identify the class member’s profile page.
The code retrieves the class member’s data from the Class Members collection and uses it to populate the page.
If the class member’s ID is the same as the current member’s ID, the member is viewing their own profile page. In this case, a button appears allowing them to edit their profile. When a member clicks the button, they are directed to their account page to edit their profile information.
Related Examples
Did this help?
|
Thanks for your feedback!

Add to Cart Gallery
Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements
Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements
Hide and show elements in response to user interactions

BEGGINER