Vorbly Code | WIX CODE CREATE MEMBERS-ONLY PAGES

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

1/5

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.

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

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP