Advanced Element Filtering ❺

Filtering any element or Collection List using custom logic.

Webflow has powerful collection list filtering and conditional visibility features, however they fall short when you have complex or dynamic rules, or in specific scenarios such as nested lists.

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

Use Cases

Here are a few ways you could use it;

Filter nested collection lists.
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 or a CSS selector that defined your filtered view.

Elements will be displayed If the evaluation returns true.

`wfu-filter-match` attribute

This attribute allows you to define a CSS selector as your matching criteria, and it will only show elements which match. 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 or an option 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, to 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 are highly flexible but can be complex as they can 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 short JavaScript formula for evaluation. If it evaluates to true, the element will be displayed.

This one will display the item only if the visitor's local system clock has a time between 12 noon and midnight.

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

Best used for short and simple expressions, for more complex evaluations, use wfu-filter-func.

`wfu-filter-func` attribute

Use wfu-filter-func to call a JavaScript 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 = isBirthdayMonth

And then define a function by that name, e.g.;

<script>
  function isBirthdayMonth(item) {
    
    var today = new Date();
    // get the birthday from the [data-date] attribute 
    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()) // or today 
    )
      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>

Tips;

Make sure to give your function a single parameter, as it will be passed the element you are evaluating in the filter. Use that element to make your filter decision.
Keep the function name simple and unique so you can reference it easily.
Name are case-sensitive.
The evaluation function you create must be top level. Place it in your head or body code, directly inside of <script> tags. SA5 will reference it from the window object.

Last updated 1 month ago