widgets clearRefinements

Description

The clear all widget gives the user the ability to clear all the refinements currently applied on the results. It is equivalent to the reset button of a form.

The current refined values widget can display a button that has the same behavior.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.clearRefinements({ 
  container: string|HTMLElement, 
  includedAttributes: [Array<string>], 
  excludedAttributes: [Array<string>], 
  transformItems: [(Array<object>) => Array<object>], 
  templates: [ClearRefinementsTemplates], 
  cssClasses: [ClearRefinementsCSSClasses], 
}: ClearRefinementsWidgetOptions);

search.addWidget(widget);

Options

ClearRefinementsWidgetOptions

• containerstring|HTMLElement

  CSS Selector or HTMLElement to insert the widget.

• includedAttributes[Array<string>]
  Default value: []

  The attributes to include in the refinements to clear (all by default). Cannot be used with excludedAttributes.

• excludedAttributes[Array<string>]
  Default value: ['query']

  The attributes to exclude from the refinements to clear. Cannot be used with includedAttributes.

• transformItems[(Array<object>) => Array<object>]

  Function to transform the items passed to the templates.

• templates[ClearRefinementsTemplates]

  Templates to use for the widget.

• cssClasses[ClearRefinementsCSSClasses]

  CSS classes to be added.

ClearRefinementsTemplates

• resetLabel[string|Array<string>]

  Template for the content of the button

ClearRefinementsCSSClasses

• root[string|Array<string>]

  CSS class to add to the wrapper element.

• button[string|Array<string>]

  CSS class to add to the button of the widget.

• disabledButton[string|Array<string>]

  CSS class to add to the button when there are no refinements.

Widget

• render[function]

  Called after each search response has been received

• getConfiguration[function]

  Let the widget update the configuration of the search with new parameters

• init[function]

  Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.clearRefinements({
    container: '#clear-all',
    templates: {
      resetLabel: 'Reset everything'
    },
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.