In my member pages I want to make different pages based on restricted user role. I have about 6 different roles. I want only the current users role page to show and hide the others automatically. For example
userRole1
userRole2
userRole3
…
userRole6
I found multiple examples of code, not sure which one to use.
Example 1
Example 2
Any help would be appreciated thanks.
They are both old and use an old version of Velo API.
You can do:
import { currentMember, authentication } from 'wix-members';
$w.onReady(() => {
if(authentication.loggedIn()){getRoles();}
authentication.onLogin(getRoles);
})
function getRoles(){
currentMember.getRoles()
.then(roles => {
roles = roles.map(e => e.title);
if(roles.includes('Role A')){
$w('#element1').show();
$w('#element2').hide();
} else if(roles.includes('Role B')){
$w('#element2').show();
$w('#element1').hide()
}
})
}
EDITED
Gotcha that would have taken me forever to figure out lol.
Ok so I used your code but I’m trying to modify it to my situation.
my roles are based off pricing for my keg products so it looks like this
role1 = 130 //$130 keg
role2 = 150 //$150 keg
So when my 130 client logs in I only want him to see the 130 member page and hide the 150 member page
Since the menu holds the page values as an array , I tried to isolate the index for each and input them into your code but its not working not sure why.
line 28 and 29 show and hide doesn’t work for menu items(ln 16).
import { currentMember , authentication } from ‘wix-members’ ; //Import from currentMember API and Authentication API
$w . onReady (() => {
if ( authentication . loggedIn ()){ getRoles ();}
authentication . onLogin ( getRoles );
})
function getRoles ( ){
let menu = $w ( ‘#horizontalMenu2’ ). menuItems // Menu array
console . log ( menu );
let oneThirty = menu [ 3 ] //130 menu page selected in menu index
console . log ( ‘130’ );
console . log ( oneThirty );
let oneFifety = menu [ 4 ]; //150 menu page selected in menu index
console . log ( ‘150’ );
console . log ( oneFifety );
currentMember . getRoles ()
. then ( roles => { roles = roles . map ( e => e . title );
if ( roles . includes ( 130 )){
oneThirty . show (); // LN: 18 oneThirty menu index selected
oneFifety . hide (); // LN: 22 oneFiftey menu index selected
} else if ( roles . includes ( ‘Role B’ )){
$w ( ‘#element2’ ). show ();
$w ( ‘#element1’ ). hide ()
}
})
}
Hi,
first of all role titles are string so you need to do if(roles.includes( ’ 130 ’ ))
Second, I never work with Wix Menus since I always want to have full customization option, so I careate my own menu, so I can say what I thik you should do but I never really tried it.
You can try:
let allPages = [];
$w.onReady(() => {
allPagesMenu = $w('#menu').menuItems;
if(authentication.loggedIn()){getRoles();}
authentication.onLogin(getRoles);
})
///...code ...code
.then(roles => { roles = roles.map(e => e.title);
if(roles.includes('130')){
$w('#menu').menuItems = allPagesMenu.filter(e => e.label !== '150');
} else if(roles.includes('150')){
$w('#menu').menuItems = allPagesMenu.filter(e => e.label !== '130');
}
///..code
Sorry for the late reply.
P.S
In the The allPagesMenu.filter(e => e.label !== ‘150’); the ‘150’ stand for the page name.
TO THE FORUM MODARTED: I accidently reported my own reply as spam when I tried to edited it. Please ignore.
Hey J.D. No problem at all I just appreciate you taking the time to help me out. I’ve been meaning to messaging you back but I just got back from vacation in Brazil.
Thank you so much! I’m really new to trying to understand how to code on VELO so excuse my ongoing noobish questions. Here’s what I’m wondering
2. When I'm trying to debug my code and console.log my currentMember.getRoles() nothing appears on the console. So its hard to tell whats happening.
