Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE CREATE MEMBERS-ONLY PAGES
Starting a membership website? Or subscription business? This tutorial will show you how to create members-only pages using databases and Wix Code. Create member login, profile pages and allow members to update their profiles. Your members will be able to access pages not visible to the public (e.g. subscription content). We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Create a members login page with two buttons, "Login" button and "My Profile" button. Then add Wix Code to the login page.
When members click the "Login" button, they will be directed to sign in or create a new account. Wix allows users to sign up using their email address, Facebook or Google+ accounts.
Profile page with updated member information.
Create a members login page with two buttons, "Login" button and "My Profile" button. Then add Wix Code to the login page.
THE ELEMENTS
The Login Page
Button Elements:
-
Login Button: #loginButton
-
My Profile Button: #profileButton
Members Profile Update Page
User Inputs:
-
Job Title Field ID: #role
-
Email Field ID: #email
-
Phone Field ID: #phone
-
Experience Field ID: #experience
-
Skills Field ID: #skill
-
Profile Description Field ID: #description
Image Element: #image
Button Element:
Save Profile Button: #save
Image Upload Button: #uploadButton
Additional Notes:
-
Set dynamic page URL to https://www.../ Members/Update/{ID}
-
Set dynamic page permissions to Members Only
-
Connect your user input elements and save button to your Members dataset
The Database
Create a database Members.
Recommended fields:
-
Name: name
-
Phone Number: phone
-
Email: email
-
Job Title: role
-
Job Experience: experience
-
Skill Sets: skills
-
Profile description: description
-
Profile Picture: image
Membership Permissions > Select Custom Use
-
Who can read content from this collection? - Site member author
-
Who can create content for this collection? - Site member
-
Who can update content from this collection? - Site member author
-
Who can delete content from this collection? - Admin
Members Profile Page
Text Elements:
-
Name Field ID: #name
-
Job Title Field ID: #role
-
Email Field ID: #email
-
Phone Field ID: #phone
-
Experience Field ID: #experience
-
Skills Field ID: #skill
-
Profile Description Field ID: #description
Image Element: #image
Button Element: #Update
Additional Notes:
-
Set dynamic page URL to https://www.../ Members/{ID}
-
Set dynamic page permissions to Members Only
-
Connect your text elements and update button to your Members dataset
THE CODE
Page Code
// Import Wix APIs //
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
// When page loads - check if user is logged in //
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginButton").label = "Logout";
$w("#profileButton").show();
}
else {
$w("#loginButton").label = "Login";
$w("#profileButton").hide();
}
});
// Login Button - Sign in, create new user or log out //
export function loginButton_click(event) {
if(wixUsers.currentUser.loggedIn) {
wixUsers.logout()
.then( () => {
$w("#loginButton").label = "Login";
$w("#profileButton").hide();
});
}
else {
let userId;
let userEmail;
wixUsers.promptLogin( {"mode": "login"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
})
.then( (email) => {
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
})
.then( (results) => {
if (results.items.length === 0) {
const toInsert = {
"_id": userId,
"email": userEmail
};
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
});
}
$w("#loginButton").label = "Logout";
$w("#profileButton").show();
})
.catch( (err) => {
console.log(err);
} );
}
}
// Profile Button - View user profile //
export function profileButton_click(event) {
wixLocation.to(`/Members/${wixUsers.currentUser.id}`);
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Please complete all required fields.
No comments. Be the first to leave a comment.
What about code for login page requiring an email, password and a login button?
Niall Magner
Nov 20, 2019
3
