How to change a menu label using Velo Menu API?

Ask the community
, , ,
1

Question:
How to change a menu label using Velo Menu API so that it displays?

Product:
Velo

What are you trying to achieve:
One of my menu items points to a page that contains a monthly newsletter. I’ve been manually going into Wix Studio each month and changing the menu label by hand to say, in this case “January Newsletter”.

I thought I should be able to add the following velo code to my masterPage.js and have this particular menu item label change automatically under program control. But the displayed menu doesn’t change. I added console.outs before and after, so I know the items are correct, and the log file shows they are changing. It’s just not displaying those changes in the menu.

(I know this example is horribly hard coded. It’s just an example ).

$w.onReady(function () {
let menuItems = $w(‘#horizontalMenu1’).menuItems;|
menuItems[1].menuItems[3].label = “XYZZY”;|
});

What have you already tried:
Just the bit of Velo code shown above.

Additional information:
I have everything else working when the newsletter is updated. I can get the correct month as a string. I also have logic /failsafes to ensure that it updates the right menu items, so I’m not worried about the hardcoding that I show in the example above. I just don’t know how to get it to display in the menu.

2

Define your new menu-options and push it to the horizontal-menu.

let myMenuOptions = [
{label: 'Home', link: '/', selected: true, id: 'item-id-1'},
{label: 'For Rent', link: '/rentals', id: 'item-id-2'},
{label: 'For Sale', link: '/purchases', id: 'item-id-3'},
{label: 'Mortgage calculator', link: 'https://www.mortgagecalculator.org/', target: '_blank', id: 'item-id-4'},
{label: 'About Us', link: '/about', id: 'item-id-5'}
];

$w('#myHorizontalMenu').menuItems = myMenuOptions;

…or the direct-way…

$w('#myHorizontalMenu').menuItems = [
  {label: 'Home', link: '/', selected: true, id: 'item-id-1'},
  {label: 'For Rent', link: '/rentals', id: 'item-id-2'},
  {label: 'For Sale', link: '/purchases', id: 'item-id-3'},
  {label: 'Mortgage calculator', link: 'https://www.mortgagecalculator.org/', target: '_blank', id: 'item-id-4'},
  {label: 'About Us', link: '/about', id: 'item-id-5'}
];
3

So is there no way to just replace the label on one menu item? Do I have to replace the entire menu? I guess I could get the entire menu, turn it into a JSON string, make a new JSON object from that, change the one thing I want to change and submit the whole menu back? Is that the recommended approach?

4

Correct!

I have shown you how to set…
$w(‘#myHorizontalMenu’).menuItems = myMenuOptions;

Do first the REVERSE → do the → get <— first, like…

let myMenuOptions = $w(‘#myHorizontalMenu’).menuItems;

Your options are now inside an OBJECT-ARRAY.
console.log what you got → in CONSOLE → console.log(myMenuOptions);

Now you are able to modify every single menu-object.
Something like…

myMenuOptions[0].label = "YOUR NEW LABEL HERE FOR FIRST ITEM"

And then push them back (set) to the menu and it’s done, you have changed the label of the first menu-item.

5

Brilliant! Thank you!

6

If this approach gave you your wished solution, marked it as SOLUTION. :upside_down_face: