widgets currentRefinements

Description

The currentRefinements widget has two purposes give the user a synthetic view of the current filters and the ability to remove a filter.

This widget is usually in the top part of the search UI.

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.currentRefinements({ 
  container: string|HTMLElement, 
  includedAttributes: [Array<string>], 
  excludedAttributes: [Array<string>], 
  cssClasses: [CurrentRefinementsCSSClasses], 
  transformItems: [(Array<object>) => Array<object>], 
}: CurrentRefinementsWidgetOptions);

search.addWidget(widget);

Options

CurrentRefinementsWidgetOptions

• containerstring|HTMLElement

  The CSS Selector or HTMLElement to insert the widget

• includedAttributes[Array<string>]

  The attributes to include in the refinements (all by default)

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

  The attributes to exclude from the refinements

• cssClasses[CurrentRefinementsCSSClasses]

  The CSS classes to be added

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

  Function to transform the items passed to the templates.

CurrentRefinementsCSSClasses

• root[string]

  CSS classes added to the root element.

• list[string]

  CSS classes added to the list element.

• item[string]

  CSS classes added to the item element.

• label[string]

  CSS classes added to the label element.

• category[string]

  CSS classes added to the category element.

• categoryLabel[string]

  CSS classes added to the categoryLabel element.

• delete[string]

  CSS classes added to the delete element.

Example

search.addWidget(
  instantsearch.widgets.currentRefinements({
    container: '#current-refinements',
    includedAttributes: [
      'free_shipping',
      'price',
      'brand',
      'category',
    ],
  })
);

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