Member profiles with custom fields

Ask the community
, ,
1

Hello,
I wonder if someone could guide me how to achieve this. I would like to add some custom fields to member profiles and those need to be selected from inputs such as checkboxes, radio buttons and drop-downs.

If I am not wrong, we can’t add all those to default Wix member profiles (please explain if there’s a way to do it) so I looked into other avenues and spent some time building a secondary profile section using the instructions given in here:
https://support.wix.com/en/article/wix-code-tutorial-creating-custom-member-profile-pages

Using those instructions I built one area for information display and an update profile information section using a form. The main issue I am facing is that I can’t set the profile information update form to read and write mode so every time someone wants to update their profile information, they start with a blank form. As they start with a blank form, unless I force them to fill all fields on the form, the profile information display section only shows the last submitted information.

Could someone guide me how to set the input/update form in read and write mode?

Many thanks in advance.

2

https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

https://support.wix.com/en/article/adding-custom-fields-to-contacts

3

Hello @givemeawhisky ,

Many thanks for the response. I tried to follow these instructions given in the first article and everything works except a couple.

  1. Do we link anything to Login (loginButton) on the login page? I have a custom login form on a lightbox and if I link to that button, it logs me in, but I can’t logout as clicking on that button brings that lightbox. If I don’t link anything to it, nothing happens.

  2. Do we need to connect this ‘Members’ collection to our login and sign up forms?

  3. Do these members ‘sync’ with everything so they can seamlessly access Forum, Blog areas using the same access?

Many thanks in advance,

4

The login button on the page is not connected to anything through your Wix Editor, it is all done through the Wix Code itself here.

// prompt the user to log in
wixUsers.promptLogin( {"mode": "login"} )

When the user clicks on the login button, it will prompt login which means your login lightbox should appear, if you have set your member signup settings to show your own lightboxes instead of Wix own windows.
Velo: Enabling Custom Site Registration | Help Center | Wix.com

When the login page loads, we want to set up our buttons.

  • If the user is logged in, we want the login button’s label to be Logout and we want to show the My Profile button.

  • If the user is not logged in, we want the login button’s label to be Login and we want to hide the My Profile button.

Then when the user is logged in the vale of the button should be changed from Login to Logout, so the user simply clicks that button again to log themselves out later on.

Using your own custom lightboxes for login and signup means that you can’t have the Join our Community checkbox on your lightboxes, as well as the Social Logins too, so unless you keep the default settings for it to be automatically ticked by default, then any user who signs up will have to manually join the community on their own My Account Page.
Wix Forum: Becoming a Forum Member and Joining the Community | Help Center | Wix.com
Wix Blog: Becoming a New Blog Member and Joining the Blog Community | Help Center | Wix.com

5

I’ve used the same tutorial as a starting point for my own members page and this is my code.

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`); 
}
6

My code for custom signup lightbox.

This works perfectly and closes after registering details before moving user onto my sign-up 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.

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.
      } );     
    } );
    
});
7

My code for my custom login lightbox.

This is setup to reload the same page after the login lightbox is closed as I am keeping the user on the same page, so the existing page needs to be refreshed so that the code on the page will run and the button will change from login to logout and the members hidden elements get shown etc.

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);
     //Reloads the same page, 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.
   } ); 
}
8

If you are moving the user onto another page after they have logged in, like to the Members own Profile page as shown in the tutorial, then you simply need to change the URL in the wixLocation.to as shown below.

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_click(event) {

 let email = $w("#email").value;
 let password = $w("#password").value;

 wixUsers.login(email, password)
   .then( () => {
     console.log("User is logged in");
     wixLocation.to("/Members/${wixUsers.currentUser.id}");
     //Change the URL ending to whatever page you want to send the user to after they log in.
   } )
    .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.
   } ); 
}
9

Hello @givemeawhisky ,

I cannot thank you enough for the wealth of information you’ve provided. I have a couple more questions and sorry if they doesn’t make any sense.

a) Would these still work if we don’t use custom sign up and login lightboxes? I am trying to prevent the need for members to manually join the forum and blog areas.

b) If we enable the built-in members section after we add these function, would we be able to utilise some of its functions too, such as adding the members side menu etc?

c) Have you ever tried adding these button to header/navigation instead of keeping them on a separate page? If we are reloading the page after every sign in, it should work I guess?

Many thanks and regards,

10

If you don’t use the custom login lightboxes then you can either use the default Wix signup form or the custom signup form through Wix Forms.
https://support.wix.com/en/article/about-login-signup-and-password-windows
https://support.wix.com/en/article/about-the-member-signup-form

If you use the default Wix signup or the custom signup through Wix Forms one, then you can simply have the default option in the settings to have the ‘Join the Community’ checkbox pre-ticked, so that new users who signup will automatically be members of the Wix Blog and Wix Forum.
https://support.wix.com/en/article/editing-your-member-signup-settings-for-the-default-form
Join the community is checked by default: Click the toggle to check or uncheck the “Join the community” checkbox by default.
Note: This option is only relevant if you have a social app such as the Wix Blog or Wix Forum on your site. When the toggle is on, members are added to the community by default.
Learn more about Wix Blog and Wix Forum communities.

I myself use both my custom login and signup lightboxes along with the Wix Members app itself.

The only difference being that my Member Profile pages are not included in the Wix Members app pages in the site structure, they must be setup as their own separate dynamic pages.

The rest of the Wix Members app pages that I use are the My Account page, profile page, all the blog and forum pages, notifications, settings etc. If you use Wix Stores too, then you have extra pages like Addresses and Cards in that Members app menu too.
https://support.wix.com/en/site-members/setting-up-a-members-area

With the pages that are shown in the Wix Members app menu, these can be shown or not shown in the menu for the app.
https://support.wix.com/en/article/hiding-a-page-from-the-member-menu

As for the Login Bar that comes as an additional feature of the Wix Members app, I do not use this at all.

You can still use it yourself and edit it to suit yourself and your website.
https://support.wix.com/en/article/hiding-a-page-in-the-member-login-menu
https://support.wix.com/en/article/hiding-a-page-in-the-member-login-menu

However, as it is a part of the Wix Members app, you can’t get to edit it at all through any use of code, hence why I do not use it on my website at all.

As for the Login Button, I only have it shown on my Members page which changes to logout after members have logged in, this is the only place that members can login and logout of my site, kept it simple and all in one place.

It should work perfectly fine if you place a Login button in your header, the only difference being is that your button will now be working site wide and so your code for the Login will have to be in the site code tab as it will need to apply to your whole site, instead of just being on the one page like I currently have it as it only applies to that one page.

Finally, you only need to refresh the page that is shown underneath the lightbox if you are wanting to stay on that same page.

If you are moving the user to another page, then you simply replace the refresh page url with the url of the page that you want users to be moved too.

11

Hello @givemeawhisky ,

Once again many thanks for all the invaluable info. I managed to get most of the things but for some reason this is not working for me:

 export function profileButton_click(event) {
  wixLocation.to('/members/${wixUsers.currentUser.id}'); 
}

For some reason this gives its literal value instead of converting it to a URL with the user ID value. I added a button to test the user ID and it its label shows the user ID without and issues and when I copy and paste the user ID to URL, it takes me to the profile page and I can access the profile update page using the same way.

Any suggestions?

Thanks and regards,

12

You must be checking it is working on a fully published site when you are using Wix User.

As stated in the ‘build your own members profile’ tutorial…

In this article we demonstrate how to create a member profile page for each of the registered users of your site. The data for the dynamic profile page is created when a user first logs in to your site. Users can view and update their personal profiles at any time.

Note:
The functionality for logging users in and out of your site only works fully when viewing your published site. You will not be able to fully test your member profile pages in preview mode.

Also, with regards to the placing the code in the site code tab if placing in header for example, well again that is also mentioned in that same tutorial too…

Note:
Because we have a dedicated login page, we’ll be adding the code below to the Page tab of the code panel. But if you’re showing the elements on all pages, you need to add the code below to the Site tab of the code panel.

13

Thanks again. I tried it logging in as user but no luck. It’s in here if you have any time or inclination to test it: https://bit.ly/2MivdhM