Free Custom Filters for Webflow CMS

Little Tutorial to make custom filters onto DOM elements

STEP 1

Import List.js and RxJS

In Custom Code of your page, inside <head> tag

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>

STEP 2

Write Custom Code

In Custom Code of your page, before </body> tag

<script>
var options = {
  valueNames: [
    'gender',
    'lang',
  ],
};

const masterDivId = 'stroumphs';

const observer = new MutationObserver(function(mutations, MO) {
  const masterDiv = document.getElementById(masterDivId);
  if (masterDiv && masterDiv.childNodes) {
    MO.disconnect(); // stop observing
    handleList();
    return;
  }
});

// start observing
observer.observe(document, {
  childList: true,
  subtree: true,
});

const handleList = function() {
  const itemsList = new List(masterDivId, options);

  const filters = [].reduce.call(
    document.getElementsByClassName('filters'),
    function(acc, el) {
      if (acc[el.id] == undefined) {
        acc[el.id] = new rxjs.BehaviorSubject(undefined);
      }
      rxjs.fromEvent(el, 'change').subscribe(function(event) {
        acc[el.id].next(event.target.value || undefined);
      });
      return acc;
    },
    {},
  );

  document.getElementById('reset').addEventListener('click', function() {
    itemsList.filter();
  });

  const mergedObservable = rxjs.combineLatest.apply(
    null,
    Object.values(filters),
  );

  mergedObservable.subscribe(function(values) {
    itemsList.filter(function(item) {
      const values = item.values();
      return Object.entries(filters).reduce(function(acc, filter) {
        const filterName = filter[0].replace('filter', '').toLowerCase();

        if (!acc) return false;
        if (
          filter[1].getValue() == undefined ||
          values[filterName]
            .toLowerCase()
            .match(filter[1].getValue().toLowerCase())
        ) {
          return true;
        }
        return false;
      }, true);
    });
  });
};
</script>

Options represents keys of your object

The "masterDivId" const is the ID of your div Collection List wrapper

Then your Collection List div should be affect to class ".list" (for list.js to work)

STEP 3

Create Filter Form

In your page create a form with your filters

And affect selector to ".filters" class (to be parsed by the code of step 2). Give them ID corresponding to the key of your collection to filter (ex: filterGender or filterLang)

STEP 4

Add your collection items

Under your collection list, place item with classname corresponding to your keys to filter

the script will try to match filter value to item content (matching filterLang to .lang content)