How to reset sliders using the filterManager?

[z0n]

Hi everyone, I'm currently trying to implement a filter selection using the Klevu SDK and React.

In the filter list, I want to display all currently selected filters which is easily done using filterManager.selectedFilters().

Now I'd like to make it possible to clear each filter option when clicking it. For option filters, this is again easily done using filterManager.deselectOption(filter.key, filter.value).

For slider filters, I'm not sure how to do it. I tried to implement it myself with a custom function but this isn't doing anything:

import { FilterManager } from '@klevu/core';

export const resetSlider = (filterManager: FilterManager, key: string) => {
  const currentFilterManagerState = filterManager.getCurrentState();
  const updatedFilters = currentFilterManagerState.filters.filter(filter => filter.key !== key);
  const newState = { ...currentFilterManagerState, filters: updatedFilters };
  filterManager.setState(newState);
};

I'd be happy for any advice.

Edit: My custom function does seem to work, the slider is cleared when removing an option filter afterwards. I guess I'm missing a DOM event to let Klevu know I removed the slider filter?

Edit 2: I think I've got it:

import { FilterManager, KlevuDomEvents } from '@klevu/core';

export const resetSlider = (filterManager: FilterManager, key: string) => {
  const currentFilterManagerState = filterManager.getCurrentState();
  const updatedFilters = currentFilterManagerState.filters.filter(filter => filter.key !== key);
  const newState = { ...currentFilterManagerState, filters: updatedFilters };
  filterManager.setState(newState);
  document.dispatchEvent(
    new CustomEvent(KlevuDomEvents.FilterSelectionUpdate, {
      detail: {
        key,
      },
    }),
  );
};

Is this the right way to do it?
Feel free to close this when it's fine like I did it 😄

[nikhil-narayana-klevu]

@z0n I want to understand what you are trying to do a little better.

1. To reset option filters, the approach is correct and it would uncheck the filter.
2. For Sliders, do you want to reset it to original value? or hide it from the page? the code you pasted would remove it from FilterManager and I believe would hide it from the page when the FilterSelectionUpdate event is handled by your UI unless you have handled it there as well.

For sliders, another way could be to check if the start/end value matches the min/max values which can be a way to check if they were changed by the user and use this to change whats needed.

[z0n]

Hi @nikhil-narayana-klevu!

Basically: I'm showing a list of currently applied filters (options and sliders) to the user and want to provide a quick way to disable/clear each one of them.
For the slider, it's a price range which can be applied by the user. The function I needed was to completely clear this slider so the products won't be filtered by a price range anymore. So basically the same thing as filterManager.deselectOption(), just for the slider. After clearing it, the user can select a new price range if they want. As far as I can see, my function does what I need :slightly_smiling_face:

[nikhil-narayana-klevu]

Alright, if it works for you. Closing this.