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
