Hide button with various conditions

Ask the community
, ,
1

Hello, I have in my website in one page a button hide except if the members are log in, and in other page I have a button hide except if they check a checkbox.

How can I do for have both conditions? You have to be log in and check the box.

Here is the code that I used individually:
Hide button if they arent log in
import wixUsers from ‘wix-users’ ;
import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( () => {
setupPage ();
wixUsers . onLogin ( ( user ) => {
setupPage ();
} );
} );

export function setupPage () {

$w . onReady ( function (){
const currentUser = wixUsers . currentUser ;
if ( currentUser . loggedIn && currentUser . role === ‘Member’ ){
//Show components:
$w ( “#button13” ). show ();

} 
  **if**  ( currentUser . loggedIn  &&  currentUser . role  ===  'Visitor' ){ 
    //Show components: 
    $w ( "#button13" ). hide (); 

}

})}

Hide Button if they didnt check the box
$w . onReady ( function () {
$w ( “#checkbox1, #checkbox2” ). onChange (( event )=> { console . log ( isChecked2 )
let isChecked1 = $w ( ‘#checkbox1’ ). checked ;
let isChecked2 = $w ( ‘#checkbox2’ ). checked ;
if ( isChecked1 === true && isChecked2 === true ){
$w ( “#button14” ). show ()
console . log ( “Checkbox is checked” )
}
else {
$w ( ‘#button14’ ). hide ()
console . log ( “Checkbox is unchecked” )
}
});
});

2

You have a problem in your CODE! → You are using more than one → onReady()

!!! BAD IDEA !!!

Not sure, if this is the functionality you were looking for…

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(() => {
    const currentUser = wixUsers.currentUser; console.log("Current-USER: ", currentUser);

    $w("#checkbox1, #checkbox2").onChange((event)=> {
        check_Function();
    });

    check_Function();
    wixUsers.onLogin((user)=>{console.log("USER: ", user);
        check_Function();
    });  
});


function check_Function() {
    let isChecked1 = $w('#checkbox1').checked; console.log(isChecked1);
    let isChecked2 = $w('#checkbox2').checked; console.log(isChecked2);

    if(isChecked1 && isChecked2){console.log("Both Checkboxes are checked!");
       $w("#button14").show();
       
    }
    else{
       $w('#button14').hide();
       console.log("Not both of checkboxes are checked!");
    }

    if (currentUser.loggedIn && currentUser.role === 'Member'){console.log("MEMBER");
        $w("#button13").show();
    }
      if (currentUser.loggedIn && currentUser.role === 'Visitor'){console.log("VISITOR");
        $w("#button13").hide();
    }

}

When do you want to start your function ?

3

I want that start when for example they checked the boxes, but always that they are log in.
This code, it tells me that current user isnt defined

4

@aapgcup
My suggestion would be to UPDATE your USER-AUTHENTICATION with the new “authentication”-API…first.
https://www.wix.com/velo/reference/wix-members/authentication-obj/login

The same for onLogin-processes…
https://www.wix.com/velo/reference/wix-members/authentication-obj/login

You are using a depricated and outdated one.

If you want to start when changing one of your Check-Boxes…

$w.onReady(()=> {
    $w("#checkbox1, #checkbox2").onChange((event)=> {check_Function();});  
});