Question:
How to FILTER website content(all pages) using CONDITIONAL dropdowns
Product:
Wix Website Editor
What are you trying to achieve:
i’m trying to filter parts from home page which upon clicking submit, user gets redirected to that specific page where the filtered content is located. i’m using conditional dropdown for filtering where dropdown items loads according to the item chosen from previous dropdown.
there are about 50,000 above datas to be filtered
What have you already tried:
i researched so much in youtube but there are filtering only for repeater in current page, tried various code from youtube and chatgpt but no use. this is the code i’m ended up right now. the issue is when first dropdown is clicked, 2nd dropdown doesn’t show any items. same with others. and submit button does not do anything
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
$w.onReady(function () {
$w(“#yearDropdown”).onChange((event) => {
let selectedYear = event.target.value;
fetchMakes(selectedYear);
});
});
function fetchMakes(selectedYear) {
$w(“#makeDropdown”).disable();
wixData.query(“UsedAutoParts”)
.eq(‘make’, selectedYear)
.distinct(‘year’)
.then(results => {
let makes = results.items.map(item => item.make);
console.log(“Makes:”, makes);
$w(“#makeDropdown”).options = makes.map(make => ({label: make, value: make}));
$w(“#makeDropdown”).enable();
})
.catch(error => {
console.error(“Error fetching makes:”, error);
$w(“#makeDropdown”).enable();
});
}
$w.onReady(function () {
$w(“#makeDropdown”).onChange((event) => {
let selectedMake = event.target.value;
fetchModels(selectedMake);
});
});
function fetchModels(selectedMake) {
$w(“#modelDropdown”).disable();
wixData.query(“UsedAutoParts”)
.eq(“make”, selectedMake)
.distinct(“model”)
.then(results => {
let models = results.items.map(item => item.model);
$w(“#modelDropdown”).options = models.map(model => ({label: model, value: model}));
$w(“#modelDropdown”).enable();
})
.catch(error => {
console.error(“Error fetching models:”, error);
$w(“#modelDropdown”).enable();
});
}
$w.onReady(function () {
$w(“#modelDropdown”).onChange((event) => {
let selectedModel = event.target.value;
fetchParts(selectedModel);
});
});
function fetchParts(selectedModel) {
$w(“#partDropdown”).disable();
wixData.query(“UsedAutoParts”)
.eq(“model”, selectedModel)
.distinct(“part”)
.then(results => {
let parts = results.items.map(item => item.part);
$w(“#partDropdown”).options = parts.map(part => ({label: part, value: part}));
$w(“#partDropdown”).enable();
})
.catch(error => {
console.error(“Error fetching parts:”, error);
$w(“#partDropdown”).enable();
});
}
$w.onReady(function () {
$w(“#partDropdown”).onChange((event) => {
let selectedPart = event.target.value;
fetchTrims(selectedPart);
});
});
function fetchTrims(selectedPart) {
$w(“#partDropdown”).disable();
wixData.query(“UsedAutoParts”)
.eq(“part”, selectedPart)
.distinct(“trim”)
.then(results => {
let trims = results.items.map(item => item.trim);
$w(“#trimDropdown”).options = trims.map(trim => ({label: trim, value: trim}));
$w(“#trimDropdown”).enable();
})
.catch(error => {
console.error(“Error fetching trims:”, error);
$w(“#trimDropdown”).enable();
});
}
$w.onReady(function () {
$w(“#submitButton”).onClick(() => {
let selectedYear = $w(“#yearDropdown”).value;
let selectedMake = $w(“#makeDropdown”).value;
let selectedModel = $w(“#modelDropdown”).value;
let selectedPart = $w(“#partDropdown”).value;
let selectedTrim = $w(“#trimDropdown”).value;
performQuery(selectedYear, selectedMake, selectedModel, selectedPart, selectedTrim, 0);
});
});
function performQuery(year, make, model, part, trim, skip) {
wixData.query(“UsedAutoParts”)
.eq(“year”, year)
.eq(“make”, make)
.eq(“model”, model)
.eq(“part”, part)
.eq(“trim”, trim)
.limit(100)
.skip(skip)
.find()
.then(results => {
if (results.items.length > 0) {
let firstItem = results.items[0];
let pageURL = firstItem.audi;
if (pageURL) {
wixLocation.to(pageURL);
} else {
console.error(“Page URL not found for the selected item.”);
}
} else {
console.error(“Item not found in the database.”);
}
})
.catch(error => {
console.error(“Error searching for item:”, error);
});
}