Front-end custom events

Autocomplete menu events

You can adjust all the logic of the autocomplete.js integration by registering a custom methods in your JS file.
Registering of a hooks can be done by using algolia JS object.

You can learn how to add a custom JS file in a Create a custom extension tutorial.

Possible hooks:

  • beforeAutocompleteSources(sources, algoliaClient)
    • can by used to modify default datasources
    • the hook must return sources variable
  • beforeAutocompleteOptions(options)
    • can by used to modify default options of autocomplete menu
    • the hook must return options variable

Those hooks will be triggered right before it initializes the autocomplete feature.

Example of the hooks:

algolia.registerHook('beforeAutocompleteSources', function(sources, algoliaClient) {
	// modify default sources

	return sources;

algolia.registerHook('beforeAutocompleteOptions', function(options) {
	// modify default options

	return options;

Instant search page events

You can adjust all the logic of the InstantSearch.js integration by registering a couple of custom hooks:

By registering this hook(s) in your JS file, you can directly modify it’s parameter which must be returned back from the method.

Example of beforeInstantsearchInit(instantsearchOptions) hook:

algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions) {
	// modify default instantsearchOptions

	return instantsearchOptions;

Example on how to add a new toggle widget to instant search page:

algolia.registerHook('beforeWidgetInitialization', function(allWidgetConfiguration) {
    var wrapper = document.getElementById('instant-search-facets-container');

    var widget = {
        container: wrapper.appendChild(createISWidgetContainer('in_stock')),
        attributeName: 'in_stock',
        label: 'In Stock',
        values: {
            on: 1
        templates: {
            header: '<div class="name">Is on stock</div>'

    if (typeof allWidgetConfiguration['toggle'] === 'undefined') {
        allWidgetConfiguration['toggle'] = [widgetConfig];
    } else {

    return allWidgetConfiguration;

All default widgets can be found in allWidgetConfiguration object and can be removed or modified in this method.