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
- can be used to modify default
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 ofstart()
method
- can be used to modify the
afterInstantsearchStart(search, algoliaBundle)
- can be used to modify the
instantsearch
instance after call ofstart()
method
- can be used to modify the
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;
});