Instant Search Page

Introduction

In order to customize the instant search results page, there’s one essential folder from which the code should be changed. From the root directory of your Magento project, the necessary files can be found in vendor/algolia/algoliasearch-magento-2/view/frontend. This folder contains all the templates, JavaScript and stylesheets in use.

Changing Looks

Styling

We provide a default stylesheet, algoliasearch.css. This CSS can be overridden by a custom stylesheet to change the look and feel of the search according to your needs.

Structuring

Sometimes, to change the look of the search, structural changes have to be introduced to the HTML code by editing some of the templates.

Instant Search Page Wrapper

The wrapper template contains the layout of the instant search results page, along with all other templates rendered in to it. In order to alter the layout of this page, navigate to the templates directory, and locate the wrapper.phtml file. This file is a standard Magento template file.

Instant Search Results Page

To change the way results are displayed on the results page, multiple files need to be edited. These files can all be found in the instant folder of the extension.

The files that are used when rendering the search results page are:

• hit.phtml - The template for a single product
• facet.phtml - The template for a single filter/facet
• refinements.phtml - The template for current refinements
• stats.phtml - The template for search statistics

Changing Behavior

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

• beforeInstantsearchInit(instantsearchOptions, algoliaBundle)
  • can be used to modify default instantsearch options
• beforeWidgetInitialization(allWidgetConfiguration, algoliaBundle)
  • can be used to add/remove/modify any widget(s)
• beforeInstantsearchStart(search, algoliaBundle)
  • can be used to modify the instantsearch instance before call of start() method
• afterInstantsearchStart(search, algoliaBundle)
  • can be used to modify the instantsearch instance after call of start() method

All custom methods must return the manipulated options in order to work.

Examples

Example of the beforeInstantsearchInit(instantsearchOptions, algoliaBundle) hook:

1
2
3
4
algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions, algoliaBundle) {
  // Modify options, then return them
  return instantsearchOptions;
});

An example on how to add the toggleRefinement widget to the 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;
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
algolia.registerHook('beforeWidgetInitialization', function(allWidgetConfiguration) {
  const wrapper = document.getElementById('instant-search-facets-container');

  const widgetConfig = {
    container: wrapper.appendChild(createISWidgetContainer('in_stock')),
    attribute: 'in_stock',
    on: 1,
    templates: {
      label: 'In Stock'
    }
  };

  if (typeof allWidgetConfiguration['toggleRefinement'] === 'undefined') {
    allWidgetConfiguration['toggleRefinement'] = [widgetConfig];
  } else {
    allWidgetConfiguration['toggleRefinement'].push(widgetConfig);
  }

  return allWidgetConfiguration;
});