Clear refinements after click

I have made a page which has tabs to get between different options (inside each tab is a different layout e.g. category buttons, date filters or a search box).

Is there a way I can also trigger clearing any current refinements when they click on a tab e.g. of they move from By Category to Search they are starting with the full listings.

Thanks for any help

Guy

 <div class="tabs">
<button class="tablinks active clear" onclick="openTab(event,'Category')">
  <h3>By Category</h3>
</button>
<button class="tablinks clear" onclick="openTab(event,'Calendar')">
  <h3>Calendar</h3>
</button>
<button class="tablinks clear" onclick="openTab(event,'Search')">
  <h3>Search</h3>
</button>

the script for changing tabs is:

function openTab(evt, categoryName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(categoryName).style.display = "block";
  evt.currentTarget.className += " active";
}

For this you can use the connectClearRefinements connector https://www.algolia.com/doc/api-reference/widgets/clear-refinements/js/#connector to create your tabs and call the refine() method each time someone click on a button.

Here’s a codesandbox with this: https://codesandbox.io/s/priceless-microservice-wtgn2

1 Like

Thanks Yannick

Can you put in the codesandbox link please (missing)

OK - this is now working a treat

Is there a way I can also make it clear search terms as well (it doesn’t seem to clear those)

Ho sorry, I forgot the link to the CodeSandbox in my original message :upside_down_face:.
There it is: https://codesandbox.io/s/priceless-microservice-wtgn2

By default the query is not cleared, is it part of the excludedAttributes. https://www.algolia.com/doc/api-reference/widgets/clear-refinements/js/#widget-param-excludedattributes
But you can clear it by setting excludedAttributes to an empty array:

search.addWidgets([
  customClearRefinements({
    container: document.querySelector('#tabs'),
    excludedAttributes: [],
  }),
]);

I updated the CodeSandbox with this change.

Thanks you so much - worked a treat