connectors connectClearRefinements

Description

ClearRefinements connector provides the logic to build a custom widget that will give the user the ability to reset the search state.

This connector provides a refine function to remove the current refined facets.

The behaviour of this function can be changed with widget options. If clearsQuery is set to true, refine will also clear the query and excludedAttributes can prevent certain attributes from being cleared.

Usage

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

const makeClearRefinements= instantsearch.connectors.connectClearRefinements(
  function renderFn(
      renderOpts: ClearRefinementsRenderingOptions,
      isFirstRendering: boolean) {
    // render the custom ClearRefinements widget
  }
);

const  customClearRefinements = makeClearRefinements(instanceOpts: CustomClearRefinementsWidgetOptions);
search.addWidget(customClearRefinements);

Connector options

ClearRefinementsRenderingOptions

• refinefunction

  Triggers the clear of all the currently refined values.

• hasRefinementsboolean

  Indicates if search state is refined.

• createURLfunction

  Creates a url for the next state when refinements are cleared.

• widgetParamsObject

  All original CustomClearRefinementsWidgetOptions forwarded to the renderFn.

CustomClearRefinementsWidgetOptions

• 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.

Example

// custom `renderFn` to render the custom ClearRefinements widget
function renderFn(ClearRefinementsRenderingOptions, isFirstRendering) {
  var containerNode = ClearRefinementsRenderingOptions.widgetParams.containerNode;
  if (isFirstRendering) {
    var markup = $('<button id="custom-clear-all">Clear All</button>');
    containerNode.append(markup);

    markup.on('click', function(event) {
      event.preventDefault();
      ClearRefinementsRenderingOptions.refine();
    })
  }

  var clearRefinementsCTA = containerNode.find('#custom-clear-all');
  clearRefinementsCTA.attr('disabled', !ClearRefinementsRenderingOptions.hasRefinements)
};

// connect `renderFn` to ClearRefinements logic
var customClearRefinementsWidget = instantsearch.connectors.connectClearRefinements(renderFn);

// mount widget on the page
search.addWidget(
  customClearRefinementsWidget({
    containerNode: $('#custom-clear-all-container'),
  })
);

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