Quickstart : Smart Search
There are three primary aspects required for any implementation
- Core reference files
- page elements / markup
The required reference files and corresponding markup may vary depending on the page context.
Note: the klevu.interactive configurations should be set globally.
See : Structure section for more detail on these components.
The following code is the minimum required to get a quick search, or auto-suggestions overlay, to appear.
This code sample contains:
- JS Library core reference - klevu.js
- Quick Search Theme Layout reference - quick-search.js
- Searchbox HTML target - <input>
These elements are generally placed on a global template for use throughout the entire website.
Copy (or adapt) this to a webpage and as soon as you click on the search box you should see some results appearing.
Search Results Landing Page
The snippet above will direct the search to the relative URL /search-results as indicated using value assigned to klevu.interactive options.url.landing
The following Search Results Landing Page code sample will build on the previous by including 2 additional elements:
- SRLP Theme Layout reference - search-results-page.js
- Search Result HTML target/placeholder - <div>
The following code is for the /search-results webpage that now contains all the required elements.
Note: The index credentials used in this guide are specific for the Klevu Demo Store catalog. You are welcome to use the demo catalog for experiments and learning. Please adapt to your specific catalog as soon as possible to benefit from any specific modifications you will need for the success of your implementation.
Using Your Own Data
There are some small modifications you will need to make to klevu.interactive in order for use with your Klevu Index and/or your specific integration.
Landing Page Path
The url path to send customers to access the full search results
Search Box Selector
The class or ID or handle used to locate the input search box(es)
Search Query Paramter
The name of the search <input> to be used as the query parameter in the SRLP URL
Your Klevu Cloud Search URL
Search API Key
Your Public Klevu JS API Key
Analytics API Key
Your Klevu Analytics API Key
You can find your specific API Key and Endpoint information from Shop Info within your Klevu Merchant Center
See: Configuration for more details.