Hi, all
I have built a mega menu using the Wix example code https://www.wix.com/velo/example/mega-menu
No changes
however, I’m experiencing a small issue.
7 main menu items
21 Sub menu items
133 products
everything seems to work as expected until I start adding more than 50 products
One sub-menu item has 20 products - but it won’t display more than 10.
Can anyone shed any light on what’s causing this issue?
code I’m using is below
Thanks In advance
Simon
data backend file code
import wixData from 'wix-data';
const menusNames = ['mainMenu', 'subMenu', 'productMenu',];
export async function getMenus() {
const collectionsNames = menusNames;
const promises = [];
collectionsNames.forEach(collection => {
promises.push(wixData.query(collection).find());
});
const resolvedData = await Promise.all(promises);
console.log(promises)
const menusData = {
'mainMenu': resolvedData[0].items,
'subMenu': resolvedData[1].items,
'productMenu': resolvedData[2].items
//'rangeMenu': resolvedData[3].items,
//'newMenu': resolvedData[4].items
};
return {
menusNames,
menusData
};
}
main menu code
let menusData, repeaters;
let buttonLabel = “Close Menu”;
let buttonLabel1 = “Product Category”;
let selectionState = {
currMain: null,
currSub: null,
};
const colors = {
mainUnselected: ‘white’,
subUnselected: ‘black’,
selected: ‘8B000E’
}
$w.onReady(async function () {
await iniPage();
});
async function iniPage() {
try {
const menus = await getMenus();
repeaters = menus.menusNames.map(id => ({ menuId: id, repeaterSelector: $w(‘#’ + id + ‘Repeater’) }));
menusData = menus.menusData;
$w(‘#mainMenuRepeater’).data = menusData.mainMenu;
connectDataToRepeatersItems();
selectMenu(‘mainMenu’);
} catch (err) {
console.error('error ', err);
}
}
function connectDataToRepeatersItems() {
repeaters.forEach(({ menuId, repeaterSelector }) => {
repeaterSelector.onItemReady(($item, itemData) => {
const $itemBtn = $item('#' + menuId + 'Button');
if (itemData.name) $itemBtn.label = itemData.name;
//if (itemData.image) $item('#' + menuId + 'Image').src = itemData.image;
if (itemData.link) $itemBtn.link = itemData.link;
else $itemBtn.onClick(() => {
resetColorForPrevSelection(menuId);
if (menuId === 'mainMenu') {
selectionState.currMain = $itemBtn;
selectionState.currSub = null;
} else {
selectionState.currSub = $itemBtn;
}
$itemBtn.style.color = colors.selected;
selectMenu(menuId, itemData._id)
});
});
});
}
function resetColorForPrevSelection(menuId) {
if (menuId === ‘mainMenu’ && selectionState.currMain) {
selectionState.currMain.style.color = colors.mainUnselected;
} else if (selectionState.currSub) {
selectionState.currSub.style.color = colors.subUnselected;
}
}
function selectMenu(menu, clickedElementId) {
let nestedMenus;
if (menu === ‘mainMenu’) {
nestedMenus = [‘subMenu’];
$w(‘#subMenuStrip’).expand();
$w(‘#megaMenuStrip’).collapse();
} else if (menu === ‘subMenu’) {
nestedMenus = [‘productMenu’];
$w(‘#megaMenuStrip’).expand();
}
nestedMenus.forEach(nestedMenu => {
$w(‘#’ + nestedMenu + ‘Repeater’).data = filterRepeaterData(menu, nestedMenu, clickedElementId);
});
}
function filterRepeaterData(clickedMenu, nestedMenu, elementId) {
return menusData[nestedMenu].filter(item => item[clickedMenu] === elementId);
}
export function buttonProductByUsage_click(event) {
if($w(“#mainMenuStrip”).collapsed) {
$w(‘#mainMenuStrip’).expand();
$w(“#buttonProductByUsage”).label = buttonLabel;
}else {
$w(“#buttonProductByUsage”).label = buttonLabel1;
let menuId = ‘mainMenu’
$w(‘#mainMenuStrip’).collapse();
$w(‘#megaMenuStrip’).collapse();
$w(‘#subMenuStrip’).collapse();
}
}