How to Add an External Autocomplete Source

There are situations where you may want to add an external data source to your drop-down menu. For example, you may want to integrate WordPress posts into your Magento site’s autocomplete. To achieve this, you’ll have to create a new index with your data and hook this into your autocomplete search.

Create a New Index

The data you want to display in an autocomplete menu needs be stored in a separate Algolia index. This index can be created via Algolia’s PHP API client, uploaded as a JSON file via Algolia’s index explorer, or created by third-party applications like WordPress and ZenDesk. You can find more information about index creation in our quick start guide.

Create an Autocomplete Template

To display records from a new index, you have to create a template that displays a single record. You can use our attribute.phtml file as a starting point for your template.

You can copy this file to any filename you want it to be and edit it as needed. Just make sure to edit the value of the id attribute in the <script> tag when creating a new template to something unique.

With your template created, you have to register it in the algoliasearch.xml layout file to tell the extension it should include the template. Locate the following section in algoliasearch.xml:

1
2
3
4
<algolia_search_handle_autocomplete>
  <!-- ... -->
  <!-- INSERT YOUR CUSTOM TEMPLATES HERE -->
</algolia_search_handle_autocomplete>

And add a reference to your template file:

1
2
<!-- Example: -->
<block type="core/template" template="path/to/your_custom_template.phtml" name="algolia-your-custom-template-name"/>

Create a New Data Source

The last step is to add a new data source for your autocomplete search. You have to define an algoliaHookBeforeAutocompleteStart method in your JavaScript file.

To learn how to create a new JavaScript file and load it into your Magento store, please refer to our How to customize the extension tutorial.

The algoliaHookBeforeAutocompleteStart method is called before initialization of the autocomplete feature. The method accepts three parameters: sources, options, and algoliaClient.

An example implementation of this method could be as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
algolia.registerHook('beforeAutocompleteSources', (sources, options, algoliaClient) => {
  // Initialize the newly created index
  const customIndex = algoliaClient.initIndex("your_index_name");
  const customIndexOptions = {
    hitsPerPage: 4
  };

  // id_of_your_template should be the value of the ID attribute in the <script> tag of your template
  const customTemplate = $('#id_of_your_template').html();

  // Append the new source to the sources array
  sources.push({
    source: $.fn.autocomplete.sources.hits(customIndex, customIndexOptions),
    templates: {
      suggestion(hit) {
        return algoliaBundle.Hogan.compile(customTemplate).render(hit);
      }
    }
  });

  return sources;
});

You’re now able to search an extra index.

For more information about autocomplete data sources and other autocomplete.js features, please refer to our autocomplete.js tutorial