I'm using in one page 3 SXA drop down filters (category, services, activity), search result and a reset button that clears the filters in the bellow script:

function forceReset(){
    if ($xa(".clear-filter").length > 0) {

$xa(document).ready(function () {
    //console.log("page loaded");
    if ($xa(".reset-btn").length > 0) {

        $xa(".reset-btn").click(function () {




The button successfully holds the 3 clear buttons of the filters using .clear-filter class and fires click event of each filter (fully tested) but still:

  1. when I use each filter independently of the other 2 filters and then clear only category filter clears but activity and services filters they don't clear.

  2. when I combine category filter with any other filter and then clear they don't clear.

  3. when I combine any filters together they don't clear.

Hint: All 3 filters and search result has the same signature

Sitecore version: 9.0.2 SXA version: 1.7


If I were you, I would try to use as much of existing logic as it is possible. As you probably notice it all facet filters as using hash parameters to store selected values. The best way would be to clear needed hash parameters. In that way:

  • Backbone router will notify all renderings that hash has been changed (will trigger hashChanged event)
  • renderings will clear their values automatically
  • keep in mind that you don't need to have .clear-filter buttons on each of renderings (it depends on the configuration)

I might be useful to take a look at component-search-query.js and component-search-router.js scripts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.