Display Member Login Lightbox only when user not logged in / accessing member only pages

I’m trying to build out a members only set of pages in my wix site and wanted to user a custom lightbox login page since the existing wix one is not customizable (beyond colors and fonts).

I want the lightbox to be served on page load for pages that are members only and only if the user is logged out. If the user closes the lightbox and doesn’t login, ideally I want them redirected to the last page they accessed. And should they try to access the member’s only page again, I want the lightbox served again.

I implemented the following for page code to serve the lightbox if the user accesses a members only page.

import wixUsers from ‘wix-users’;
import wixWindow from ‘wix-window’;

$w.onReady( function () {

let user = wixUsers.currentUser;

if (wixUsers.currentUser.loggedIn) {

wixWindow.openLightbox(‘MemberLoginLightbox’);

} else {

wixWindow.openLightbox(‘MemberLoginLightbox’);
}
});

The above code is not serving the lightbox at all unfortunately.

Once the lightbox is active, I have the following code inserted in it:

import wixUsers from ‘wix-users’;
import wixWindow from ‘wix-window’;

$w.onReady( function () {

let user = wixUsers.currentUser;

if (wixUsers.currentUser.loggedIn) {
wixWindow.lightbox.close();
} else {
wixWindow.openLightbox(‘MemberLoginLightbox’);
}
});
$w(‘#MemberLoginSubmit’).onClick ( function () {
let email = $w(‘#MemberLoginEmail’).value;
let password = $w(‘#MemberLoginPwd’).value;
wixUsers.login (email, password)
.then ( ()=>{
wixWindow.lightbox.close();
})
});

This appears to function properly but I would ideally have the page redirect to the page the user was at last if they close the page with the X, but not sure what the code would be to do this.

Thanks in advance for any input you have.

If you have setup your pages to be member only through the Wix Editor page settings itself, then it should automatically come up with the signup or login option.
https://support.wix.com/en/article/creating-members-only-pages-596999

Have you seen this Wix tutorial about creating your own member profile pages?
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

You can do what I did and use the tutorial as a basis for a members only page which contains the login button, which when clicked on will open up your login or signup lightbox.

You can also find on that page the way to link to the members own unique pages too by using the link to the profile page at the end of the tutorial.

However, please note that this tutorial can be altered to whatever you want it to be, you don’t have to keep it as a member profile page as like the example.

Also, if you simply use the ‘close’ or ‘X’ button on a lightbox, then it should just close and show the page behind that it appeared over. It will only move the user onto another page if you do it yourself through code after the lightbox is closed.

If you are still stuck with it all then check out Nayeli (Code Queen) youtube videos and tutorial pages about it too.
2017 Create Member Profile Log In Page - Custom Private Client Member Dashboard - Wix Code

Creating a client dashboard in Wix using Wix Code
https://codequeen.wixsite.com/membership-dashboard

Wix Member Login - How to customize member login on Wix using Wix Code
https://www.totallycodable.com/wix/corvid/custom-registration-for-site-login-using-wix-code

Just don’t forget that when you create your own custom lightbox for signup and login, then you need to enable your signup settings to suit your choice too.
https://support.wix.com/en/article/corvid-enabling-custom-site-registration

Thanks you for this thorough feedback. I have seen some of the links but will check out the videos and see.

In terms of pushing a user back to the previous page they were on if they close the lightbox. Do you have any links on how to do that? Thanks in advance.

Hey @givemeawhisky I have been researching this topic and I noticed you have been able to help a lot of people here.

I need some help with a project im working on, I would like lighboxes to only show to members who are not subscribed to a pricing plan.

Would I simply be able to add you as a contributor and pay you for your services in coding these light-boxes?

I’m available to chat offline at 516-406-8472
Thanks in advance