API Reference / Vue InstantSearch Widgets / ais-clear-refinements
Apr. 11, 2019

ais-clear-refinements

Widget signature
<ais-clear-refinements
  // Optional parameters
  :excluded-attributes="string[]"
  :included-attributes="string[]"
  :transform-items="function"
  :class-names="object"
/>

About this widget

The ais-clear-refinements widget displays a button that lets the user clears every currently applied refinement.

Examples

1
<ais-clear-refinements />

Props

excluded-attributes
type: string[]
default: ["query"]
Optional

The attributes to exclude from the refinements to clear. In the example below, the attribute brand is excluded from the refinements to clear.

1
2
3
<ais-clear-refinements
  :excluded-attributes="['brand']"
/>
included-attributes
type: string[]
default: []
Optional

The attributes to exclude from the refinements to clear. In the example below, the brand attribute is included from the refinements to clear, and only the categories attribute is included in the widget.

1
2
3
<ais-clear-refinements
  :included-attributes="['categories']"
/>
transform-items
type: function
default: x => x
Optional

Receives the items, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <!-- ... -->
  <ais-current-refinements :transform-items="transformItems" />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.sort(item => item.attribute);
      },
    },
  };
</script>
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-ClearRefinements: the root container of the widget.
  • ais-ClearRefinements-button: the button of the widget.
  • ais-ClearRefinements-button--disabled: the disabled button of the widget.
1
2
3
4
5
6
7
<ais-clear-refinements
  :class-names="{
    'ais-ClearRefinements': 'MyCustomClearRefinements',
    'ais-ClearRefinements-button': 'MyCustomClearRefinementsButton',
    // ...
  }"
/>

Customize the UI

default

The slot to override the complete DOM output of the widget.

Scope

  • canRefine: boolean: whether or not there are refinements.
  • refine: () => void: the function to clear all the refinements.
  • createURL: () => void: the function to return a link for the search wihtout the refinements.
1
2
3
4
5
6
7
8
9
10
<ais-clear-refinements>
  <a
    slot-scope="{ canRefine, refine, createURL }"
    :href="createURL()"
    @click.prevent="refine"
    v-if="canRefine"
  >
    Clear all refinements
  </a>
</ais-clear-refinements>
resetLabel

The slot to override the DOM output for the label of the reset button.

1
2
3
<ais-clear-refinements>
  <span slot="resetLabel">Clear refinements</span>
</ais-clear-refinements>

HTML output

1
2
3
4
5
<div class="ais-ClearRefinements">
  <button class="ais-ClearRefinements-button">
    Clear refinements
  </button>
</div>

Did you find this page helpful?