Magento 2 Ajax Search Autocomplete.
About Ajax Search.Why is this important, how does it help?
Help your customers find the right products, increase conversion rate and reduce friction with ajax search autocomplete.
The search bar is often the starting point when browsing the internet “Google” or any other ecommerce website. Simply ask yourself: How many times you browsed Amazon or Ebay to find the product that you needed? And How many times you used the search bar to find exactly what you needed?
Customers will only purchase the products that they need and can find. If your customers cannot find the right product most likely they will leave your website and shop somewhere else.
Did you know that depending on website it can reach a usage rate of more then 60% and customers using the site search can have a 2X to 3X conversion rate? To find out how many of your customers are searching, what are they searching for or when go to your Google Analytics account and find out what your numbers are. Behavior > Site Search > Search Terms
Site Search is clearly a feature of your webstore that needs to be evaluated and improved! Effective site searches should guide your customers as they are typing and re-formulating their queries. The as-you-type suggestion are here to help users save time finding and correcting misspells before they hit the search button.
Autosuggest feature helps guiding your customers recall certain names or popular search terms by suggesting them search ideas that help them construct more useful queries.
Auto Complete takes the autosuggest feature even further by enhancing the experience by visually displaying the most relevant products and pages by reducing friction and taking the customer directly to the page they are looking for.
- Increase conversion rate and reduce friction. This extension helps users find what they are looking for by returning real time results as they type in the search box. Finding the right products significantly increases conversion and user retention.
- Fully customizable, allows to include custom CSS in search header and footer and advertise any promotions or call to action messages, right in the search results container.
- Customers will only purchase the products that they need and can find. If your customers cannot find the right product most likely they will leave your website and shop somewhere else.
Features of the Extension.
- Show relevant search results as user types in the search box
- Full design control over design of the search results container
- Show Product Results, Popular Suggestions or both.
- Set the minumum no. of characters to activate the ajax search
- Show/hide product image in search results
- Control over product image size
- Show/hide product description in search results
- Show/hide product price in search results
- Customize displayed texts
- Custom CSS/Html for container header and footer
- Rich frontend options and color options
- Clean open source code
- Easy installation
How to Install.
Before installing Ajax Search and Autocomplete on a Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.x - 2.2.4 It is recommended to install the extension first on a testing server before you install it on a live (production) server.
Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
app/code/WeltPixel/Backend ( download Backend from HERE if missing)
Access the root of your magento 2 project from command line and run the following commands:
php bin/magento module:enable WeltPixel_Backend --clear-static-content
php bin/magento module:enable WeltPixel_SearchAutoComplete --clear-static-content
php bin/magento setup:upgrade
Flush any cache that you might still have enabled on your server or in Magento.
Woohoo, the extension is installed!
How to use.
Go to WeltPixel > Ajax Search Autocomplete > General Settings
- Enable Ajax Search and set this option to [ Yes ].
This section offers full control over product search results dispayed by ajax search box.
- Enable Product Search and set this option to [ Yes ]. If enabled, ajax search will return products matching the search term in the search dropdown pannel.
- Minimum number of characters to search - set the minimum number of characters which customers should enter to trigger autocomplete. Example: 3
- Maximum number of items displayed - set the maximum number of items displayed in the dropdown list. Example: 7
- Show product image [Yes / No] - show/Hide the product image in the dropdown results list.
- Width of the product image - set the width for the products images in the dropdown results list [pixels]. Example: 80
- Show Product Description - show/Hide product description in the dropdown results list.
- Maximum number of words for the description - set te maximum number of words displayed for product description in the dropdown results list. Example: 10
- Show product price - show/hide product price in the dropdown results list, if a promotion is enabled, the discounted price will show here. Once the promotion is over, the normal price will show.
- Custom text when no results - set your custom text to be displayed if there is no search results. Example: Sorry, no results were found.
- Header custom CSS/HTML - insert custom header text to be displayed in the dropdown results list. You can also insert CSS/HTML for design adjustments of product search header section.
- Footer custom CSS/HTML - insert custom footer text to be displayed in the dropdown results list. You can also insert CSS/HTML for design adjustments of product search footer section. Note: Sample footer custom CSS uses image located under SearchAutoComplete/view/frontend/web/images/img-footer.svg, if needed you can use any other images from your server.
Go to WeltPixel > Ajax Search Autocomplete > Popular Suggestions Settings
- Enable Popular Sugestions and set this option to [ Yes ]. - this is default magento popular sugestions functionality. You can choose to use this functionality along with the ajax search or simply disable it.
Go to WeltPixel > Ajax Search Autosuggest > Frontend Settings
- Width of results container - Set the width of the results container [pixels]. Example: 250
- Show Product Divider - Show/Hide Product Divider.
Functionality control for Category, Search and Advanced Search Page. When your store is integrated with external search solutions you may need to disable ajax for search pages in order to achieve default magento behaviour and therefore achieve full compatibility with other solutions.
- Search container background color - Set color for search container, example #FFFFFF
- Container Text Color - Set color for product results text in search container, Example #000000
- Title Background Color - Set background color for search container titles like Product Results, Popular Suggestions, Example: #F0EFF0
- Title Color - Set text color for search container titles like Product Results, Popular Suggestions, Example: #000000
What’s new in v.1.6.4 - May 16, 2018
- Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
- Design compatibility with Search V2 from Pearl Theme, added horizontal ajax results view.
What’s new in v.1.6.2 - March 23, 2018
- Fixed continuous loader issue after min characters removal.
- Fixed search results placeholder size when no product image is used.
- Added suggestion click redirect for suggested results.
What’s new in v.1.0 - March 1st, 2018
- Initial release