Automatic Filtering

Want to automatically apply a filtering configuration to your CMS filter?

You can filter on;

• On page load, via the querystring
• On an scripting event, like a button click

Querystring params

FS CMS Filter has an _{fs-cmsfilter-showquery=true} option that you can apply to sync the querystring to the filter settings.

For example, it might add;

_{?countries=Spain&categories=Museum}

Check Finsweet's docs for more.

https://finsweet.com/attributes/cms-filter

Button click or scripting event

Another option, if you have an scripting event such as a button click, you can apply your own custom configuration to the filter settings.

Important code notes;

• You will need to set each of the filter settings you want ( text fields, options, checkboxes, list items, etc. ) in code.
• Because script-initiated input changes do not trigger change detection on those fields, you'll need to do that manually, and you'll need to do it on every filter field you modify.

e.g. for a button ID'd _button1, that checks a checkbox ID'd _checkbox1;

// Button clicked
document.getElementById('button1').addEventListener('click', function() {

    // Set a checkbox to checked
    var checkbox = document.getElementById('checkbox1');  
    checkbox.checked = true;

    // Fire a checkbox changed event
    var event = new Event('change');
    checkbox.dispatchEvent(event);

});

Scrolling on filter

If your filter results are in a DIV id _results, you can apply your filtering and then scroll to the results.

  var container = document.getElementById('results');  
  container.scrollIntoView({ behavior: 'smooth' });

Additional Notes

Deferring FS Filter

Untested- but 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.

‍

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

‍