hey guys, i’ve been trying to use this
https://www.wix.com/corvid/example/mega-menu
mega menu feature. After copy, pasting the code i need to manually set up the event handlers eg mouse in etc.
But, the event handlers are in a different way and i don’t know how to select a specific handler for group of buttons. Please take a look at the code and let me know how should i make it work with it!
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;
how do i add that kind of event handler.
Hi,
What do you mean by “the event handlers are in a different way”?
There are multiple ways to add an event handler to a group of elements.
For example, in the code from the Wix example, they’ve added the onMouseIn handler to the $item in the repeater that the event is triggered on. Meaning if the mouse hovers over one of the items in the repeater, the switch statement will be executed.
You can also handle events separately or by data type. I’ve provided 3 simple examples that may give you another idea on how to add an event handler on multiple elements in the screenshot below:
If you’re still having trouble with the example would you be able to elaborate a bit further on what you’re trying to achieve and provide a link to your site?
Best regards,
Miguel
Hello,
Thanks for the quick response Miguel. Acutally, as i’ve already said that i’m trying to use the mega menu feature. I’ve copy pasted all the codes and page elements. Even though the event handlers are included in the code already. But still, the feature doesn’t seem to work and i feel like i need to add the event handlers manually to make it work. For that as you’ve said this
“For example, in the code from the Wix example, they’ve added the onMouseIn handler to the $item in the repeater that the event is triggered on. Meaning if the mouse hovers over one of the items in the repeater, the switch statement will be executed.”
how do i manually add the onmouse in handler to $item in the repeater. Is just writing the code is enough or do i need to select the repeater → properties → onmousein. Please elaborate the steps to perform this operation clearly.
Again, i want to know how to make that mega menu feature work, because i feel like i’ve done all the things perfectly. Now, i just want to know what’s the right way of adding the above handler:
- Just add the code $item ( ‘#’ + container . id ). onClick (( event )
or
2. Do both 1 & 2 repeater → properties → onmousein.
Hope, you’ve understood what i’m trying to say.
Also, when i select preview, the mega menu feature works perfectly. But, after i publish my site and see it doesn’t show up. What could be the issue?
Hi Roshan 
Take a look at my answer here on the differences between event hanlers types:
https://www.wix.com/corvid/forum/main/comment/5eef59d4a767dd00359e78fa
Also take a look at this answer how it uses a dynamic function to create multiple event handlers, no matter what their number is:
https://www.wix.com/corvid/forum/main/comment/5ef7250df0de2e001718934b
Ahmad
Hi Ahmad, i looked at the link you provided. I still, can’t figure out where i’m going wrong. Can u please help me resolve my issue, implementing mega menu. https://www.wix.com/corvid/example/mega-menu
i’ve done all the necessary changes, and when i click on preview it works perfectly. But after i publish my site live, it doesn’t show up. What could be the issue?
Are you using databases to populate the menu? If so, did you make sure that you’ve synced the Sandbox collection with the Live collection?
Also give me a link to your site to preview it.
yeah, i’ve done that
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();
wowww, thank you so much broo!!! Now it works, i didn’t know i had to connect sandbox to live. Thank you so so much, Just can’t thank you enough. Was looking for the solution for such a long time!!! Thanks a ton again!
hey Ahmad, i’ve been trying to implement this feature but can’t figure out. https://www.wix.com/corvid/example/members-area
I’ve done all the necessary changes, but can’t figure out how to send the approval code to the user’s email signing up? I even went through the documentation, but still don’t understand. It would be very helpful if you can help me in a personalized way.
Also, how should i define the contactID field in the collection. Becasue it shows an exclamatory symbol and asks to define it.
Thanks in advance!
Hey Roshan 
This question is already answered, please open a new thread and tag me there.
Hey Ahmad, i really need your help implementing mega search feauture: https://www.wix.com/corvid/example/mega-search
I have done all the necessary changes, but still the properties are not displayed, this is how it looks while viewing the site: https://www.saifahamedmasood.com/blank-2
Here are my codes:
Mega search page code
import wixData from 'wix-data';
import { debounce } from 'lodash';
const collectionName = 'realEstateProperties';
const debounceTime = 500;
$w.onReady(function () {
initComps();
initRepeater();
buildFiltersAndPopulateRepeater();
});
async function initComps() {
// populate iLocation dropdown
const res = await wixData.query(collectionName)
.ascending('mainLocation')
.distinct('mainLocation')
.then((locationData) => {
return locationData.items.map((location) => {
return {
value: location,
label: location
}
});
});
$w('#iLocation').options = res;
// change max price according to type selection
$w('#iType').onChange((event) => {
$w('#iMaxPrice').max = event.target.value === 'RENT' ? 20000 : 50000000;
});
// bind all input elements
const componentsTypeArray = ['RadioButtonGroup', 'Dropdown', 'Slider', 'CheckboxGroup'];
const debounceFunction = debounce(buildFiltersAndPopulateRepeater, debounceTime);
componentsTypeArray.forEach((compType) => {
const compArray = $w(compType);
compArray.forEach((comp) => {
comp.onChange((event) => {
debounceFunction();
});
});
});
}
async function buildFiltersAndPopulateRepeater() {
let dataQuery = wixData.query(collectionName);
dataQuery = dataQuery.eq('type', $w('#iType').value);
if ($w('#iLocation').value) {
dataQuery = dataQuery.eq('mainLocation', $w('#iLocation').value);
}
// sliders
dataQuery = dataQuery.ge('squareFeet', $w('#iSize').value);
dataQuery = dataQuery.ge('bedrooms', $w('#iBedrooms').value);
dataQuery = dataQuery.ge('bathrooms', $w('#iBathrooms').value);
dataQuery = dataQuery.ge('levels', $w('#iLevels').value);
dataQuery = dataQuery.ge('price', $w('#iMinPrice').value);
if ($w('#iMaxPrice').value > 0) {
dataQuery = dataQuery.le('price', $w('#iMaxPrice').value);
}
// multiple selection
$w('#iOptions').value.forEach((selectedOption) => {
dataQuery = dataQuery.eq(selectedOption, true);
})
$w('#propertyList').data = await dataQuery.find().then((res) => res.items);
}
function initRepeater() {
$w('#propertyList').onItemReady(($item, itemData) => {
$item('#pImage').src = itemData.thumbnailImage;
$item('#pName').label = itemData.propertyName;
$item('#pLocation').text = itemData.mainLocation;
$item('#pPrice').text = '$' + String(itemData.price);
$item('#pTyp').text = itemData.type;
$item('#pBedrooms').text = String(itemData.bedrooms);
$item('#pLevels').text = String(itemData.levels);
$item('#pBaths').text = String(itemData.bathrooms);
$item('#pSize').text = String(itemData.squareFeet);
});
}
This is how my databse looks:
I’ve also synced it to live!
Can’t figure out where is the problem. Please help me with this, thanks in advance!
Please open up a new thread for your new question.
