This is a very basic query, however I’m completely new to Wix and Velo and I’m not sure what I’m doing yet.
Basically I’d like to add a new class to the body tag when the user is logged in.
I’m not very good with Javascript, but tried the following code in Velo which didn’t seem to work. Perhaps it would be better to use the Custom Code settings to do this?
import { authentication } from 'wix-members';
$w.onReady(function () {
const isLoggedIn = authentication.loggedIn();
if (isLoggedIn) {
body.classList.add("loggedin");
}
});
What you are trying to code, won’t work in Wix-Velo-World.
You will need to do it inside an HTML-COMPONENT, or CUSTOM-ELEMENT.
What for do you need the → CLASS ?
Hi, thanks for responding.
I just need to hide a menu item for people who are not logged in. Using CSS would be the easiest way for me.
Can I ask why this won’t work in Wix-Velo?
After some searching I’ve now found another piece of code that uses ‘hide’ API, which should hide an object, which could be a better way of doing things:
import { authentication } from 'wix-members';
$w.onReady(function () {
const loggedIn = authentication.loggedIn();
if (loggedIn) {
console.log('Logged in, hiding Resources menu item');
$w('#comp-kd49gw7q3').hide();
}
authentication.onLogin(() => {
console.log('Logged in, hiding Resources menu item');
$w('#comp-kd49gw7q3').hide();
});
});
I got the code snippet from Wix help pages: https://www.wix.com/velo/reference/$w/breadcrumbs/hide
But even though I’ve added it to the masterpage.js it does not work. I get an error “Hide is not a function”. This is Wix’s code and does not work for me! What am I missing here?
-Your BREAD-CRUMB’S- ID is → comp-kd49gw7q3 ???
-Your BREAD-CRUMB is placed in the HEADER ???
Not sure, but maybe you also should make sure to await for “loggedIn” result first…
$w.onReady(async function () {
const loggedIn = await authentication.loggedIn();
console.log("Logged-In: "; loggedIn);
//...
//...
//...
console.log("Bread-Crumb: ", $w('#comp-kd49gw7q3'));
//...
Always inspect your own code, by adding enough of console-logs, in all the code-lines, where to face some problems.
Normaly it should work.
Hi, sorry I can’t see your reply for some reason. Anyway sorry for messing you around, I clearly did not understand what ‘Elements’ Velo targets when I posted originally. Now I understand things better and realise that I was trying to target a html element which Velo cannot do.
Obviously I need to place my javascript using the Custom Code option. however I’m not sure how to get the logged in status of a user. This line from my code above:
import{ authentication } from'wix-members';
Does not work in custom code, so I guess my question now is how to access the ‘wix-members’ module data using a Custom Code script? Is it even possible?
Ok, as i understood you want to send your data over to the HTML-WINDOW (HTML-CODE-WORLD), which seems to be your favourite one. Where you want to genrate your own custom HTML+CSS-CODE.
As i already told, there are several options.
a) HTML-COMPONENT
b) Custom-Element
c) Inside Dashboard (Custom-Code)
It seems like you are not really a beginner in coding, just the VELO-WORLD is new for you, but not coding at all. You seems to know how to work with HTML and the DOM.
At least i can see, that you have already some coding skills, or you understand things very fast.
Your steps for your solution would be…
-
User Logs in
-
Authentication-process running (backend or frontend)
-
You get response if user is logged-in or not (boolean-value → true/false)
-
Now comes the more difficult part, sending it over to the HTML-WORLD
-
This for i will use a HTML-Component in this example…
You will have to take a look onto this example, wich will show you the right way of how to do it and how to bring your wished function in action…
https://www.wix.com/velo/reference/$w/htmlcomponent/onmessage
Read more about the HTML-Component in the introduction of the related API-Docs.
ATTENTION: To be able to use the HTML-Component, you will need to have a PREMIUM Wix-Site. It won’t work on FREE-Wixsites.
The same you will be able to generte, by using a CUSTOM-ELEMENT.
Custom-Element will be the better option, but HTML-Component also should do the trick.
Good luck!!!
This is absolutely fantastic, thank you! I’m sure this will be very useful further down the line in my site development.
Actually, I’m not very advanced with coding, in particular javascript, I only learn what I need to know, and often forget it after a while!!!
I have come up with another solution, which is to have two menus positioned in exactly the same place, and hide each menu accordingly using Velo code to target and hide each menu element depending on the log in state. It’s a bit messy in the Editor UI, but it seems to do the trick.
I’ll leave the code here in case anyone else ever needs something similar:
import { authentication } from 'wix-members';
$w.onReady(function () {
const loggedIn = authentication.loggedIn();
if (loggedIn) {
console.log('Logged in, hiding Visitors menu');
$w('#horizontalMenu1').hide();
}
else {
console.log('Logged out, hiding Members menu');
$w('#horizontalMenu3').hide();
}
authentication.onLogin(() => {
console.log('Logging in, hiding Visitors menu, showing Members menu');
$w('#horizontalMenu1').hide();
$w('#horizontalMenu3').show();
});
});
Once again, thank you @Code-Ninjafor your patience and help.
If it was all about a MENU-OPTION inside your horizontalMenu, your way was a very long one.
-first it looked like you wanted to create your own DYNAMIC menu (HTML/CSS)
-then you used another element → breadcrumbs
-at least you used the “horizontal-menu”.
So, in future, first make sure, what exactly is your desired aim/result.
Since you now use the “horizontal-menu-element”, you do not need to add 2-different menu-elements, to get your wished function.
Instead read the following…
https://www.wix.com/velo/reference/$w/menu/menuitems
