Menu isn't updating after setting through velo

Ask the community
, , ,
1

Question:
I need to create different menus for different pages on my site, so I’m using the velo menus api to do it. Through the console log I can clearly see that the menu hasn’t changed after I set it. Why not?

Product:
Velo with Wix Studio

What are you trying to achieve:
Trying to achieve custom menu for each page of my website.

What have you already tried:

	let myMenuItems = [
		{ label: "Resort Overview", link: "/allana", id: "item-id-1" },
		{ label: "About Allana", link: "/about-allana", id: "item-id-2" },
		{ label: "Villas", link: "/villas-allana", selected: true, id: "item-id-3", 
			menuItems: [{label: "Beachfront Pool Villa", link: "/beachfront-pool-villa", id: "subitem-villa-1"},
						{label: "Beachfront Pool Suite", link: "/beachfront-pool-suite", id: "subitem-villa-2"},
						{label: "2-Bedroom Beachfront Pool Suite", link: "/2-bedroom-beachfront-pool-suite", id: "subitem-villa-3"},
						{label: "Sea Breeze Pool Villa", link: "seabreeze-pool-villa", id: "subitem-villa4"},
						{label: "Sea Breeze Pool Suite", link: "seabreeze-pool-suite", id: "subitem-villa5"}] 
		},
		{ label: "Dining", link: "/dining-allana", id: "item-id-4" },
		{
			label: "Events & Retreats",
			link: "/events-and-retreats-allana",
			id: "item-id-5",
		},
		{ label: "Gallery", link: "/gallery-allana", id: "item-id-6" },
	];
	console.log("New Menu Items", myMenuItems);
	$w('#horizontalMenu1').menuItems = myMenuItems;
	console.log("In the menu", $w('#horizontalMenu1').menuItems);

Output in the console is the following:

New Menu Items

Array(6)

jsonTableCopy JSON

0:

{…}

1:

{…}

2:

{…}

3:

{…}

4:

{…}

5:

{…}

Villas Allana

Line 36

In the menu

Array(13)

jsonTableCopy JSON

0:

{…}

1:

{…}

2:

{…}

3:

{…}

4:

{…}

5:

{…}

6:

{…}

7:

{…}

8:

{…}

9:

{…}

10:

{…}

11:

{…}

12:

{…}

Additional information:
The menu is still set to what it is in the Wix Editor (which has all 12 possible menu items).

2

Wix has the feature of using different munu for each page. You can try that.

3

I believe that’s only for Wix Studio Editor. I don’t want to go through and change it over to Wix Studio right now, am in a time crunch so don’t want to deal with any additional side effects to that. The problem is from the submenus. Setting the menus works as long as I don’t have any submenus.

4

May you try this once(I haven’t tested it on Wix)

let myMenuItems = [
    { label: "Resort Overview", link: "/allana", id: "item-id-1" },
    { label: "About Allana", link: "/about-allana", id: "item-id-2" },
    { 
        label: "Villas", link: "/villas-allana", selected: true, id: "item-id-3", 
        menuItems: [
            { label: "Beachfront Pool Villa", link: "/beachfront-pool-villa", id: "subitem-villa-1" },
            { label: "Beachfront Pool Suite", link: "/beachfront-pool-suite", id: "subitem-villa-2" },
            { label: "2-Bedroom Beachfront Pool Suite", link: "/2-bedroom-beachfront-pool-suite", id: "subitem-villa-3" },
            { label: "Sea Breeze Pool Villa", link: "/seabreeze-pool-villa", id: "subitem-villa4" },
            { label: "Sea Breeze Pool Suite", link: "/seabreeze-pool-suite", id: "subitem-villa5" }
        ] 
    },
    { label: "Dining", link: "/dining-allana", id: "item-id-4" },
    { label: "Events & Retreats", link: "/events-and-retreats-allana", id: "item-id-5" },
    { label: "Gallery", link: "/gallery-allana", id: "item-id-6" },
];

console.log("New Menu Items", myMenuItems);
$w('#horizontalMenu1').menuItems = myMenuItems;
console.log("In the menu", $w('#horizontalMenu1').menuItems);
5

Actually your suggestion of creating a new menu for each page worked…I had to set the menu as an “advanced menu”, then I created 2 more advanced menus (1 for each menu that I need), and I simply show and hide the appropriate menu on each page. Thank you!