Mega Menu Corvid not working, why?

sarinahhitech · April 4, 2020, 7:41am

I used Mega Menu code from corvid example with some editing but why it isn’t working properly?
i created 2 “Data Collection” = ‘mainFrame’ & ‘subFrame’
it just wont expanding the subMenu i edited.
i got no range, new, & product. so i deleted it
help please… this below are the minor code i edited linked to my collection

import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
let allMenusData;
let $item = $w.at();
let containers = $item("Container");
iniPage()
.then((resuts) => {
allMenusData = resuts;
selectMenu(allMenusData, 'subMenuRepeater', 0);
let mainMenuRepeaterData = $w("#mainMenuRepeater").data;
let subMenuRepeaterData = $w("#subMenuRepeater").data;

$w("#mainMenuRepeater").forItems([mainMenuRepeaterData[0]._id], ($item, itemData, index) => {
$item('#mainMenuButton').style.backgroundColor = 'white';
$item('#mainMenuButton').style.color = 'black';
$item('#subMenuButton').style.color = 'black';
});
$w("#subMenuRepeater").forItems([subMenuRepeaterData[0]._id], ($item, itemData, index) => {
$item('#subMenuButton').style.color = '#ED5829';
});
});
containers.forEach(function (container, i, repeatersArray) {
const repeater = container.parent;
const containerChildern = container.children;
const image = containerChildern.filter(element => element.type === '$w.Image')[0];
const button = containerChildern.filter(element => element.type === '$w.Button')[0];
repeater.onItemReady(($item, itemData, index) => {
$item('#' + button.id).label = itemData.name;
if (itemData.image) {
$item('#' + image.id).src = itemData.image;
}
if (itemData.link) {
$item('#' + container.id).onClick((event) => {
// if you the menu to link to different pages, add the needed links to the collections and uncomment the following line:
// wixLocation.to(itemData.link);
});
} else {
$item('#' + button.id).onMouseIn((event) => {
switch (button.id) {
case 'mainMenuButton':
button.style.backgroundColor = 'black';
$item('#' + button.id).style.backgroundColor = 'white';
$item('#' + button.id).style.color = 'black';
break;
case 'subMenuButton':
button.style.color = 'black';
$item('#' + button.id).style.color = '#ED5829';
break;
default:
break;
}
selectMenu(allMenusData, repeater.id, index);
});
}
});
});
});
async function iniPage() {
try {
const allMainMenuData = await wixData.query('mainFrame').limit(1000).find();
$w('#mainMenuRepeater').data = allMainMenuData.items;
$w('#mainMenuStrip').expand();
const allSubMenuData = await wixData.query('subFrame').limit(1000).find();
$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
$w('#subMenuStrip').expand();
return {
'mainFrameData': allMainMenuData.items,
'subFrameData': allSubMenuData.items,
};
} catch (err) {
console.log('error ', err);
}
}
function selectMenu(allMenusData, clickedMenu, clickedButton) {
const allMainMenuData = allMenusData.mainFrameData;
switch (clickedMenu) {
case 'mainMenuRepeater':
$w('#subMenuRepeater').data = allMenusData.subFrameData.filter(item => item.mainMenu === allMainMenuData[clickedButton]._id);
$w('#megaMenuStrip').collapse();
break;
case 'subMenuRepeater':
$w('#megaMenuStrip').expand();
break;
default:
break;
}
function filterd(data) {
return data.filter(item => item.subMenu === ($w('#subMenuRepeater').data)[clickedButton]._id);
}
}

preview mode : subMenu won’t appears no matter what i do. been stuck for a week

givemeawhisky · April 4, 2020, 8:16pm

Here is a test website using that tutorial.
https://givemeawhisky.wixsite.com/test1

I have just simply exported the original subMenu and mainMenu datasets and imported them into the datasets of subFrame and mainFrame.

In the code itself, you only need to change the actual dataset names here, everything else can stay exactly the same.

Also make sure that you have used the correct fields in the dataset as well.

So make sure that your subFrame dataset matches with reference field choice.

Page 1 is the actual tutorial itself with subMenu and mainMenu datasets.

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

$w.onReady(function () {
	let allMenusData;
	let $item = $w.at();
	let containers = $item("Container");

	iniPage()
		.then((results) => {
			allMenusData = results;
			selectMenu(allMenusData, 'subMenuRepeater', 0);
			let mainMenuRepeaterData = $w("#mainMenuRepeater").data;
			let subMenuRepeaterData = $w("#subMenuRepeater").data;
			
			$w("#mainMenuRepeater").forItems([mainMenuRepeaterData[0]._id], ($item, itemData, index) => {
				$item('#mainMenuButton').style.backgroundColor = 'white';
				$item('#mainMenuButton').style.color = 'black';
				$item('#subMenuButton').style.color = 'black';
			});

			$w("#subMenuRepeater").forItems([subMenuRepeaterData[0]._id], ($item, itemData, index) => {
				$item('#subMenuButton').style.color = '#ED5829';
			});

		});
	containers.forEach(function (container, i, repeatersArray) {
		const repeater = container.parent;
		const containerChildern = container.children;
		const image = containerChildern.filter(element => element.type === '$w.Image')[0];
		const button = containerChildern.filter(element => element.type === '$w.Button')[0];

		repeater.onItemReady(($item, itemData, index) => {
			$item('#' + button.id).label = itemData.name;
			if (itemData.image) {
				$item('#' + image.id).src = itemData.image;
			}
			if (itemData.link) {
				$item('#' + container.id).onClick((event) => {
					wixLocation.to(itemData.link);
				});
			} else {
				$item('#' + button.id).onMouseIn((event) => {
					switch (button.id) {
					case 'mainMenuButton':
						button.style.backgroundColor = 'black';
						$item('#' + button.id).style.backgroundColor = 'white';
						$item('#' + button.id).style.color = 'black';
						break;
					case 'subMenuButton':
						button.style.color = 'black';
						$item('#' + button.id).style.color = '#ED5829';
						break;
					default:
						break;
					}
					selectMenu(allMenusData, repeater.id, index);
				});
			}
		});
	});
});

async function iniPage() {
	try {
		const allMainMenuData = await wixData.query('mainMenu').limit(1000).find();
		$w('#mainMenuRepeater').data = allMainMenuData.items;
		$w('#mainMenuStrip').expand();

		const allSubMenuData = await wixData.query('subMenu').limit(1000).find();
		$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
		$w('#subMenuStrip').expand();

		const allRangeData = await wixData.query('range').limit(1000).find();
		const allNewData = await wixData.query('new').limit(1000).find();
		const allProductData = await wixData.query('product').limit(1000).find();

		return {
			'mainMenuData': allMainMenuData.items,
			'subMenuData': allSubMenuData.items,
			'rangeData': allRangeData.items,
			'newData': allNewData.items,
			'productData': allProductData.items
		};

	} catch (err) {
		console.log('error ', err);
	}
}

function selectMenu(allMenusData, clickedMenu, clickedButton) {
	const allMainMenuData = allMenusData.mainMenuData;
	switch (clickedMenu) {
	case 'mainMenuRepeater':
		$w('#subMenuRepeater').data = allMenusData.subMenuData.filter(item => item.mainMenu === allMainMenuData[clickedButton]._id);
		$w('#megaMenuStrip').collapse();
		break;
	case 'subMenuRepeater':
		$w('#rangeRepeater').data = filterd(allMenusData.rangeData);
		$w('#newRepeater').data = filterd(allMenusData.newData);
		$w('#productRepeater').data = filterd(allMenusData.productData);
		$w('#megaMenuStrip').expand();
		break;
	default:
		break;
	}

	function filterd(data) {
		return data.filter(item => item.subMenu === ($w('#subMenuRepeater').data)[clickedButton]._id);
	}
}

Page 2 is the same tutorial just using the subFrame and mainFrame datasets.

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

$w.onReady(function () {
	let allMenusData;
	let $item = $w.at();
	let containers = $item("Container");

	iniPage()
		.then((resuts) => {
			allMenusData = resuts;
			selectMenu(allMenusData, 'subMenuRepeater', 0);
			let mainMenuRepeaterData = $w("#mainMenuRepeater").data;
			let subMenuRepeaterData = $w("#subMenuRepeater").data;
			
			$w("#mainMenuRepeater").forItems([mainMenuRepeaterData[0]._id], ($item, itemData, index) => {
				$item('#mainMenuButton').style.backgroundColor = 'white';
				$item('#mainMenuButton').style.color = 'black';
				$item('#subMenuButton').style.color = 'black';
			});

			$w("#subMenuRepeater").forItems([subMenuRepeaterData[0]._id], ($item, itemData, index) => {
				$item('#subMenuButton').style.color = '#ED5829';
			});

		});
	containers.forEach(function (container, i, repeatersArray) {
		const repeater = container.parent;
		const containerChildern = container.children;
		const image = containerChildern.filter(element => element.type === '$w.Image')[0];
		const button = containerChildern.filter(element => element.type === '$w.Button')[0];

		repeater.onItemReady(($item, itemData, index) => {
			$item('#' + button.id).label = itemData.name;
			if (itemData.image) {
				$item('#' + image.id).src = itemData.image;
			}
			if (itemData.link) {
				$item('#' + container.id).onClick((event) => {
					wixLocation.to(itemData.link);
				});
			} else {
				$item('#' + button.id).onMouseIn((event) => {
					switch (button.id) {
					case 'mainMenuButton':
						button.style.backgroundColor = 'black';
						$item('#' + button.id).style.backgroundColor = 'white';
						$item('#' + button.id).style.color = 'black';
						break;
					case 'subMenuButton':
						button.style.color = 'black';
						$item('#' + button.id).style.color = '#ED5829';
						break;
					default:
						break;
					}
					selectMenu(allMenusData, repeater.id, index);
				});
			}
		});
	});
});

async function iniPage() {
	try {
		const allMainMenuData = await wixData.query('mainFrame').limit(1000).find();
		$w('#mainMenuRepeater').data = allMainMenuData.items;
		$w('#mainMenuStrip').expand();

		const allSubMenuData = await wixData.query('subFrame').limit(1000).find();
		$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
		$w('#subMenuStrip').expand();

		const allRangeData = await wixData.query('range').limit(1000).find();
		const allNewData = await wixData.query('new').limit(1000).find();
		const allProductData = await wixData.query('product').limit(1000).find();

		return {
			'mainMenuData': allMainMenuData.items,
			'subMenuData': allSubMenuData.items,
			'rangeData': allRangeData.items,
			'newData': allNewData.items,
			'productData': allProductData.items
		};

	} catch (err) {
		console.log('error ', err);
	}
}

function selectMenu(allMenusData, clickedMenu, clickedButton) {
	const allMainMenuData = allMenusData.mainMenuData;
	switch (clickedMenu) {
	case 'mainMenuRepeater':
		$w('#subMenuRepeater').data = allMenusData.subMenuData.filter(item => item.mainMenu === allMainMenuData[clickedButton]._id);
		$w('#megaMenuStrip').collapse();
		break;
	case 'subMenuRepeater':
		$w('#rangeRepeater').data = filterd(allMenusData.rangeData);
		$w('#newRepeater').data = filterd(allMenusData.newData);
		$w('#productRepeater').data = filterd(allMenusData.productData);
		$w('#megaMenuStrip').expand();
		break;
	default:
		break;
	}

	function filterd(data) {
		return data.filter(item => item.subMenu === ($w('#subMenuRepeater').data)[clickedButton]._id);
	}
}

Page 3 is using the subFrame and mainFrame datasets and your code above.

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

$w.onReady(function () {
let allMenusData;
let $item = $w.at();
let containers = $item("Container");

iniPage()
.then((resuts) => {
allMenusData = resuts;
selectMenu(allMenusData, 'subMenuRepeater', 0);
let mainMenuRepeaterData = $w("#mainMenuRepeater").data;
let subMenuRepeaterData = $w("#subMenuRepeater").data;

$w("#mainMenuRepeater").forItems([mainMenuRepeaterData[0]._id], ($item, itemData, index) => {
$item('#mainMenuButton').style.backgroundColor = 'white';
$item('#mainMenuButton').style.color = 'black';
$item('#subMenuButton').style.color = 'black';
});

$w("#subMenuRepeater").forItems([subMenuRepeaterData[0]._id], ($item, itemData, index) => {
$item('#subMenuButton').style.color = '#ED5829';
});

});
containers.forEach(function (container, i, repeatersArray) {
const repeater = container.parent;
const containerChildern = container.children;
const image = containerChildern.filter(element => element.type === '$w.Image')[0];
const button = containerChildern.filter(element => element.type === '$w.Button')[0];

repeater.onItemReady(($item, itemData, index) => {
$item('#' + button.id).label = itemData.name;
if (itemData.image) {
$item('#' + image.id).src = itemData.image;
}
if (itemData.link) {
$item('#' + container.id).onClick((event) => {
wixLocation.to(itemData.link);
});
} else {
$item('#' + button.id).onMouseIn((event) => {
switch (button.id) {
case 'mainMenuButton':
button.style.backgroundColor = 'black';
$item('#' + button.id).style.backgroundColor = 'white';
$item('#' + button.id).style.color = 'black';
break;
case 'subMenuButton':
button.style.color = 'black';
$item('#' + button.id).style.color = '#ED5829';
break;
default:
break;
}
selectMenu(allMenusData, repeater.id, index);
});
}
});
});
});

async function iniPage() {
try {
const allMainMenuData = await wixData.query('mainFrame').limit(1000).find();
$w('#mainMenuRepeater').data = allMainMenuData.items;
$w('#mainMenuStrip').expand();

const allSubMenuData = await wixData.query('subFrame').limit(1000).find();
$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
$w('#subMenuStrip').expand();

return {
'mainMenuData': allMainMenuData.items,
'subMenuData': allSubMenuData.items,
};
} catch (err) {
console.log('error ', err);
}
}

function selectMenu(allMenusData, clickedMenu, clickedButton) {
const allMainMenuData = allMenusData.mainFrameData;
switch (clickedMenu) {
case 'mainMenuRepeater':
$w('#subMenuRepeater').data = allMenusData.subFrameData.filter(item => item.mainMenu === allMainMenuData[clickedButton]._id);
$w('#megaMenuStrip').collapse();
break;
case 'subMenuRepeater':
$w('#megaMenuStrip').expand();
break;
default:
break;
}

function filterd(data) {
return data.filter(item => item.subMenu === ($w('#subMenuRepeater').data)[clickedButton]._id);
}
}

sarinahhitech · April 4, 2020, 8:36pm

Thank you very much @GOS for whole explanation with full images & codes u sent. i really appreciate it

sarinahhitech · April 4, 2020, 9:11pm

sorry seems like still not working i don’t know what i’m missing anymore

i tried to using your code page3 it become like this :
https://hdcreative.wixsite.com/sarinah/photo-frame

whole main button & sub button vanish
megaMenu below should be hidden till i click the main button
somehow preview & publish mode r different :

preview mode, none of those buttons are working properly. no submenu when hover / click it.

givemeawhisky · April 5, 2020, 12:25am

On page 3 of my example website I was just using the code that you have posted in your original post here.

You will see on page 3 of the test website that the buttons in the repeaters do not work and nothing changes.

Therefore I suggest that you are best making a new blank page for testing and going back to the original tutorial. Then add in your datasets for Main Frame and Sub Frame making sure that the Sub Frame dataset is setup with the reference field to the Main Frame dataset.

You don’t need to manually redo all of the datasets, simply just export your current ones and import them into the datasets on the test page.

Then just change the dataset names in the query part of the code and see what happens then.

If it all works for you on the test page, then you can simply just rename the page as your existing page for this and rename the current as old page for example so that you have got it still.

Just make sure that it is hidden from any of your menus and search engines etc in the settings for the page.

Otherwise you can delete the page if you do not want to keep an old version of it.

givemeawhisky · April 5, 2020, 12:29am

If you want to start removing parts as you are not using them, then just try removing parts of the page bit by bit.

The same with the code used, don’t delete chunks of it in one go, just delete small parts of it like above with the elements on the page.

This way you can easily just replace the parts that you have removed with the back button in the Editor itself and paste back in the parts that you deleted from the code as well from the Wix tutorial.

givemeawhisky · April 5, 2020, 12:34am

Finally please note as well that without access to your site that this is just guess work here for us, so you can paste your Editor URL for Wix Admin or Mods to view it themselves.

Note that only the Wix Admin/Mods (Wix Employees) of this forum are able to access your Editor if you paste your Editor URL.

This means that nobody else in this Corvid Forum, even us Corvid Masters and Ninjas, do not have access to it, so it would need one of them to have a look at your site in more detail and see where you are going wrong if you can’t still get this to work for you.

sarinahhitech · April 5, 2020, 12:18pm

@givemeawhisky Thanks. i’ll try to work as u suggest 1st. i hv so many stuffs to input later
gonna need mega menu for minimize new page usage.

sarinahhitech · April 6, 2020, 5:34am

is this Mega Menu can’t be edited?
i tried many times changing collection, editing the code, etc…
just wont work on function selectedmenu (button)
need help from Wix Admin / Moderator, please?
https://editor.wix.com/html/editor/web/renderer/edit/1180a914-4630-4c88-8919-8e49567be3f4?metaSiteId=80c5ae95-27d8-4002-ae44-852e2ea82f60&editorSessionId=77A8628D-2EB5-4805-990B-37AF3276DFED

givemeawhisky · April 6, 2020, 10:30pm

Looking at your last post and your own dataset images I can see that you have made up both of your datasets differently to that of the datasets used in the tutorial.

You have images in the subFrame dataset when the subMenu dataset in the tutorial does not.

You have a reference field in the mainFrame dataset when the mainMenu dataset in the tutorial does not.

All the product data is coming from the Product collection from Wix Stores and not from your own datasets, along with the new data and range data from the New and Range datasets respectively.

If you are wanting to have the images in your subFrame and mainFrame menus along with additional reference fields, then you are going to have to rework the code to suit this additional change and it won’t just be a case of simple delete.

If you want to use the mega menu example as it is then you need to be creating up your datasets to match the example as it is shown.

I would then suggest that you just copy over the whole example onto a blank page in your site and change the dataset query lines to your datasets as shown in bold red below.

const allMainMenuData = await wixData.query('mainMenu').limit(1000).find();
$w('#mainMenuRepeater').data = allMainMenuData.items;
$w('#mainMenuStrip').expand();

const allSubMenuData = await wixData.query('subMenu').limit(1000).find();
$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
$w('#subMenuStrip').expand();

const allRangeData = await wixData.query('range').limit(1000).find();
const allNewData = await wixData.query('new').limit(1000).find();
const allProductData = await wixData.query('product').limit(1000).find();

If this works for you then you can delete your current page and replace it with this working one.

As I have said before this is as far as I can go without having access to your site and seeing what you have done so far, so as you have posted your Wix Editor URL I will ask for somebody to have a look at this for you.

Hopefully they can provide more insight after they have seen your actual pages itself and seen what you have got setup and how.

givemeawhisky · April 6, 2020, 10:32pm

@brett-haralson
Can you get somebody to look at this site to see what is happening as they are having issues with the mega menu.

sarinahhitech · April 7, 2020, 4:43am

@givemeawhisky Thanks, apparently it can works well with ‘mainMenu’ & ‘subMenu’ collections. If i change it to ‘mainFrame’ & ‘mainFrame’, all function become broken / not working at all.
delete / adjust small part of the code also got broken.

i wish to use this Mega Menu on other page with whole different contents which mainMenu & subMenu collection can’t be use anymore.

givemeawhisky · April 7, 2020, 4:30pm

It would work fine with your mainFrame and subFrame datasets as well if you made them up to be the same as the datasets used in the tutorial itself.

So that means all your images data, new data and range data etc must be coming from the other datasets of Product, New and Range.

If you want to use your datasets as they are, you will have to do what I have already suggested and change the code in the example to suit the fact that you are pulling the actual product, new and range data from those datasets too and not the datasets already used in the example.

givemeawhisky · April 7, 2020, 4:30pm

You might find that this older Mega Menu example here might be a better solution for you.
https://support.wix.com/en/article/corvid-tutorial-creating-an-expanding-mega-menu

sarinahhitech · April 7, 2020, 5:32pm

@givemeawhisky i finally found the answers on the errors!
as you mention before changing this codes together with “item.mainMenu” & “item.subMenu” bcuz they are corresponding on the our collections.

const allMainMenuData = await wixData.query('mainFrame').limit(1000).find();
$w('#mainMenuRepeater').data = allMainMenuData.items;
$w('#mainMenuStrip').expand();

const allSubMenuData = await wixData.query('subFrame').limit(1000).find();
$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainFrame === allMainMenuData.items[0]._id);
$w('#subMenuStrip').expand();

and last part

function filterd(data) {
return data.filter(item => item.subFrame === ($w('#subMenuRepeater').data)[clickedButton]._id);
}
}

then it’ll works perfectly now

Thank you very much for the suggestion & assists. Much appreciated.

sarinahhitech · April 7, 2020, 5:36pm

That one got me so confuse… cuz preview mode & edit mode are totally different also no collection inside edit mode
When i learn more about how codes works, i’ll try that one.

mnorwood16 · April 19, 2020, 1:37am

I’m having an issue with this menu as well. I cannot get the submenu to expand no matter what I do. I’ve had to add a “2” after my “mainMenuRepeater” because if I don’t I get a red exclamation point in my properties panel ID. Also, The only way I can see the header menu items on preview is to add the code to “page” instead of “site”. GOS would you mind taking a look at my code to see if you can find out what I’m doing wrong? After I get this fixed, then I need to figure out how to make sure the sub menu is collapsed upon page load with this code, then when the sub menu is open, collapse it upon mouse out .

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

$w.onReady(function () {
 let allMenusData;
 let $item = $w.at();
 let containers = $item("Container");

    iniPage()
        .then((resuts) => {
            allMenusData = resuts;
            selectMenu(allMenusData, 'subMenuRepeater', 0);
 let mainMenuRepeaterData = $w("#mainMenuRepeater2").data;
 let subMenuRepeaterData = $w("#subMenuRepeater").data;
 
            $w("#mainMenuRepeater2").forItems([mainMenuRepeaterData[0]._id], ($item, itemData, index) => {
                $item('#mainMenuButton').style.backgroundColor = 'white';
                $item('#mainMenuButton').style.color = 'black';
                $item('#subMenuButton').style.color = 'black';
            });

            $w("#subMenuRepeater").forItems([subMenuRepeaterData[0]._id], ($item, itemData, index) => {
                $item('#subMenuButton').style.color = '#ED5829';
            });

        });
    containers.forEach(function (container, i, repeatersArray) {
 const repeater = container.parent;
 const containerChildern = container.children;
 const image = containerChildern.filter(element => element.type === '$w.Image')[0];
 const button = containerChildern.filter(element => element.type === '$w.Button')[0];

        repeater.onItemReady(($item, itemData, index) => {
            $item('#' + button.id).label = itemData.name;
 if (itemData.image) {
                $item('#' + image.id).src = itemData.image;
            }
 if (itemData.link) {
                $item('#' + container.id).onClick((event) => {
                    wixLocation.to(itemData.link);
                });
            } else {
                $item('#' + button.id).onMouseIn((event) => {
 switch (button.id) {
 case 'mainMenuButton':
                        button.style.backgroundColor = 'black';
                        $item('#' + button.id).style.backgroundColor = 'white';
                        $item('#' + button.id).style.color = 'black';
 break;
 case 'subMenuButton':
                        button.style.color = 'black';
                        $item('#' + button.id).style.color = '#ED5829';
 break;
 default:
 break;
                    }
                    selectMenu(allMenusData, repeater.id, index);
                });
            }
        });
    });
});

async function iniPage() {
 try {
 const allMainMenuData = await wixData.query('mainMenu').limit(1000).find();
        $w('#mainMenuRepeater2').data = allMainMenuData.items;
        $w('#mainMenuStrip2').expand();

 const allSubMenuData = await wixData.query('subMenu').limit(1000).find();
        $w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
        $w('#subMenuStrip').expand();

 const allRangeData = await wixData.query('range').limit(1000).find();
 const allNewData = await wixData.query('new').limit(1000).find();
 const allProductData = await wixData.query('product').limit(1000).find();

 return {
 'mainMenuData': allMainMenuData.items,
 'subMenuData': allSubMenuData.items,
 'rangeData': allRangeData.items,
 'newData': allNewData.items,
 'productData': allProductData.items
        };

    } catch (err) {
        console.log('error ', err);
    }
}

function selectMenu(allMenusData, clickedMenu, clickedButton) {
 const allMainMenuData = allMenusData.mainMenuData;
 switch (clickedMenu) {
 case 'mainMenuRepeater':
        $w('#subMenuRepeater').data = allMenusData.subMenuData.filter(item => item.mainMenu === allMainMenuData[clickedButton]._id);
        $w('#megaMenuStrip').collapse();
 break;
 case 'subMenuRepeater2':
        $w('#rangeRepeater').data = filterd(allMenusData.rangeData);
        $w('#newRepeater').data = filterd(allMenusData.newData);
        $w('#productRepeater').data = filterd(allMenusData.productData);
        $w('#megaMenuStrip').expand();
 break;
 default:
 break;
    }

 function filterd(data) {
 return data.filter(item => item.subMenu === ($w('#subMenuRepeater').data)[clickedButton]._id);
    }
}

mnorwood16 · April 19, 2020, 1:38am

Here is the live link to the page. https://editor.wix.com/html/editor/web/renderer/edit/4c82c9b3-5b96-43e5-ab49-2c5bc97eabb5?metaSiteId=2cf96207-fc59-4e97-81f8-ec9eee88bd40&editorSessionId=b87a625d-b3d8-4d73-a0ea-04345bea5901&referralInfo=dashboard

givemeawhisky · April 19, 2020, 12:08pm

I cannot get the submenu to expand no matter what I do.

The subMenuStrip is set to collapse on load and will only expand on this code line.

		const allSubMenuData = await wixData.query('subMenu').limit(1000).find();
		$w('#subMenuRepeater').data = allSubMenuData.items.filter(item => item.mainMenu === allMainMenuData.items[0]._id);
		$w('#subMenuStrip').expand();

I’ve had to add a “2” after my “mainMenuRepeater” because if I don’t I get a red exclamation point in my properties panel ID

Your element id name must be unique, you can not have more than one element with that id name.

You are trying to give a repeater a id name of mainMenuRepeater when you already have a repeater element with that id name already on your page.

Topic		Replies	Views
Mega menu corvid need help Ask the community code , question	2	106	February 4, 2021
Small issue with mega menu Ask the community code , question	2	135	March 29, 2023
Where can I find the code ? Ask the community code , question	5	152	April 30, 2020
Create a big menu Ask the community code , question	3	98	May 28, 2020
Can't get a Sub-Sub Menu to work Ask the community code , design , question	0	201	March 21, 2021

Mega Menu Corvid not working, why?

Related topics