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 hook can be done by using algolia JS object.

You can learn how to add a custom JS file in the 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 the default options of the autocomplete menu
  • the hook must return an options variable

These hooks will be triggered right before the initialize the autocomplete feature.

Example of the hooks:

1
2
3
4
5
6
7
8
9
algolia.registerHook('beforeAutocompleteSources', (sources, algoliaClient) => {
  // modify default sources, then return it
  return sources;
});

algolia.registerHook('beforeAutocompleteOptions', options => {
  // modify default options, then return it
  return options;
});

Instant search page events

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

• beforeInstantsearchInit(instantsearchOptions)
  • can be used to modify default instant search options
• beforeWidgetInitialization(allWidgetConfiguration)
  • can be used to add/remove/modify any widget(s)
• beforeInstantsearchStart(search)
  • can be used to modify the instantsearch instance before the call of the start() method
• afterInstantsearchStart(search)
  • can be used to modify the instantsearch instance after the call of the start() method

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:

1
2
// modify default instantsearchOptions
algolia.registerHook('beforeInstantsearchInit', instantsearchOptions => instantsearchOptions);

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
algolia.registerHook('beforeWidgetInitialization', allWidgetConfiguration => {
  const wrapper = document.getElementById('instant-search-facets-container');

  const widgetConfig = {
    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 {
    allWidgetConfiguration['toggle'].push(widgetConfig);
  }

  return allWidgetConfiguration;
});

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