Integrations / Platforms / Magento 1 (deprecated) / Frontend Custom Events

Frontend Custom Events

This integration and its documentation are deprecated and no longer supported.

The Algolia Search for Magento 1 extension is no longer supported (and Magento 1 has reached end of life). However, Algolia does offer a supported extension for Magento Open Source and Adobe Commerce.

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:

Copy 
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:

Copy 
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:

Copy 
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.

However, some widgets, like hits, can not be added multiple times. In that case, you should add the widget manually in beforeInstantsearchStart:

Copy 
1
2
3
4
5
6
7
8

algolia.registerHook('beforeInstantsearchStart', function (search) {
  search.addWidget(
    algoliaBundle.instantsearch.widgets.hits({
      container: '#custom-second-hits',
    })
  );
  return search;
});

Example usages

You can use this section as inspiration for your customization. These examples are not definitive and will need to be adjusted to suit your needs.

Add custom rules context to InstantSearch

If you have to add new rules contexts for some of your custom query rules, please use the frontend hook beforeInstantsearchInit. We recommend you to append your new context to the preconfigured ones added by the extension, as follows:

Copy 
1
2
3
4
5
6
7
8
9

algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions, algoliaBundle) {

  // Adding a custom Query Rule context
  var newQueryRuleContext = 'new-custom-query-rule-context';
  instantsearchOptions.searchParameters.ruleContexts.push(newQueryRuleContext);

  return instantsearchOptions;

});

Prevent an empty search with InstantSearch

You can leverage the beforeInstantsearchInit event hook to modify the instantsearchOptions. By adding the createAlgoliaClient function to this object, you can define logic you need to use your own search client instead of the default one. In the following example, we utilize this to only perform a search when a non-empty query is submitted.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions, algoliaBundle) {

  instantsearchOptions.createAlgoliaClient = function(algoliasearch, appId, apiKey) {
    
    var algoliaClient = algoliasearch(appId, apiKey);
    return {
      search: function(queries) {
        if (queries.some(function(query) {
          return query.params.query.length > 0;
        }))
        {
          return algoliaClient.search(queries);
        }
    
        return Promise.resolve({
          results: queries.map(() => ({
            hits: [],
            nbHits: 0,
            processingTimeMS: 0,
           })),
        });
      },
      // required for v1
      initIndex: function() {
        return algoliaClient.initIndex(arguments);
      },
      addAlgoliaAgent: function() {
        return algoliaClient.addAlgoliaAgent(arguments);
      }
    };
  }

  return instantsearchOptions;

});
Previous
Instant search page customization
Next
Dispatched backend events
Did you find this page helpful?