Search Suggestion For Magento 2

Features

• The results are displayed immediately while still typing.
• Open source code and fully customizable.
• Ability to display matched products name with category.
• Shows popular products based on Ratings.
• Highlighting of the keyword in the search result.
• It is very easy to configure and handy to use.
• The extension is fully compatible with the Hyva Theme.
• Layout 1 (Fixed Width) and Layout 2 (Full Width) can be managed by Ctrl + k and ESC button.
• The search Suggestion module utilizes Elasticsearch to get search results data or whichever search engine configured on admin configurations.

Installation

Customers will get a zip folder and they have to extract the contents of this zip folder on their system.

The extracted folder has an src folder, inside the src folder you have the app folder.

So, you need to transfer this app folder into the Magento2 root directory on the server as shown below.

After the successful installation, you have to run these commands in the Magento2 root directory.

First command- php bin/magento setup:upgrade

Second Command - php bin/magento setup:di:compile

Third Command - php bin/magento setup:static-content:deploy

After running the commands, you have to flush the cache from the Adobe Commerce admin panel by navigating through->System->Cache management as shown below.

Language Translation

If you need to do the module translation, follow the path from navigation in your system. app/code/Webkul/SearchSuggestion/i18n. Open the file named en_US.CSV for editing as per below image:

When the file is open for editing, replace the words after the comma(,) on the right with your translated words.

Module Configuration – Adobe Commerce 2 Search Suggestion

After the successful installation of the module, you need to go to Stores -> Configuration and select the Search Suggestion option under Webkul Tab.

Also, the admin can navigate from Store > click on Search Suggestion menu option on side panel  > Settings

So, the admin can set various options for search suggestions like –

• show terms,
• show products,
• display products,
• display categories,
• the number of products, etc.

Show-

• Terms: The admin can set any number of Terms to show terms in search suggestions.
• Products: Admin can set any number of Products to show products in search suggestions.

Display-

• Terms: Admin can set Display  Terms as Yes or No.
• Terms Number: Admin can set Display Terms Number as Yes or No.
• Product: Admin can set Display Products as Yes or No.
• Categories: Admin can set Display Products as Yes or No.

Layout Terms –

The admin can select layout for the frontend .

• Default : Admin can set default search option for frontend.
• Layout 1 (Fixed Width) : Admin can set search suggestion which will appear in vertical form.
• Layout 2 (Full Width)  : Admin can set search suggestion which will appear in horizontal  form.

Moreover, for refined search results, you can also install Magento 2 Layered Navigation Extension.

Magento 2 Search Suggestion – Storefront View

Search suggestions will be displayed on the frontend as per the admin’s configuration.

In search bar, the customer can input keywords for product and accordingly the suggestions will display.

Layout 1 (Fixed Width)  :

When admin sets layout 1 the frontend display as per the image below :

When the customer clicks on the search bar without any keyword then it will be displayed popular products based on ratings as per the below image :

Also, customer enter the keyword for product in the search bar then relevant product option will display.

Layout 2 (Full Width) :

The front end will look slightly different from Layout 1 (Fixed Width) in this layout.  The search bar will appear differently from Layout 1 (Fixed Width) as per the below image :

After clicking the search bar, the trending categories searches will be displayed on the homepage. All the suggestions will appear horizontally as per the below image :

When the customer will enter the keyword in the search bar , then keyword will be shown with the possibility of product category  and product as per below image:

So, that’s all for the Magento 2 (Adobe Commerce) Search Suggestion, If you still have any issues feel free to add a ticket and let us know your views to make the module better at Webkul Support System.

Also, to further enhance your e-commerce site search experience and display search results more quickly and accurately, make sure to check out Magento 2 Elasticsearch.