Signature
Import
About this widget
ThequeryRuleCustomData
widget displays custom data from index rules.
You can use this widget to display banners or recommendations returned by rules when they match search parameters.
Examples
JavaScript
Options
The CSS Selector or
HTMLElement
to insert the widget into.A function that receives the list of items before they are displayed.
It should return a new array with the same structure.
Use this to transform, filter, or reorder the items.The function also has access to the full
results
data,
including all standard response parameters
and parameters from the helper,
such as disjunctiveFacetsRefinements
.JavaScript
Templates
You can customize parts of a widget’s UI using the Templates API. Each template includes anhtml
function,
which you can use as a tagged template.
This function safely renders templates as HTML strings and works directly in the browser—no build step required.
For details, see Templating your UI.
The
html
function is available in InstantSearch.js version 4.46.0 or later.The template to use for the custom data.
It exposes the items returned by the rules.The following example assumes a rule returned this custom data.
JSON
HTML output
HTML
Customize the UI with connectQueryRules
If you want to create your own UI of the queryRuleCustomData
widget, you can use connectors.
This connector is also used to build the
queryRuleContext
widget.connectQueryRules
, you can import it with the declaration relevant to how you installed InstantSearch.js.
JavaScript
Create a render function
This rendering function is called before the first search (init
lifecycle step)
and each time results come back from Algolia (render
lifecycle step).
JavaScript
Render options
The items that matched the Rule.
JavaScript
All original widget options forwarded to the render function.
JavaScript
Create and instantiate the custom widget
First, create your custom widgets using a rendering function. Then, instantiate them with parameters. There are two kinds of parameters you can pass:- Instance parameters. Predefined options that configure Algolia’s behavior.
- Custom parameters. Parameters you define to make the widget reusable and adaptable.
renderFunction
, both instance and custom parameters are accessible through connector.widgetParams
.
JavaScript
Instance options
A function that receives the list of items before they are displayed.
It should return a new array with the same structure.
Use this to transform, filter, or reorder the items.The function also has access to the full
results
data,
including all standard response parameters
and parameters from the helper,
such as disjunctiveFacetsRefinements
.JavaScript