I’m trying to create a custom filter connected to a dynamic list.
I found this article https://www.wix.com/velo/example/mega-search and I copied the code and modified it according to my needs.
I only changed my parameters, the code is exactly the same.
Everything works except the price sliders.
Someone can help me?
THIS IS MY CODE
import wixData from 'wix-data';
import { debounce } from 'lodash';
const collectionName = 'macchine';
const debounceTime = 500;
$w.onReady(function () {
initComps();
initRepeater();
buildFiltersAndPopulateRepeater();
});
async function initComps() {
// populate iLocation dropdown
const res = await wixData.query(collectionName)
.ascending('marca')
.distinct('marca')
.then((locationData) => {
return locationData.items.map((location) => {
return {
value: location,
label: location
}
});
});
$w('#dropMarca').options = res;
// change max price according to type selection
$w('#iAnticipo').onChange((event) => {
$w('#iPrezzoMax').max = event.target.value === 'Sì' ? 2000 : 3000;
});
// bind all input elements
const componentsTypeArray = ['RadioButtonGroup', 'Dropdown', 'Slider', 'CheckboxGroup'];
const debounceFunction = debounce(buildFiltersAndPopulateRepeater, debounceTime);
componentsTypeArray.forEach((compType) => {
const compArray = $w(compType);
compArray.forEach((comp) => {
comp.onChange((event) => {
debounceFunction();
});
});
});
}
async function buildFiltersAndPopulateRepeater() {
let dataQuery = wixData.query(collectionName);
dataQuery = dataQuery.eq('anticipo', $w('#iAnticipo').value);
if ($w('#dropMarca').value) {
dataQuery = dataQuery.eq('marca', $w('#dropMarca').value);
}
// sliders
dataQuery = dataQuery.ge('prezzo', $w('#iPrezzoMin').value);
if ($w('#iPrezzoMin').value > 0) {
dataQuery = dataQuery.le('price', $w('#iPrezzoMax').value);
}
// multiple selection
$w('#iCheckbox').value.forEach((selectedOption) => {
dataQuery = dataQuery.eq(selectedOption, true);
})
$w('#repListaAuto').data = await dataQuery.find().then((res) => res.items);
}
function initRepeater() {
$w('#repListaAuto').onItemReady(($item, itemData) => {
$item('#immagineMacchina').src = itemData.foto;
$item('#nomeMacchina').text = itemData.nomeauto;
$item('#cavalliMacchina').text = String(itemData.cavalli);
$item('#anticipoMacchina').text = itemData.anticipo;
$item('#prezzoMacchina').text = '€' + String(itemData.prezzo);
});
}
THIS IS MY DATASET
THIS IS THE FILTER