-
Notifications
You must be signed in to change notification settings - Fork 10
Description
Related Attributes
fs-list
Describe the bug
I am looking forward to being able to set a filter depending on URL parameters.
I added some JS to adapt the filter programmatically depending on the parameter.
It filters the list without updating the checkboxes.
Tried using the name or the slug.
I even tried checking the checkbox programmatically. But it always doesn't work for one of the checkboxes, can't see why?? (with 2 categories, only one gets checked; with 3 categories, only two get checked).
To Reproduce
- Clone List project
- Add checkbox filter from Filter project
- Add custom code below to auto filter at page start
- See error
Expected behavior
The checkbox, which is responsible for filtering the list, should reflect the filter status at all times.
Screenshots
If applicable, add screenshots to help explain your problem.
Links
https://finsweet-c4846f.webflow.io/test-double-slider?category=Toto
Additional context
My code:
<script>
window.FinsweetAttributes = window.FinsweetAttributes || [];
window.FinsweetAttributes.push(['list', (listInstances) => {
const param = new URLSearchParams(window.location.search).get("category");
if (!param) return;
// Update the checkboxes
// Select all inputs with type checkboxes
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checkboxFound= false;
checkboxes.forEach(checkbox => {
// Check if the data-name attribute matches the URL parameter value
if (checkbox.getAttribute('fs-list-value') === param) {
checkbox.checked = true;
checkbox.dispatchEvent(new Event('change', { bubbles: true }));
checkboxFound = true;
}
});
if(checkboxFound){
// Update the filter itself
listInstances.forEach(listInstance => {
const filters = listInstance.filters.value;
// On cherche dans TOUS les groupes/conditions
filters.groups.forEach(group => {
group.conditions.forEach(condition => {
// On ne touche qu'à la condition voulue
if (condition.fieldKey === "category") {
// Appliquer la valeur provenant de l'URL
condition.value = param;
listInstance.triggerHook('filter');
}
});
});
});
}
}]);
</script>