Instant Search Page Customization

Customize the instant search results page.

There are three folders involved in the instant search page customization:

1. your-base-magento-folder/app/design/frontend/base/default/template/algoliasearch
2. your-base-magento-folder/js/algoliasearch
3. your-base-magento-folder/skin/frontend/base/default/algoliasearch

In the first, one you can find all the extension templates. In the others, you’ll find the extension’s JavaScript and stylesheets.

Make sure you aren’t modifying but overriding these files. You can learn how to do that by reading “How to customize the extension” first.

Instant search page wrapper template

The wrapper template contains the layout of instant search results page and all other templates are rendered into the wrapper. To change the layout of the page, navigate to the templates directory and locate the wrapper.phtml file. This file is the standard Magento template.

Instant search result page templates

To edit all templates used on the instant search result page, navigate to the extension’s template folder and there to the instantsearch folder.

In there you will find the templates used to render the instant search page:

• hit.phtml - template of a single product
• refinementsItem.phtml - template of a filter
• currentRefinements.phtml - template of current refinements
• stats.phtml - template of search statistics

Customize the integration (JavaScript)

The Magento 1 integration uses InstantSearch.js v1. Please ensure you are referring to the v1 documentation when making changes.

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 instantsearch 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 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) method:

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