How to Customize the Extension
Introduction
Our extension can be a powerful out-of-the-box tool for a variety of search features. However, sometimes our plug-in needs to be customized in order to change the look or behavior to perfectly suit any use case. Keep in mind that any changes you make to the extension will be removed when installing any new versions of the extension.
In this guide, we will look at how you can safely create a custom implementation of our extension for Magento, without any danger of it being overwritten with future versioning of the extension.
Please make sure you have our extension installed on your Magento 2 website.
The best way to change any default style or behavior in Magento is to override it. For instance, when a template needs to be modified, it’s not supposed to be modified directly; a new template has to be created, and Magento needs to be told to use this new template instead of the old one. The new template will then be a new custom extension.
CustomAlgolia
In order to avoid having to bootstrap a lot of code to create a custom extension for our engine, we created a boilerplate for anyone to use. The boilerplate, named CustomAlgolia, is shipped with a few code samples to get started quickly.
Installation
The CustomAlgolia boilerplate can be installed with Composer by running the following commands in the command line:
$
$
composer require algolia/algoliasearch-custom-algolia-magento-2
php bin/magento setup:upgrade
The boilerplate will be installed into the vendor/algolia/algoliasearch-custom-algolia-magento-2 directory in your Magento 2 base directory.
Boilerplate Structure
To keep things simple, the boilerplate uses the same data structure as is convention for Magento 2 extensions.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├── Observer
│ ├── UpdateFrontendConfiguration.php
│ └── UpdateProductsSettings.php
├── etc
│ ├── module.xml
│ └── events.xml
├── view
│ └── frontend
│ ├── layout
│ │ └── algolia_search_handle.xml
│ ├── web
│ │ ├── autocomplete.js
│ │ ├── hooks.js
│ │ └── customalgolia.css
│ ├── templates
│ │ └── autocomplete
│ │ ├── custom.phtml
│ │ └── page.phtml
├── registration.php
└── composer.json
Customizing Looks
For this example, we’ll override the page.phtml template.
This template is used for the autocomplete feature, to display CMS pages matching the query.
Create a new template
Copy the chosen template from our original extension (view/frontend/templates/autocomplete/page.phtml) to the exact same path in the CustomAlgolia extension.
The file can now be modified as needed.
Register the new template
With the new template in place, Magento needs to know that it has to use this template instead of the original one.
To do this, open the configuration file algolia_search_handle.xml and add the following code block to it:
1
<referenceBlock name="algolia.autocomplete.page" template="Algolia_CustomAlgolia::autocomplete/page.phtml" />
It is important to use the correct template name in the snippet above. If unsure, please check the original extension’s layout file for the template names.
Customizing front end behavior
Overriding existing behavior
In order to override some of the extensions’ behavior, the JavaScript file needs to be overridden.
This process is practically the same as overriding a template.
For this example, we will override the autocomplete.js file, which implements the autocomplete menu feature.
Click here to read more about customizing the autocomplete feature.
Create a new script
Copy the chosen template from our original extension (view/web/autocomplete.js) to the exact same path in the CustomAlgolia extension.
The file can now be modified as needed.
Register the new script
With the new script in place, Magento needs to know it has to use this script instead of the original one.
To do this, open the configuration file algolia_search_handle.xml and add the following code block to the <head> section of the layout.
1
2
<remove src="Algolia_AlgoliaSearch::autocomplete.js" />
<script src="Algolia_CustomAlgolia::autocomplete.js" />
Adding custom behavior
To add functionality on top of the default behavior, a new JavaScript file needs to be added. In this file, custom methods can be used to modify any instant search or autocomplete features.
Create a new script
Create a new file named view/web/custom_js.js.
The file can now be modified as needed.
Register the new script
With the new script in place, Magento needs to know it has to use this script instead of the original one.
To do this, open the configuration file algolia_search_handle.xml and add the following code block to the <head> section of the layout.
1
<script src="Algolia_CustomAlgolia::hooks.js" />
Customizing back-end behavior
In order to override some of the extensions’ back-end behavior, like indexing or settings, a listener on a back-end custom event needs to be created.
The listener is composed from an Observer PHP class and it needs to be registered in the etc/events.xml file.
For this example, we will create a listener on the algolia_products_index_before_set_settings event to modify Algolia’s index settings for your products’ index.
Register the observer
To register the observer, add the following snippet to the etc/events.xml file:
1
2
3
<event name="algolia_products_index_before_set_settings">
<observer name="customalgolia_products_settings" instance="Algolia\CustomAlgolia\Observer\UpdateProductsSettings" />
</event>
Create observer
Create the Observer/UpdateProductsSettings.php file, and add a new Observer class to it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
namespace Algolia\CustomAlgolia\Observer;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
class UpdateProductsSettings implements ObserverInterface
{
public function execute(Observer $observer)
{
// Observer execution code...
// Here you can modify front end configuration
// Example:
// $productsSettings = $observer->getData('index_settings');
// $productsSettings['snippetEllipsisText'] = '…';
}
}
The code in the execute block can be modified as needed. In this example, the snippetEllipsisText setting is modified.
Updating
When files are overridden, they will not receive updates from our original extension. If a bug fix needs to be integrated into the custom code, this will need to be done manually. Please make sure you read the change log of each release to see if there was any change to the file that was overridden.
