December 2021 Update: Our official Magento extension now includes the Klevu JS Theme right out of the box! Simply upgrade to the latest version of our extension and select JSv2 Theme. Click here for more information.
We recommend using our Magento extension instead of this guide, but if you prefer to integrate Klevu manually you can follow these steps below.
We have a sample module which you can reference for your own implementation. Please do not blindly copy this on to your production codebase and launch it, as it contains inline comments which must be read and understood so you can adapt the example to your own requirements.
The summary of the extension is as follows:
- Included Klevu Features
- Quick Search / Autocomplete popup.
- Search Results Landing Page via a custom controller.
- Category Page (optional paid subscription add-on required)
- Layout XML
- We introduce the Klevu JS Library and Quick Search code to every page of the store.
- We also introduce some Search Results page code and Category code to the search and category pages, respectively.
klevu-init.phtmlcontains a dummy Klevu API key so you can see results immediately, even without a Klevu account.
- We introduce one new route for handling the search results landing page.
There are many other ways to achieve the same result in Magento, and this is just one of them. For example you may prefer to re-use the
catalogsearch/result/index route for search rather than a new controller, which can be achieved by adapting the layout aspects of this extension example.
If you have your own preferred approach then please do use this reference as a guide and apply the HTML and JS in your own manner.
There are a few scenarios to be aware of, depending on how you will be powering Klevu on your Magento instance, and whether you are already using the JS built into our Magento extension.
Klevu JS Theme for everything
This is the most straightforward, as you will be using the latest Klevu JS Theme for Quick Search, SRLP and (optionally) Category pages. If you are using our Klevu extension, you must ensure the frontend aspects are disabled to avoid any conflicts, via Stores > Configuration > Klevu > Enable on Frontend: No.
Klevu JS Quick Search with Preserve Layout
This one is a bit more complicated, since disabling Klevu on frontend as per the above steps would stop the preserve layout aspect from working on your SRLP and/or Category Pages. Please contact Klevu Support who will be able to guide you and help validate the process.