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

All logic of the InstantSearch.js plug-in can be adjusted by providing some custom JavaScript methods.

• algoliaHookBeforeInstantsearchInit(instantsearchOptions) - This method can be used to modify the default InstantSearch.js options.
• algoliaHookBeforeWidgetInitialization(allWidgetConfiguration) - This method can be used to modify any of the InstantSearch.js widgets.
• algoliaHookBeforeInstantsearchStart(search) - This method can be used to modify the InstantSearch.js instance before calling thestart() method.
• algoliaHookAfterInstantsearchStart(search) - This method can be used to modify the InstantSearch.js instance after calling thestart() method.

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

Examples

An example of algoliaHookBeforeInstantsearchInit method:

1
2
3
4
function algoliaHookBeforeInstantsearchInit(instantsearchOptions) {
  // modify default instantsearch options as needed
  return instantsearchOptions;
}

An example on how to add the toggle 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
function algoliaHookBeforeWidgetInitialization(allWidgetConfiguration) {
  const wrapper = document.getElementById('instant-search-facets-container');

  const widget = {
    container: wrapper.appendChild(createISWidgetContainer(ratingAttr)),
    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;
}