Signature
Import
About this widget
ThequeryRuleContext
widget lets you apply ruleContexts
based on filters to trigger context-dependent rules.
Rules offer a custom experience based on contexts.
You might want to customize the users’ experience based on the filters of the search
(for example, they’re visiting the “Mobile” category, they selected the “Thriller” genre, etc.)
This widget lets you map these filters to their associated rule contexts,
so you can trigger context-based rules on refinement.
Examples
JavaScript
Options
The filters to track to trigger rule contexts.Each filter is a function which name is the attribute you want to track.
They receive their current refinements as arguments.
You can either compute the filters you want to track based on those, or return static values.
When the tracked values are refined, it toggles the associated rule contexts.The added rule contexts follow the format
ais-{attribute}-{value}
(for example ais-genre-Thriller
).
If the context of your rule follows another format,
you can specify it using the transformRuleContexts
option.Values are escaped so that they only consist of alphanumeric characters, hyphens, and underscores.JavaScript
A function to apply to the rule contexts before sending them to Algolia.
This is useful to rename rule contexts that follow a different naming convention.
JavaScript
Customize the UI with connectQueryRules
If you want to create your own UI of the queryRuleContext
widget, you can use connectors.
This connector is also used to build the
queryRuleCustomData
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
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
The filters to track to trigger Rule contexts.Each filter is a function which name is the attribute you want to track.
They receive their current refinements as arguments.
You can either compute the filters you want to track based on those, or return static values.
When the tracked values are refined, it toggles the associated rule contexts.The added rule contexts follow the format
ais-{attribute}-{value}
(for example ais-genre-Thriller
).
If the context of your rule follows another format,
you can specify it using the transformRuleContexts
option.Values are escaped so that they only consist of alphanumeric characters, hyphens, and underscores.JavaScript
A function to apply to the rule contexts before sending them to Algolia.
This is useful to rename rule contexts that follow a different naming convention.
JavaScript
Full example
JavaScript