Integrations / Platforms / Magento 1 / Instant Search Page Customization
Aug. 23, 2019

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:

Customize the integration (JavaScript)

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

Did you find this page helpful?