Advanced Element Filtering
Add advanced filtering for CMS Collection List items and static elements on your Webflow page, using custom attributes and a lo-code JavaScript filter function.
Webflow has a powerful conditional visibility feature, however sometimes it falls short when you have complex rules.
WFU’s advanced filtering feature allows you to expand on this. Choose which elements you want to be visible depending on simple javascript expression or a javascript function.
- Display certain elements only between certain hours of the day, certain days of the week, seasonally, etc.
- Show collection list items based on the time of day.
- Show employees who have a birthday today, or this month.
All of this and much more can be done by simply attaching WFU’s filtering attributes to any element. WFU will evaluate the expression or the function, and display your element if these return
true.Use
wfu-filter with a specific formula to suppress the current node.wfu-filter = new Date().getHours() >= 12
Best used for short and simple expressions.
Use
wfu-filter-func to call a function you define, and to pass in the element as a jQuery object. From there, you can perform any checks or calculations you want and then return true if you’d like the element to display, or false if you want to hide it.wfu-filter-func = isBirthday
And then define a function by that name, e.g.;
<script>
function isBirthday(item) {
var today = new Date();
var date = new Date($(item).find("data").attr("date"));
console.log(today);
console.log(`${today.getMonth()} ${date.getMonth()}`);
console.log(`${today.getDate()} ${date.getDate()}`);
// Check to see if birthday is THIS MONTH
if (
(today.getMonth() == date.getMonth())
// && (today.getDate() == date.getDate())
)
return true;
return false;
}
</script>
Make sure to give it a single parameter, as it will be passed the element you are evaluating in the filter.
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this CSS script to the HEAD of your site or page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-html.css">
Add this JS reference to the BODY of your site or page.
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/nocode/webflow-html.js"></script>
See above for details.