connectors connectClearAll

Edit this page

Description

ClearAll 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 excludeAttributes can prevent certain attributes from being cleared.

Usage

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

const makeClearAll= instantsearch.connectors.connectClearAll(
function renderFn(
renderOpts: ClearAllRenderingOptions,
isFirstRendering: boolean) {
// render the custom ClearAll widget
} );

const customClearAll = makeClearAll(instanceOpts: CustomClearAllWidgetOptions);
search.addWidget(customClearAll);

Connector options

ClearAllRenderingOptions

  • 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 CustomClearAllWidgetOptions forwarded to the renderFn.

CustomClearAllWidgetOptions

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

    Every attributes that should not be removed when calling refine().

  • clearsQuery[boolean]
    Default value: false

    If true, refine() also clears the current search query.

Example

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

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

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

// connect `renderFn` to ClearAll logic
var customClearAllWidget = instantsearch.connectors.connectClearAll(renderFn);

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


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