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

Hi,

Does anyone know how it’s done in Vue InstantSearch v3 ?

Araldo Fidalgo

Hi,

Vue InstantSearch provides a ais-clear-refinements widget that you can use to create the same experience.

The component provides a scoped slot that you can leverage to customize the UI and behavior. You can use each widget to execute the exposed refine function, then trigger the tab switching behavior.

Best,

Hi,

Hello sarah, thanks for your help.

how can i put the search value of the ais-search-box in current refinement list and in the clear refinement?

Regards,
Araldo Fidalgo

Hi Araldo,

Since you are using Vue.js, you should be able to wrap the ais-clear-refinements and ais-current-refinements components in ais-state-results. You can find more information in our documentation: https://www.algolia.com/doc/api-reference/widgets/state-results/vue/#customize-the-ui.

Best,
Benjamin

Hi,
( in my CodeSandbox i put excluded-attributes in the wrong place)
One solution is to put the prop:
<ais-current-refinements :excluded-attributes="[’’]" />
<ais-clear-refinements :excluded-attributes="[’’]" />

Now the search value from ais-search-box appears in current-refinements and can be clear…

Regards,
Araldo Fidalgo