Hi everyone,
I can’t seem to find it in the APIs - how can I programmatically (using javascript) reset a filter?
I have two dropdowns (category and subcategory) where I want a change in the category dropdown to reset the subcategory. I tried the code below and it’s not working. Can’t share link due to private client but any pointers to the general approach or relevant API would be appreciated.
categoryFilter.addEventListener('change', () => {
subcategoryFilter.selectedIndex = 0;
subcategoryFilter.dispatchEvent(new Event('change', { bubbles: true }));
});
1 Like
Hey @ala.alshaibani !
You can use the List API to modify the Filter object, you only need to clear the values applied by the filter.
I have tested this snippet on my end and this succesfully cleared the filter applied.
<script>
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
'list',
(listInstances) => {
console.log('List Successfully loaded!');
const [listInstance] = listInstances;
const { filters } = listInstance;
const categoryFilter = document.getElementById('YOUR-ID');
categoryFilter.addEventListener('change', (e) => {
listInstance.filters.value.groups[0].conditions[0].value = []; // Replace group and conditions index to match the subcategory filter
});
},
]);
</script>
Could you please adjust it to your setup and let me know how it goes?
You can also DM me the link in case you need the exact code for your setup!
2 Likes
Nice solution .clearItems(indexes?: number[]) , .clearFilters() , .resetSorting() , etc
# `list` Attribute
Supercharge your Webflow CMS and static lists.
## Getting Started
Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
## Accessing the API
To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
```javascript
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
'list',
(listInstances) => {
// Your code goes here.
},
]);
show original
Thank you very much! Is there a documentation that clearly talks about these different objects and their available methods? Perhaps I missed it.
You can find our API docs here!
# `list` Attribute
Supercharge your Webflow CMS and static lists.
## Getting Started
Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
## Accessing the API
To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
```javascript
window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
'list',
(listInstances) => {
// Your code goes here.
},
]);
show original
As well as this tutorial on the API and its customization abilities!
made possible by v2’s reactive properties, but perhaps this raises a good point that there should be some simple method niceties like 