top of page
Member Profile Pages
ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.
Create a login/sign-up for members (users) of your website, including a customisable members profile page to capture and display relevant member information. The same functionality can be used to set up member dashboards for additional member actions or transactions.
Create a new collection to store members information. In this example, a collection called 'Customers' is created with an 'emailAddress' field at minimum - but add whatever other fields you would like to collect from your members e.g. name, phone number, gender etc. Next, create a new page and add a 'Login/Sign-up' button and a 'My Profile' button. Decide whether these should be on the page header (displayed on all pages) or on the page body (only displayed on a specific page). Give each button an id: for this example, I have used 'btnLogin' and 'btnProfile'. Add an on click event listener to each button.
If you decided on putting the buttons on the page header, then the subsequent login/sign-up code should be placed in the 'Site' code section as depicted in the screenshot above. If your buttons are on the page body, then the subsequent login/sign-up code should be placed in the 'Page' code section instead.
The onReady function checks to see if a member (user) is already logged in when the page loads, and adjusts the button labels and functionality accordingly. The btnLogin_click function inserts new members into the Customers dataset and updates the button labels and functionality accordingly. It can also be used to insert additional default information about each member e.g. total spend, which would initially be set to zero (not shown in this example). If the member is already in your Customer collection, then only the buttons are updated. When a member is logged in, the btnProfile becomes enabled - allowing members to click on it to view their own private profile page which is created in the next step.
Next we add dynamic pages for members (i.e. called customers in this example) to view and update their profile. The profile page shows various member fields such as those in the example screenshot below. Each of these fields is linked to their corresponding value in the Customer Item dataset. We also need to add an 'Update Profile' button which takes members to a page where they can update their details.
Finally we set up the Update Profile page with input fields which populate the Customer Item dataset - remember to set this dataset to read and write access. Add a button to submit to changes, in this example: Update Profile. Set the button to 'Submit' and when successful, navigate back to the Profile page created earlier.
Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.
bottom of page