Advanced FS Filter

Here are some more advanced FS Filter + FS Load setup tips.

Query Params Configuration

https://discourse.webflow.com/t/finsweet-attribuutes-v2-list-filter-tag-relating-to-search-bar-shows/320941

There is an attribute “fs-list-tagfield” that you can add to the search input element (the one with “fs-list-field=‘*’”) & set equal to whatever custom text you want like “Search”.
- Luke Vanhoezebrouck

‍

All notes below relate to v1.

Deferring FS Filter

Untested by our team, but noted here for future needs.

Finsweet's Luis commented that in advanced use cases it may be advantageous to delay the initialization of FS Filter until after FS Load has loaded everything.

That can be achieved by adding this attribute to the FS Filter script element-

defer fs-attributes-preventload='true'

and then initializing FS Filter within the CMS Load callback.

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    console.log('cmsload Successfully loaded!');

    // The callback passes a `listInstances` array with all the `CMSList` instances on the page.
    const [listInstance] = listInstances;

    window.fsAttributes.cmsfilter.init();

    // The `renderitems` event runs whenever the list renders items after switching pages.
    listInstance.on('renderitems', (renderedItems) => {
      console.log(renderedItems);
    });
  },
]);
</script>

FS Filter API

Finsweet CMS Filter has an API which allows you to handle callback events and perform certain actions.

The basic framework looks like;

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsload Successfully loaded!');

      const [filterInstance] = filterInstances;

	  // YOUR CODE HERE

    },
  ]);
</script>

Within that setup function, you can setup additional event handlers for specific tasks;

RenderItems

Runs whenever the list renders items after switching pages

filterInstance.listInstance.on('renderitems', (renderedItems) => {
  console.log('renderitems event', renderedItems);
});

AddItems

filterInstance.listInstance.on('additems', (addedItems) => {
  console.log('additems event', addedItems);
}); 

SwitchPage

filterInstance.listInstance.on('switchpage', (targetPage) => {
  console.log('switchpage event', 'The user has navigated to the page number ', targetPage);
});

References

https://forum.finsweet.com/t/load-filter-with-scripts/771/4

‍