Hi guys! Is iMNi Marketing here from Argentina.
I’m having troubles on getting my code done. The point is: I have a collection that has Automobile price list with collums set as Brand, Model, Year of manf and the price(which is unique for every previous variable)
The whole point is let clients to see an estimated price of their used vehicles. To do so they can filter the database on 3 dropdown buttos(each for collum).
They first select the brand, then the model and then the year of manufacture.
NOW HERE IS MY PROBLEM
I want to show the price, which is unique for the previous filtering, on a text (ESTIMATED PRICE) right after the 3rd dropdown is changed.
But I coundn’t get it done yet.
The only thing I could figure out is : setting and aditional dropDown button #4, and set the options based on previos filter variables.
For example: Select VOLKSWAGEN , then choose POLO finally 2016… This should trigger the function that set the text to $600.000.
You can see my code right now. Thank you very much in advance.
import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1() {
wixData.query("PreciosAutos")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.title);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function dropdown1_change(event, $w) {
uniqueDropDown2();
$w("#dropdown2").enable();
}
function uniqueDropDown2() {
wixData.query("PreciosAutos")
.contains("title", $w("#dropdown1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.modelo);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function dropdown2_change(event) {
uniqueDropDown3();
$w("#dropdown3").enable();
}
function uniqueDropDown3() {
wixData.query("PreciosAutos")
.contains("modelo", $w("#dropdown2").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown3").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.fabricacion);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function dropdown3_change(event) {
uniqueDropDown4()
$w('#dropdown4').show()
}
function uniqueDropDown4() {
wixData.query("PreciosAutos")
.contains("fabricacion", $w("#dropdown3").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown4").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.precio);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
If somebody has a hint on how to do this I would be really aprettiate!
Let me know if I can help you with anything else!
Bye!
