How to Make Custom Member Profiles

How to Make Custom Member Profiles in Wix with (almost) No Code

Creating custom member profiles in Wix with minimal coding involves using Wix's built-in tools and features like Wix Members, Wix Data, and Wix Code (Velo by Wix).

Here’s a step-by-step guide to achieve this:

Step 1: Set Up Wix Members Area

1. Add Members Area:

   • Go to the Wix Editor.

   • Click on the “Add” (+) button.

   • Select “Members” and then “Members Area”.

   • This will add default member pages like Sign Up, Log In, My Account, etc.

   • 
     

Step 2: Create a Custom Member Profile Page

1. Add a New Page:

   • Click on the “Menus & Pages” icon.

   • Add a new blank page. Name it something like “Member Profile”.

     
     

2. Design the Profile Page:

   • Customize this page with elements you want to show in the member profile (e.g., profile picture, bio, contact info).

   • Use Wix’s design tools to place text boxes, images, and other elements where you want them.

Step 3: Set Up a Database for Member Profiles

1. Add a Database Collection:

   • Go to the “Content Manager” (Database icon).

   • Click “Add Collection” and create a new collection (e.g., “MemberProfiles”).

   • Add fields relevant to the member profiles like Name, Email, Bio, Profile Picture URL, etc.

2. Connect the Database to Your Profile Page:

   • On your custom member profile page, add dataset elements.

   • Connect each element (text, image, etc.) to the relevant field in your “MemberProfiles” collection.

Step 4: Create a Form for Members to Update Their Profile

1. Add a Form:

   • Create a form on another page (or within the Members Area) for members to input or update their profile information.

   • Use input elements like text boxes, image upload buttons, etc.

2. Connect the Form to the Database:

   • Connect each input element in the form to the relevant field in the “MemberProfiles” database collection.

3. Set Permissions:

   • Go to the Content Manager.

   • Set the permissions for the “MemberProfiles” collection so only logged-in members can read and write their data.

Step 5: Use Velo (Wix Code) for Custom Logic

1. Add Custom Code for Profile Page:

   • Enable Velo by Wix in your site (Dev Mode).

   • Add custom code to display the logged-in user’s profile information on the profile page. Here’s a sample code snippet to get you started:

   ____________________________________________

import wixUsers from 'wix-users';

import wixData from 'wix-data';

$w.onReady(function () {

// Get the current user

let user = wixUsers.currentUser;

let userId = user.id;

// Query the database to get the user's profile data

wixData.query("MemberProfiles")

.eq("_id", userId)

.find()

.then((results) => {

if (results.items.length > 0) {

let userProfile = results.items[0];

// Populate the profile page with the user's data

$w('#profileName').text = userProfile.name;

$w('#profileEmail').text = userProfile.email;

$w('#profileBio').text = userProfile.bio;

$w('#profileImage').src = userProfile.profilePictureUrl;

}

})

.catch((err) => {

console.log("Error retrieving profile: ", err);

});

});

_______________________________________________-__________

Handle Form Submission:

• Add custom code to handle form submission and update the database with new profile information:

_______________________________________________________

$w.onReady(function () {

$w('#submitButton').onClick(() => {

let user = wixUsers.currentUser;

let userId = user.id;

let newProfileData = {

_id: userId,

name: $w('#nameInput').value,

email: $w('#emailInput').value,

bio: $w('#bioInput').value,

profilePictureUrl: $w('#profileImageUpload').value // assuming you have a file upload component

};

wixData.save("MemberProfiles", newProfileData)

.then(() => {

console.log("Profile updated successfully");

// Optionally, redirect to the profile page

wixLocation.to("/member-profile");

})

.catch((err) => {

console.log("Error updating profile: ", err);

});

});

});

Step 6: Test Your Setup

• Sign Up and Test: Sign up as a new member, fill out the profile form, and check if the data is displayed correctly on the custom member profile page.

• Debug: Use the browser console to debug any issues during testing.

Additional Tips

• Customize Permissions: Ensure only logged-in members can view and edit their profiles.

• Styling: Use Wix’s design tools to style your profile page to match your site’s aesthetic.

• Mobile Optimization: Ensure your profile page looks good on mobile devices.

Following these steps, you can create custom member profiles in Wix with minimal coding effort, leveraging the power of Wix’s built-in tools and Velo by Wix for added functionality.