Getting my register button to redirect users (code snippet included)

Ask the community
, ,
1

Hi guys,

I can’t figure out why this code is not working. I am trying to register a new user and then automatically send the user to the members only page once they click register.

Can anyone see why it’s not working?

import wixUsers from ‘wix-users’;
import wixLocation from ‘wix-location’;

$w.onReady( function () {
$w(‘#register’).onClick( function () {
let email = $w(‘#email’).value;
let password = $w(‘#password’).value;
wixUsers.register(email, password)
.then((result) => {
wixLocation.to(‘/NSBMembersOnly’);
})
})
})

Sean

1 Like
2

This works perfectly and closes after registering details before moving onto signup status page, then both names will be saved in contacts and once site member is approved the member details will be added to ‘members’ database.

If you are wanting members to be approved immediately and not manually like myself, then simply change your member settings.
https://support.wix.com/en/article/editing-your-member-signup-settings-for-the-default-form

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

Hi givemeawhiskey,

Thank you so much! That worked perfectly for me.

You seem to be very knowledgeable so I’d love your advice on this issue…

I have created a member’s only page for my customers to download the digital product they have purchased. However, I have a few security issues I’m concerned about.

My current member registration process:

  1. customer purchases product via PayPal option (I don’t use Wix Stores)
  2. An automatic email is sent to them with a link to my registration page
  3. the customer registers and gets sent to the member’s only product download area
  4. a login lightbox automatically pops up for the user to access the page

Problems:

  1. I am sure this isn’t the best way to ensure a customer gets registered (is there any way to automatically register a customer as a member via the info. they input on Paypal)?
  2. anyone who hasn’t purchased my product could register as a member and gain access to the download area if they got the link to the member registration page (I don’t want to have to approve each member as the customers would want instant access to the product)
  3. the login lightbox on the download area takes a few seconds to pop up (even though the setting is to open immediately) which gives someone enough time to download a PDF from the the page without needing to login
  4. anyone can close the login lightbox by clicking ESC. (Perhaps this problem is best resolved by using a container box that disappears when logged in?)

Any tips or advice would be so much appreciated. Don’t be afraid to tell me my whole process is completely wrong and I need to start over.

Thanks so much

4

The best way around that for myself would be to incorporate the register process within the purchase of the product so that they are already registered before they get to the download option.

So, you could leave it as it is for now with all your coding for the Paypal payment and once this is all complete, then have the customer have to enter their details for registration.

You can still have the automatic email sent out to acknowledge the Paypal payment and on which you can add a seperate part saying something like thank you for purchasing etc, etc… Now you have registered with us, please visit our download area and use your details to login… I am sure you can word it much better!

Then when the customer goes to the download area, have everything hidden apart from whatever you want to show to everybody, like login button, company logo etc.

So when the customer clicks on login button, the custom login lightbox appears and the customer logs themselves in using their details and after clicking on the login button, the login lightbox closes itself and the download area page is refreshed so that the code on the page starts and the customer is logged in with the login button changing to say logout and all your hidden download items are now visible.

You could always go down another long winded and more secure route which creates a random number ( https://webiya.wixsite.com/rnd-number-example ) that the customer clicks to generate and then inputs that into their Paypal purchase somewhere.

So the random number they generated would then be stored in a custom field in your dataset, so this random number would always be unique to their account, like the owner field in the dataset.
https://support.wix.com/en/article/about-your-database-collection-fields#system-fields

Then when they login in you could direct them to another lightbox or another page where you can get them to retype in this unique number and then query this number with the number in your customer dataset and if it matches then they are given access to the downloads area. If the numbers don’t match then they can be redirected to any page that you wish or simply have a error message come up on screen.

i would still have everything hidden on your download area regardless of which option you use, so that the only way it shows up is by having the user log themselves in using the details they entered at registration.

5

This is the code I use for my own custom login lightbox which appears when the user clicks on the login button on my members only area. Nothing is displayed on this page apart from my logo and login button.

Once the user is logged in, the lightbox closes itself and the page is refreshed so that the code used on the page can kick into gear and work.

NOTE: Without the refresh for the page code after the lightbox closes itself, the page code won’t work as it won’t register the user logging in and the login button won’t change to logout and my hidden members elements won’t appear.

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);  //This reloads the same page and 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.
   } ); 
}
6

This is the page code that I have used on my members only page. It needs to be refreshed by the login lightbox after it closes for it to be activated.

It was taken from this tutorial by Wix here:
https://support.wix.com/en/article/corvid-tutorial-building-your-own-members-area

All my member only elements are enclosed within the members only strip so that I only had to input the one line of code for the strip and not have to enter all the separate elements individually.

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady(function () {
//TODO: write your page related code here...

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

Hi givemeawhiskey,

Thank you so much! Your advice has helped me so much.

I’ve been playing around with your code the last couple of days because for some reason my website was acting weird. I couldn’t logout and the strip was refusing to collapse.

In the end I have just used some workarounds on these minor issues that get to the same desired result. Instead of collapsing a strip, I’ve grouped my members only elements and collapsed the group. I’ve opted to create separate login and logout buttons. But everything is working perfectly now.

You’re a rockstar.

Sean

8

For better understanding can you please help me with the link to your website. And I might be interested in your products. Thanks in advance.

9

Please @GOS can you help me with a website that uses this code. I want to see the site structure or if you can help with the site editor link.

10

@myfundinc You’ll need to create a new post with a detailed description, code, and screenshots in order to get some help. Please follow our guidelines on how to write a post.