Hi im creating a car inventory listing page with options to and filter just like below pic. all the filters dropdown options are connected to dataset as a filter function and it work wells on first load.
currently i have 2 issues.
- Not all cars listed is “Deals of the month”, but when it loads, it doesnt show the dark blue banner for the listing that is on sale.
- When the page first loads, info such as manufacture year, brand, model and specifications are displayed correctly. but if i go mess with search button or reset button, all the details will be shown as default text.
Would like to ask how can i fix this problem. Below is my code for this page and also item ID and type for the dataset. I personally think that for issue 1, it is the problem with the IF ELSE statement inside FOREACHITEM. and for issue 2, there is something wrong with search and reset function.
import wixData from 'wix-data';
$w.onReady(function () {
fillincardetails()
});
function fillincardetails() {
$w("#dataset10").onReady(() => {
$w("#repeater10").forEachItem(($item, car, ) => {
let yearbrand = car.yearbuilt + " " + car.brand;
let model = car.model;
let carspectext = car.transmission + " · " + car.fuel + " · " + car.type;
let deals = car.deals
$item('#text18').text = yearbrand;
$item('#text17').text = model;
$item('#text64').text = carspectext;
if (deals === true){
let dealprice = "RM " + String(car.sellpricerm);
let beforedealprice = "RM " + String(car.dealpricerm);
$w('#text63').text = beforedealprice;
$w('#text62').text = dealprice;
$w('#text63').show();
$w('#line2').show();
$w('#box34').show();
} else {
let dealprice = "RM " + String(car.sellpricerm);
$w('#text62').text = dealprice;
$w('#text63').hide();
$w('#line2').hide();
$w('#box34').hide();
}
})
})
}
// lets set what happen when "search" button is clicked
export function searchButton_click(event) {
search();
}
// search function where it will filter the repeater for values from dropdown
function search() {
wixData.query("Properties")
.contains("type",String($w('#dropdown1').value))
.and(wixData.query("Properties").contains("transmission",String($w('#dropdown2').value)))
.and(wixData.query("Properties").contains("fuel",String($w('#dropdown3').value)))
.and(wixData.query("Properties").contains("brand",String($w('#dropdown4').value)))
.and(wixData.query("Properties").contains("title",String($w('#input4').value)))
.and(wixData.query("Properties").contains("deals",String($w('#checkbox1').value)))
.find()
.then(results => {
$w('#repeater10').data = results.items
});
}
// lets set what happen when "reset" button is clicked
export function resetButton_click(event) {
// $w('#propertiesDataset').setFilter(wixData.filter());
// $w("#propertiesDataset").setSort(wixData.sort());
$w('#dropdown1').value=undefined;
$w('#dropdown2').value=undefined;
$w('#dropdown3').value=undefined;
$w('#dropdown4').value=undefined;
$w('#dropdown5').value = undefined;
$w('#input4').value=undefined;
$w('#checkbox1').checked=false;
$w("#dataset10").setSort(wixData.sort().descending("yearbuilt"))
search();
}
// what happens if the "sort" dropdown changes value
$w("#dropdown5").onChange(() => {
let dropdownVal = $w("#dropdown5").value;
//OPTIONS 🎉
if (dropdownVal === "Price: Low to High") { $w("#dataset10").setSort(wixData.sort().ascending("sellpricerm")) } //Price Low to High
if (dropdownVal === "Price: High to Low") { $w("#dataset10").setSort(wixData.sort().descending("sellpricerm")) } // Price High to Low
if (dropdownVal === "Year: Old to New") { $w("#dataset10").setSort(wixData.sort().ascending("yearbuilt")) } // Oldest to Newest
if (dropdownVal === "Year: New to Old") { $w("#dataset10").setSort(wixData.sort().descending("yearbuilt")) } // Newest to Oldest
});
// what happens if the "brand" dropdown changes value
export function dropdown4_change(event) {
fillincardetails()
}
// what happens if the "cartype" dropdown changes value
export function dropdown1_change(event) {
fillincardetails()
}
// what happens if the "transmission" dropdown changes value
export function dropdown2_change(event) {
fillincardetails()
}
// what happens if the "fuel" dropdown changes value
export function dropdown3_change(event) {
fillincardetails()
}
// what happens if the "deals of the month" is ticked
export function checkbox1_change(event) {
fillincardetails()
}
