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 : 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.
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.
There are some small modifications you will need to make to the above code in order for use with your Klevu index.
- Landing Page: options.url.landing This is the URL to send customers to access the full search results
Search URL: options.url.search This is your Klevu APIv2 Cloud Search URL. You can find this from Shop Info within your Klevu Merchant Center
- Search Box Selector: options.search.searchBoxSelector This is the class or ID to locate the input search box.
- Search Api Key: options.search.apiKey This is your public Klevu JS API Key. You can find this from Shop Info within your Klevu Merchant Center
Analytics Api Key: options.analytics.apiKey This is your public Klevu JS API Key. You can find this from Shop Info within your Klevu Merchant Center