Question:
Combine Multiple Filters for a dataset with Velo
Product:
Wix Editor
What are you trying to achieve:
Combine (distinct) location filters (Country, State & City) with other simpler tag filters.
The location filtering is a major feature I’ve tried to implement for long but had to settle for poor workarounds. Until recently when the THE WIX WIZ posted a tutorial for that exact requirement, a proper conditional location filtering using the native capabilities of Wix’s Google Maps.
Despite successfully implementing this location filtering (& expanding it to have Country & City filters), it cost me the other filters I had (eg. no. of rooms, size etc), as I can’t combine them despite days of trying as a noncoder. So I can only use either the location filters together, or the other few filters together, each bundle filter the dataset separately.
What have you already tried:
@thewixwiz How to Design Real Estate Listings & Map with Wix CMS Collections, Repeater](https://youtu.be/aY2fy5l4Ooo?si=jbhaMrAMyFe7TNpV)
The other filters (no. of rooms, size etc) were great combinable filters Wix allows by default with no code & datasets. But I’ve tried & was not able to implement this with code either. Anyway, combining these filters with those robust location filters is what I’m trying.
I’ve checked forums & many YouTube vids but their coding approaches are very different to this tutorial so are hard to relate together.
Also, better if no button is used to apply all filters at once. Rather, each input selection ‘on change’ narrows filtering. (Specially as this was the way in the tutorial)
Complete Location filtering Velo Code:
import wixData from 'wix-data';
$w.onReady(async function () {
await setupCountriesDropdown();
});
async function getCountries() {
const listingsQueryResult = await wixData.query("Properties").distinct("mapLocation.country")
const countries = listingsQueryResult.items;
return countries;
}
async function setupCountriesDropdown() {
const countries = await getCountries();
$w("#countriesDropdown").options = countries.map((country) => ({
label: country,
value: country,
}))
$w("#countriesDropdown").onChange(filterByCountry);
}
async function filterByCountry() {
const country = $w("#countriesDropdown").value;
$w("#listingsDataset").setFilter(
wixData.filter()
.eq("mapLocation.country", country)
)
await setupStatesDropdown();
$w('#statesDropdown, #cityDropdown').value = undefined;
}
async function getStates() {
const country = $w("#countriesDropdown").value;
const listingsQueryResult = await wixData.query("Properties").eq("mapLocation.country", country).limit(1000).distinct("mapLocation.subdivision")
const states = listingsQueryResult.items;
return states;
}
async function setupStatesDropdown() {
const states = await getStates();
$w("#statesDropdown").options = states.map((state) => ({
label: state,
value: state,
}))
$w("#statesDropdown").enable();
$w("#statesDropdown").onChange(filterByState);
}
async function filterByState() {
const state = $w("#statesDropdown").value;
$w("#listingsDataset").setFilter(
wixData.filter()
.eq("mapLocation.subdivision", state)
)
await setupCitiesDropdown();
$w('#cityDropdown').value = undefined;
}
async function getCities() {
const state = $w("#statesDropdown").value;
const listingsQueryResult = await wixData.query("Properties").eq("mapLocation.subdivision", state).limit(1000).distinct("mapLocation.city")
const cities = listingsQueryResult.items;
return cities;
}
async function setupCitiesDropdown() {
const cities = await getCities();
$w("#cityDropdown").options = cities.map((city)=>({
label: city,
value: city,
}))
$w("#cityDropdown").enable();
$w("#cityDropdown").onChange(filterByCity);
}
async function filterByCity() {
const cities = $w("#cityDropdown").value;
$w("#listingsDataset").setFilter(
wixData.filter()
.eq("mapLocation.city", cities)
)
}
