Klevu's Template JS (often referred to as JSv2/JS Library) offers a quick and efficient solution for implementing a Search Query and Result display interface.
Through a few lines of reference code, Klevu Search can be incorporated by an effort no greater than Cut, Paste, and Configure.
The Klevu Template JS facilitates the Search, Result, and Analytics communication to Klevu. Catalog Indexing can be handled via the API, XML, Feed or one of our platform specific applications.
Search Query communication with the corresponding Klevu Index is handled via Klevu API.
The Template JS is responsible for "finding and binding" to the targeted Search <input> field(s) on the webpage. The Search <input> fields, corresponding Index id, and API Endpoint are defined within the core configuration options of the Template JS. See: Configuration for more details.
The search phrase is picked up from the corresponding <input> by this listener and sent to Klevu using Klevus Search API JSON structure.
The corresponding response of relevant matching data is returned in JSON format and used to render display on the page.
klevu.js - The Template JS core functions
quick-search.js - The default 'Theme' quick search modal display markup, stylings, and supporting functions
search-results-page.js - The default 'Theme' search results landing page display markup, stylings, and supporting functions
category-page.js - The default 'Theme' category landing page display markup, stylings, and supporting functions
klevu-recs.js - Core JS supporting configured Recommendations banners
The JSON object of a search response is captured within the Template JS core functions and used to render display on the page.
The display layout and styling (or 'Theme') consists of individual scripted HTML micro-templates. Each micro-template is assigned a space in the result display skeleton. Templates can be included into other templates, reused in loops, etc.
All the markup within the templates are assigned class attribute values to facilitate listening events as well as styling via corresponding CSS
Analytics is extremely important in Klevu Search. It is required for all integrations and should not be considered an optional element.
It is one of the key drivers behind Klevu Machine Learning; tracking customer searches and clicks to feed into our AI for relevant search results based on real customer interactions.
- Searched terms
- Products clicked
- Orders placed
Note: If you are using the Klevu plugin for Magento, Shopify or BigCommerce, the orders placed tracking aspect of analytics likely already taken care of for you via a server-side implementation.