Product:
Wix Classic Editor
Question:
Hi guys, I’m not a web designer (at all) but I built a small site for my job and I’ve got a problem related to some Velo code I copied and modified from a YT tutorial to make a sidebar with some dropdown filters that filter a repeater that is the main element on this page.
The desired behavior is for a selection made from one of the filter dropdowns to appear beneath the dropdown as another little rectangle with a close button and when you click that close button that selection is added back to the dropdown and stops filtering the list. Unfortunately I can’t post a link to the site itself and the “ICECREAM” and “COOKIE” text in the code I’m about to post was substituted to keep it generic. I know this is not the ideal way to request help but it’s not up to me in this case, if anyone has any suggestions based on the code I’d be very grateful.
Right now the //filterICECREAMType filter is working as desired visually where the selections appear beneath the dropdown and return to it once you close them but it’s not actually filtering the main repeater.
I’ve appended “AA” to the end of this line
$w(“#filterCOOKIEArea”).options = $w(“#filterCOOKIEArea”).options.filter((option) => option.value !== AAselection);
for the second of the two dropdown filters in the code pasted below which breaks the visual behavior but restores the actual filtering functionality. Can anyone see what the issue here is and how I can get the desired visual behavior of the first //filterICECREAMType filter without breaking the filtering itself?
// FILTER SIDEBAR:
// filterICECREAMType
$w.onReady(function () {
let selections = ;
const populateRepeater = () => {
$w("#selectionsICECREAMType").data = selections.map((selection) => ({ selection, _id: Math.floor(Math.random() * 1000000).toString() }));
}
$w(“#selectionsICECREAMType”).onItemReady(($item, itemData) => {
$item(“#ITselection”).text = itemData.selection;
$item(“#ITremovebutton”).onClick(() => {
selections = selections.filter((selection) => selection !== itemData.selection);
const newOptions = […$w(“#filterICECREAMType”).options, { label: itemData.selection, value: itemData.selection }];
console.log(newOptions, newOptions.sort())
$w(“#filterICECREAMType”).options = newOptions.sort((a, b) => {
if (a.value > b.value ) {
return 1
}
if (a.value < b.value) {
return -1
}
return 0;
});
populateRepeater();
})
})
$w(“#filterICECREAMType”).onChange((event) => {
const selection = event.target.value;
//option = (label: “example”, value:“example”}
$w(“#filterICECREAMType”).options = $w(“#filterICECREAMType”).options.filter((option) => option.value !== selection);
$w(“#filterICECREAMType”).value = null;
selections.push(selection);
populateRepeater();
$w(“#selectionsICECREAMType”).expand();
})
});
// filterCOOKIEArea
$w.onReady(function () {
let selections = ;
const populateRepeater = () => {
$w("#selectionsCOOKIEArea").data = selections.map((selection) => ({ selection, _id: Math.floor(Math.random() * 1000000).toString() }));
}
$w(“#selectionsCOOKIEArea”).onItemReady(($item, itemData) => {
$item(“#IAselection”).text = itemData.selection;
$item(“#IAremovebutton”).onClick(() => {
selections = selections.filter((selection) => selection !== itemData.selection);
const newOptions = […$w(“#filterCOOKIEArea”).options, { label: itemData.selection, value: itemData.selection }];
console.log(newOptions, newOptions.sort())
$w(“#filterCOOKIEArea”).options = newOptions.sort((a, b) => {
if (a.value > b.value ) {
return 1
}
if (a.value < b.value) {
return -1
}
return 0;
});
populateRepeater();
})
})
$w(“#filterCOOKIEArea”).onChange((event) => {
const selection = event.target.value;
//option = (label: “example”, value:“example”}
$w(“#filterCOOKIEArea”).options = $w(“#filterCOOKIEArea”).options.filter((option) => option.value !== IAselection);
$w(“#filterCOOKIEArea”).value = null;
selections.push(selection);
populateRepeater();
$w(“#selectionsCOOKIEArea”).expand();
})
});