Adding a 3rd dropdown

Ask the community
, ,
1

Hello-

My current code is set up for 2 dropdowns and search bar. It works perfectly but when I add the 3rd drop down my code breaks and the search bar no longer works. Help!

Current Code:

import { local } from ‘wix-storage’;
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady( function () {
var sameWord = local.getItem(“searchWord”);
$w(“#searchbar1”).value = sameWord;
$w(‘#members’).onReady( function () {
filter($w(‘#searchbar1’).value, lastFilterLocation, lastFilterPrice);
}, 200);
});

$w.onReady(() => {
loadLocations();
});

$w.onReady(() => {
loadPrice();
});

$w.onReady(() => {
local.clear(“#searchbar1”);
});

let lastFilterSearchbar;
let lastFilterLocation;
let lastFilterPrice;
let debounceTimer;

export function searchbar1_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchbar1’).value, lastFilterLocation, lastFilterPrice);
}, 200);
}

export function searchbar1_change() {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchbar1’).value, lastFilterLocation, lastFilterPrice);
}, 500);
}

export function location_change(event, $w) {
filter(lastFilterSearchbar, $w(‘#location’).value);
}

export function price_change(event, $w) {
filter(lastFilterSearchbar, lastFilterLocation, $w(‘#price’).value);
}

function filter(searchbar, location, price) {
if (lastFilterSearchbar !== searchbar || lastFilterLocation !== location || lastFilterPrice !== price) {
let newFilter = wixData.filter();
if (searchbar)
newFilter = newFilter.contains(‘title’, searchbar)
.or = newFilter.contains(‘cuisines’ || ‘features’ || ‘categories’ || ‘catergory1’ || ‘category2’, searchbar)
if (location)
newFilter = newFilter.contains(‘location’, location);
if (price)
newFilter = newFilter.contains(‘price’, price);
$w(‘#members’).setFilter(newFilter)
.then(() => {
console.log(“Dataset is now filtered”);
if ($w(‘#members’).getTotalCount() === 0) {
$w(‘#nores’).show();
} else {
$w(‘#nores’).hide();
}
})
. catch ((err) => {
console.log(err);
});
lastFilterSearchbar = searchbar;
lastFilterLocation = location;
lastFilterPrice = price;
}
}

function loadLocations() {
wixData.query(‘members’)
.find()
.then(res => {
let options = [{ “value”: ‘’, “label”: ‘All Locations’ }];
options.push(…res.items.map(location => {
return { “value”: location.searchbar, “label”: location.price.searchbar };
}));
$w(‘#location’).options = options;
});
}

function loadPrice() {
wixData.query(‘members’)
.find()
.then(res => {
let options = [{ “value”: ‘’, “label”: ‘All Prices’ }];
options.push(…res.items.map(price => {
return { “value”: price.searchbar, “label”: price.location.searchbar };
}));
$w(‘#price’).options = options;
});
}

let slideInOptions = {
“duration”: 200,
};

let slideOutOptions = {
“duration”: 200,
};

export function clear_click(event, $w) {
$w(“#location”).value = ‘Location’;
$w(“#price”).value = ‘Price’;
$w(“#cuisine”).value = ‘Cuisine’;
$w(“#searchbar1”).value = undefined;
$w(“#members”).setFilter(wixData.filter());
}

CODE FOR NEW DROPDOWN (Cuisine) , Dataset Column is “Cuisines”

import { local } from ‘wix-storage’;
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady( function () {
var sameWord = local.getItem(“searchWord”);
$w(“#searchbar1”).value = sameWord;
$w(‘#members’).onReady( function () {
filter($w(‘#searchbar1’).value, lastFilterLocation, lastFilterPrice, lastFilterCuisine);
}, 200);
});

$w.onReady(() => {
loadLocations();
});

$w.onReady(() => {
loadPrice();
});

$w.onReady(() => {
loadCuisine();
});

$w.onReady(() => {
local.clear(“#searchbar1”);
});

let lastFilterSearchbar;
let lastFilterLocation;
let lastFilterPrice;
let lastFilterCuisine;
let debounceTimer;

export function searchbar1_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchbar1’).value, lastFilterLocation, lastFilterPrice, lastFilterCuisine);
}, 200);
}
export function searchbar1_change() {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchbar1’).value, lastFilterLocation, lastFilterPrice, lastFilterCuisine);
}, 500);
}

export function location_change(event, $w) {
filter(lastFilterSearchbar, $w(‘#location’).value);
}

export function price_change(event, $w) {
filter(lastFilterSearchbar, lastFilterLocation, $w(‘#price’).value);
}

export function cuisine_change(event, $w) {
filter(lastFilterSearchbar, lastFilterPrice, $w(‘#cuisine’).value); }

function filter(searchbar, location, price, cuisine) {
if (lastFilterSearchbar !== searchbar || lastFilterLocation !== location || lastFilterPrice !== price || lastFilterCuisine !== cuisine) {
let newFilter = wixData.filter();
if (searchbar)
newFilter = newFilter.contains(‘title’, searchbar)
.or = newFilter.contains(‘cuisines’ || ‘features’ || ‘categories’ || ‘catergory1’ || ‘category2’, searchbar)
if (location)
newFilter = newFilter.contains(‘location’, location);
if (price)
newFilter = newFilter.contains(‘price’, price);
if (cuisine)
newFilter = newFilter.contains(‘cuisines’, cuisine);
$w(‘#members’).setFilter(newFilter)
.then(() => {
console.log(“Dataset is now filtered”);
if ($w(‘#members’).getTotalCount() === 0) {
$w(‘#nores’).show();
} else {
$w(‘#nores’).hide();
}
})
. catch ((err) => {
console.log(err);
});
lastFilterSearchbar = searchbar;
lastFilterLocation = location;
lastFilterPrice = price;
lastFilterCuisine = cuisine;
}
}

function loadLocations() {
wixData.query(‘members’)
.find()
.then(res => {
let options = [{ “value”: ‘’, “label”: ‘All Locations’ }];
options.push(…res.items.map(location => {
return { “value”: location.searchbar, “label”: location.price.searchbar };
}));
$w(‘#location’).options = options;
});
}

function loadPrice() {
wixData.query(‘members’)
.find()
.then(res => {
let options = [{ “value”: ‘’, “label”: ‘All Prices’ }];
options.push(…res.items.map(price => {
return { “value”: price.searchbar, “label”: price.location.searchbar };
}));
$w(‘#price’).options = options;
});
}

function loadCuisine() {
wixData.query(‘members’)
.find()
.then(res => {
let options = [{ “value”: ‘’, “label”: ‘All Cuisines’ }];
options.push(…res.items.map(cuisine => {
return { “value”: cuisine.searchbar, “label”: cuisine.price.location.searchbar };
}));
$w(‘#cuisine’).options = options;
});
}

let slideInOptions = {
“duration”: 200,
};

let slideOutOptions = {
“duration”: 200,
};

export function clear_click(event, $w) {
$w(“#location”).value = ‘Location’;
$w(“#price”).value = ‘Price’;
$w(“#cuisine”).value = ‘Cuisine’;
$w(“#searchbar1”).value = undefined;
$w(“#members”).setFilter(wixData.filter());
}

Once this code is added this section breaks
if (searchbar) newFilter = newFilter.contains(‘title’, searchbar) .or = newFilter.contains(‘cuisines’ || ‘features’ || ‘categories’ || ‘catergory1’ || ‘category2’, searchbar)

and my Cuisine dropdown doesn’t work either.

2

Follow the same pattern and add a third filter

3

Hey Carlos-

Thanks for trying but if you review the 2nd code that is exactly what I did, which I have in my post.

When I followed the same procedure for the 3rd drop down the dropddown won’t work nor my search bar.

I also noticed that my original code is only allowing search in the Title and the cuisines fields not the others: features, categories, category1, category2, category 3.

if (searchbar) newFilter = newFilter.contains(‘title’, searchbar) .or = newFilter.contains(‘cuisines’ || ‘features’ || ‘categories’ || ‘catergory1’ || ‘category2’, searchbar)

4

Hello, would still appreciate help here,

I was able to get the search bar and my ‘cuisines’ dropdown work, but not my location nor price dropdown.

import { local } from ‘wix-storage’;
import wixData from ‘wix-data’;

$w.onReady( function () {
var sameWord = local.getItem(“searchWord”);
$w(“#searchbar1”).value = sameWord;
$w(‘#members’).onReady( function () {
filter($w(‘#searchbar1’).value, lastFilterCuisines, lastFilterLocation, lastFilterPrice);
}, 200);
});

$w.onReady(() => {
loadCuisines();
});

$w.onReady(() => {
loadLocation();
});

$w.onReady(() => {
loadPrice();
});

$w.onReady(() => {
local.clear(“#searchbar1”);
});

let lastFilterSearchbar;
let lastFilterCuisines;
let lastFilterLocation;
let lastFilterPrice;
let debounceTimer;

export function searchbar1_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#searchbar1’).value, lastFilterCuisines || lastFilterLocation || lastFilterPrice);
}, 500);
}

export function cuisines_change(event, $w) {
filter(lastFilterSearchbar, $w(‘#cuisines’).value);
}

export function location_change(event, $w) {
filter(lastFilterSearchbar, $w(‘#location’).value);
}

export function price_change(event, $w) {
filter(lastFilterSearchbar, $w(‘#price’).value);
}

function filter(searchbar, cuisines, location, price) {
if (lastFilterSearchbar !== searchbar || lastFilterCuisines !== cuisines || lastFilterLocation !== location || lastFilterPrice !== price) {
let newFilter = wixData.filter();
if (searchbar)
newFilter = newFilter.contains(‘searchbox’, searchbar);
if (cuisines)
newFilter = newFilter.contains(‘cuisines’, cuisines);
if (location)
newFilter = newFilter.contains(‘location’, location);
if (price)
newFilter = newFilter.contains(‘price’, price);
$w(‘#members’).setFilter(newFilter);
lastFilterSearchbar = searchbar;
lastFilterCuisines = cuisines;
lastFilterLocation = location;
lastFilterPrice = price;
}
}

function loadCuisines() {
wixData.query(‘Cuisines’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘Cuisine’}];
options.push(…res.items.map(cuisines => {
return {“value”: cuisines.searchbar, “label”: cuisines.searchbar};
}));
$w(‘#cuisines’).options = options;
});

}

function loadLocation() {
wixData.query(‘Location’)
.find()
.then(res => {
let options = [{ “value”: ‘’, “label”: ‘Location’ }];
options.push(…res.items.map(location => {
return { “value”: location.searchbar, “label”: location.price.searchbar };
}));
$w(‘#location’).options = options;
});
}

function loadPrice() {
wixData.query(‘Price’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘Price’}];
options.push(…res.items.map(price => {
return {“value”: price.searchbar, “label”: price.searchbar};
}));
$w(‘#price’).options = options;
});

}

let slideInOptions = {
“duration”: 200,
};

let slideOutOptions = {
“duration”: 200,
};

export function clear_click(event, $w) {
$w(“#location”).value = ‘Location’;
$w(“#price”).value = ‘Price’;
$w(“#cuisines”).value = ‘Cuisine’;
$w(“#searchbar1”).value = undefined;
$w(“#members”).setFilter(wixData.filter());
}