I’m trying to use some filters of a collection list item only on a certain breakpoint. Is this possible?
I know I can duplicate the hole collection and use other filters and use the display function to show and hide this, but I don’t think this is the best way, because even if it is on display: none;, it still needs to be loaded and this will have impact on the loading time.
if($(window).width() < 992) {
add your filters code here.
this will work on tablets and mobiles phone. Just add screen size number instead of 992
}```
Let me know if you need any help.
I’m rethinking some of the requirements and how to make certain features more accessible, but at the moment you’d add the library references as described in the doc, and then add a custom attribute to your Collection Item element of;
wfu-filter-func = filterFunc
And you’d write your filter function in the </body> custom code. It would look something like;
function filterFunc(elem) {
if($(window).width() < 992) {
if ( CONDITION TO HIDE THIS ITEM )
return false; // hide this item at this breakpoint
}
return true; // make this item visible
}
If you get stuck, you can share your readonly link and we may be able to help.