Advanced Element Filtering ❺

Filtering any element or Collection List using custom logic.

Webflow has a powerful conditional visibility feature, however it falls short when you have complex or dynamic rules.

SA5's advanced filtering allows you to filter any element using a simple JavaScript expression or evaluation function.

Use Cases

Here are a few ways you could use it;

Display certain elements only between certain hours of the day, certain days of the week, months or seasons of the year, etc.
Show employees who have a birthday today, or this month.

Demonstration

Getting Started

First, add the library as detailed in Quick Start.
Add the attributes below that you want for your desired behavior.

Attributes

The basic approach is to attach the filter attribute to the elements you want to conditionally display, and then add simple JavaScript logic that is evaluated.

Elements will be displayed If the evaluation returns true.

`wfu-filter-match` attribute

Specify a CSS selector to match. If the element matches the selector, the element will be displayed. This is most powerful when paired with Webflow's CMS-bound custom attributes, and an evaluation string.

For example, suppose your CMS items have a numeric field indicating the day of week. In JavaScript convention, 0 is Sunday, 1 is Monday, through to 6 is Saturday.

If you store that number in a CMS field and then bind it to a custom attribute, you can easily create a custom attribute on your Collection Item of e.g. weekday = 2

You can then use the SA5's match filter attribute with a CSS selector and a JavaScript template literal, create a match filter like this;

wfu-filter-match = [weekday='${new Date().getDay()}']

This indicates that the element should be displayed IF the weekday attribute is equal to today's weekday number, according the the visitor's local system clock.

The constructions can be complex as they involve 3 combined syntaxes;

CSS selectors, which are very powerful. In this example, our selector takes the form [weekday='2'] which matches all elements that have the weekday attribute, with the value 2.
Template literals, the ${ ... } part, which allows us to embed evaluated JS content such as today's weekday.
The JavaScript expression, in this case new Date().getDay() which returns today's weekday number 0 - 6.

This feature is useful in very compact situations where your filter-match expression is concise. If it gets long or complex, use wfu-filter-func instead.

`wfu-filter-eval` attribute

Specify a formula for evaluation. If it evaluates to true, the element will be displayed.

wfu-filter-eval = new Date().getHours() >= 12

Best used for short and simple expressions.

`wfu-filter-func` attribute

Use wfu-filter-func to call a function you define, and to pass in the element as an HTML element. 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>

Here's another example that filters based on an in-text match;

<script>
window.filterText = function(e) {
    return e.textContent.toLowerCase().includes("blog"); 
}
</script>

Make sure to give it a single parameter, as it will be passed the element you are evaluating in the filter. The evaluation function you create must be top level, so it will be referenced from the window object.

Last updated 6 days ago