Filter Manager

filter manager is a helper class that takes care of the state of filters what filters are currently selected and what should be sent it can be passed to listfilters() and then the result is automatically applied to the state modifier applyfilterwithmanager() can base used to apply the current state of filters to query here is an pseudo code example how to use filter manager first there is initialization and the search import { klevufetch, search, // search query function listfilters, // list filter modifier applyfilterwithmanager, // apply filters modifier filtermanager // the manager } from "@klevu/core" // first initialize filter manager you can do it in global scope or your frameworks component initialization const manager = new filtermanager() // this is the function you would be calling to make the search async function mysearch() { const result = await klevufetch( search( "hoodies", // search term {}, // search parameters listfilters({ filtermanager manager // pass manager to list filters so that it will be populated by results }), applyfilterwithmanager(manager) // when requesting filters use managers current state in first run its empty ) ) } now you have tools to manage filters with filtermanager to render currently available filters you can use manager options and manager sliders sliders include numerical values like price for (const option of manager options) { console log(option) // you render code } to toggle between options you can use toggleoption method manager toggleoption(option key, option name) event this will change the state of option selection in the filter manager now you have to just call mysearch() again to fetch results of changed state you can do this directly by calling the function or listening a events (analytics) docid\ wj 5a 1sfbwhiq45qvvlq import { klevudomevents } from "@klevu/core" // add klevudomevents enumeration to project // function to run when filter selection is updated const handlefilterupdate = () => { mysearch() } // attach event listener document addeventlistener( klevudomevents filterselectionupdate, handlefilterupdate ) // don't forget remove event listener in your component destructor document removeeventlistener(handlefilterupdate) clearing all selections to clear all or single category option selections you can use clearoptionselections function manager clearoptionselections("size") // to clear all selections in "size" option manager clearoptionselections() // to clear all selections exporting and importing selections from url filtermanager has methods to load current state into url query parameters and a method to load current manager tourlparams(); // returns query string for example o color=red manager readfromurlparams(new urlsearchparams("o color=red")); // reads parameters from a string