I am trying to create a custom signup in a lightbox. This is the code I have used however it does not seem to submit the new member or navigate to the next page. Is anyone able to tell me where I have gone wrong?
Thanks
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(()=>{
wixLocation.to(‘/create-profile’);
})
})
})
You are combining two versions of code for event handlers.
$w('#register').onClick(function (){
When you add the event handler through the properties panel for that element, you automatically get an export function line of code added to your page code, like below
export function loginButton_click(event) {
Whereas, when you add the event handler into the code itself, you can simply write it like this below
$w("#registerButton").onClick( (event) => {
See here for more info about working with properties panel.
Velo: Working with the Properties & Events Panel | Help Center | Wix.com
Tutorial: Changing the Text Label of a Button with Code | Help Center | Wix.com
Velo: Reacting to User Actions Using Events | Help Center | Wix.com
Have a look at my signup code for a custom signup lightbox.
This works perfectly for me and closes after registering details before moving user on to a signup status page, then both names will be saved in Contact List and once site member is manually approved the member details will be added to ‘members’ database from this tutorial here.
Velo Tutorial: Building Your Own Members Area | Help Center | Wix.com
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.
} );
} );
});
Hi thanks so much for your help! I altered my code to be the same as what you have written above and it works in the preview mode however it does not work in the published version of the site. Do you have any idea why this may be?
Thanks
@reneeveritt
Have a look at Nayeli’s tutorial pages and her youtube video about it, as this will be best for you as she takes you all through the process from start to end.
If you still have issues then come back and ask here.
By the way, Wix Users api doesn’t normally work when in preview mode, to test it fully you need to be using a published site.
The APIs in wix-users are only partially functional when previewing your site. View a published version of your site to see their complete functionality.