Integrations / Platforms / Magento 1 / Front-End Custom Events
Aug. 23, 2019

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, algoliaBundle)
    • can by used to modify default data sources
    • 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', function(sources, algoliaClient, algoliaBundle) {
  // Modify default sources, then return them
  return sources;
});

algolia.registerHook('beforeAutocompleteOptions', function(options) {
  // Modify default options, then return them
  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 these hook(s) in your JavaScript file, you can directly modify their parameters which must be returned back from the method.

Example of beforeInstantsearchInit(instantsearchOptions) hook:

1
2
3
4
5
// Modify default `instantsearchOptions`
algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions) {
  // Modify default options, then return them
  return 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', function(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 in 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.

Did you find this page helpful?