(All the code is at the bottom of the post)
I am trying to make a live-updating gallery based on dropdown input but I can't seem to make the dropdown selections do anything to the gallery. There are a lot of variables that could be messing it up but everytime I try to change something other issues pop-up.
As might be obvious I am quite a newbie to this, any help pointing out my mistakes would be greatly appreciated.
I have double-checked all the id's so I don't imagine those are the issue. I've also gone through the tutorials and other posts but I couldn't find anything similar enough to my case.
Also, I assigned the searchList_change event to all 4 dropdowns.
import wixData from "wix-data";
import {bmwSuvModels, mercedesSuvModels} from 'public/suv-models';
import {suvBrands} from 'public/suv-brands';
import {sedanBrands} from 'public/sedan-brands';
$w.onReady(function() {
$w('#dropdown2').options = suvBrands;
$w('#dropdown1').onChange(() => {
if ($w('#dropdown1').value === 'SUV') {
$w('#dropdown2').options = suvBrands;
$w('#dropdown2').placeholder = 'Brand';
$w('#dropdown2').enable();
}
else if ($w('#dropdown1').value === 'Sedan') {
$w('#dropdown2').options = sedanBrands;
$w('#dropdown2').placeholder = 'Brand';
$w('#dropdown2').enable();
}
});
});
$w.onReady(function() {
$w('#dropdown2').onChange(() => {
if ($w('#dropdown2').value === 'BMW') {
$w('#dropdown3').options = bmwSuvModels;
$w('#dropdown3').placeholder = 'Brand';
$w('#dropdown3').enable();
}
else if ($w('#dropdown2').value === 'Mercedes') {
$w('#dropdown3').options = mercedesSuvModels;
$w('#dropdown3').placeholder = 'Brand';
$w('#dropdown3').enable();
}
});
});
export function searchList_change(event) {
wixData.query("Find your car")
.contains("Type", $w("#dropdown1").value)
.contains("Brand", $w("#dropdown2").value)
.contains("Model", $w("#dropdown3").value)
.contains("Model Year", $w("#dropdown4").value)
.find()
.then(res => {
$w("#gallery1").items = res.items;
$w("#gallery1").expand
});
}
Hi Layth,
One thing that I'm noticing is that you are using the "friendly" collection name "Find your car" and not the collection ID. You have to use the collection ID, probably something like "Findyourcar" when referring to the collection in code.
Click on Edit Settings in the Content Manager to bring up the dialog where you can verify the actual collection ID:
Are your