Custom Members Area

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.