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)

You can adjust all the logic of the InstantSearch.js integration by a couple of custom JS methods:

• algoliaHookBeforeInstantsearchInit(instantsearchOptions)
  • can be used to modify default instant search options
• algoliaHookBeforeWidgetInitialization(allWidgetConfiguration)
  • can be used to add/remove/modify any widget(s)
• algoliaHookBeforeInstantsearchStart(search)
  • can be used to modify the instantsearch instance before the call of the start() method
• algoliaHookAfterInstantsearchStart(search)
  • can be used to modify the instantsearch instance after the call of the start() method

By defining this method(s) in your JS file, you can directly modify its parameter which must be returned back from the method.

Example of algoliaHookBeforeInstantsearchInit(instantsearchOptions) method:

1
2
3
4
// modify default instantsearchOptions as you want
function algoliaHookBeforeInstantsearchInit(instantsearchOptions) {
  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
function algoliaHookBeforeWidgetInitialization(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 on 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.