Hi! I really need help with my website as I’m trying to add more function to how my users can filter my property listings.
So I was able to code for 3 conditional dropdowns where dropdown 1 will trigger dropdown 2 and dropdown 3. As I wanted my users to be able to specify the province then the city within that province and the business districts within that city.
Now, what I want to do is add a RANGE filter to further filter the results by rental rates.
Here’s my code so far:
This works but I don’t know how to add the range filter function without ruining the function of the first 3 dropdowns I made.
import { local } from 'wix-storage';
import wixData from 'wix-data';
import {
buildingLocation,
metromnlCity,
makatiBuilding,
mandaluyongBuilding,
paranaqueBuilding,
qcBuilding,
pasigBuilding,
taguigBuilding,
gensanBuilding,
ilocosBuilding,
bacolodBuilding,
iloiloBuilding,
baguioBuilding,
cebuBuilding,
davaoBuilding,
taguigDistrict,
manilaDistrict,
pasayDistrict,
muntinlupaDistrict,
makatiDistrict,
mandaluyongDistrict,
qcDistrict,
paranaqueDistrict,
pasigDistrict,
makaticbdDistrict,
rockwellDistrict,
bayareaDistrict,
northtriangleDistrict,
ortigascenterpasigDistrict,
greaterortigasDistrict,
ortigascentermandaDistrict,
} from 'public/Buildings.js';
//Search function
$w.onReady(function () {
$w("#searchButton").onClick(search);
function search() {
let query = wixData.query("Buildings");
let locationFilter = $w("#locationDropdown").value;
let districtFilter = $w("#businessDistrictDropdown").value;
let blgClassFilter = $w("#buildingClassDropdown").value;
let officeTypeFilter = $w("#officeTypeDropdown").value;
let rangeFilter = $w("#rangeFilterSlider").value;
//this will check if the filter has a value
if(blgClassFilter.length > 0){
query = query.and(wixData.query("Buildings").eq('location', blgClassFilter));
}
if(districtFilter.length > 0){
query = query.and(wixData.query("Buildings").eq('businessDistrict', districtFilter));
}
if(locationFilter.length > 0){
query = query.and(wixData.query("Buildings").eq('province', locationFilter));
}
if(rangeFilter > 0){
query = query.and(wixData.query("Buildings").le('rentalRange', rangeFilter));
}
if(officeTypeFilter.length > 0){
query = query.and(wixData.query("Buildings").eq('officeType', officeTypeFilter));
}
query.find()
.then(results => {
$w("#repeater5").data = results.items;
console.log($w("#repeater5").data);
});
$w('#repeater5').expand();
}
// $w("#buildingdataset").setFilter(wixData.filter()
// .eq('location', blgClassFilter).and.eq('businessDistrict', districtFilter).eq('province', locationFilter.).eq('dropdown1',dropdown1Filter).eq('dropdown2',dropdown2Filter));
});
//Conditional Dropdown
$w.onReady(function () {
$w('#locationDropdown').options = buildingLocation;
$w('#locationDropdown').placeholder = 'Location';
$w('#locationDropdown').onChange(() => {
let province = $w("#locationDropdown").value;
$w("#buildingdataset").setFilter(wixData.filter()
.eq('province', province))
//LOCATIONS
if ($w('#locationDropdown').value === 'Metro Manila') {
$w('#buildingClassDropdown').options = metromnlCity;
$w('#buildingClassDropdown').placeholder = 'Choose City';
}
if ($w('#locationDropdown').value === 'General Santos') {
$w('#buildingClassDropdown').options = [];
$w('#businessDistrictDropdown').options = [];
}
if ($w('#locationDropdown').value === 'Ilocos') {
$w('#buildingClassDropdown').options = [];
$w('#businessDistrictDropdown').options = [];
}
if ($w('#locationDropdown').value === 'Bacolod') {
$w('#buildingClassDropdown').options = [];
$w('#businessDistrictDropdown').options = [];
}
if ($w('#locationDropdown').value === 'Iloilo') {
$w('#buildingClassDropdown').options = [];
$w('#businessDistrictDropdown').options = [];
}
if ($w('#locationDropdown').value === 'Baguio') {
$w('#buildingClassDropdown').options = [];
$w('#businessDistrictDropdown').options = [];
}
if ($w('#locationDropdown').value === 'Cebu') {
$w('#buildingClassDropdown').options = [];
$w('#businessDistrictDropdown').options = [];
}
if ($w('#locationDropdown').value === 'Davao') {
$w('#buildingClassDropdown').options = [];
$w('#businessDistrictDropdown').options = [];
}
});
$w("#buildingClassDropdown").onChange(()=>{
//CITIES for Business Districts
if ($w('#buildingClassDropdown').value === 'Makati City') {
$w('#businessDistrictDropdown').options = makatiDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Mandaluyong City') {
$w('#businessDistrictDropdown').options = mandaluyongDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Paranaque City') {
$w('#businessDistrictDropdown').options = paranaqueDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Quezon City') {
$w('#businessDistrictDropdown').options = qcDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Pasig City') {
$w('#businessDistrictDropdown').options = pasigDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Taguig City') {
$w('#businessDistrictDropdown').options = taguigDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Pasay City') {
$w('#businessDistrictDropdown').options = pasayDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Manila City') {
$w('#businessDistrictDropdown').options = manilaDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Muntinlupa City') {
$w('#businessDistrictDropdown').options = muntinlupaDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
if ($w('#buildingClassDropdown').value === 'Muntinlupa City') {
$w('#businessDistrictDropdown').options = muntinlupaDistrict;
$w('#businessDistrictDropdown').placeholder = 'Choose District';
}
});
// #buildingClassDropdown
$w("#clear").onClick(() => {
$w("#officeTypeDropdown").value = undefined;
$w("#rangeFilterSlider").value = undefined;
$w("#buildingClassDropdown").value = undefined;
$w("#locationDropdown").value = undefined;
$w("#businessDistrictDropdown").value = undefined;
$w("#buildingClassDropdown, #buildingDistrictDropdown ").options = []
//$w("#buildingdataset").setFilter(wixData.filter());
});
});