website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
API Docs
Template JS
Headless SDK
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Overrides
Recommendations Webhooks
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Infinite Scroll Results
Magento B2B MSI
Ratings / Reviews
SortBy Options
Docs powered by archbee 
9min

Quickstart : Smart Search



There are three primary aspects required for any implementation

  • Core reference files
  • settings/configuration
  • 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.

Quick Search

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
  • Configuration JavaScript - klevu.interactive
  • 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.

HTML
|
<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                search: {
                    minChars: 0,
                    searchBoxSelector: "#my-search", // your search input selector
                    apiKey: "klevu-14728819608184175" // your Klevu JS API Key
                },
                analytics: {
                    apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
                }
            };
            klevu(options);
        });
    </script>
</head>
<body>
<!-- The ID of the input matches 'searchBoxSelector' above -->
<form action="#">
    <input id="my-search" name="q" type="text">
</form>
</body>
</html>




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.

HTML
|
<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.js"></script>

    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

    <!-- Include Search Results Theme -->
    <script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
        klevu.interactive(function () {
            var options = {
                url : {
                    landing : '/search-results',
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                search: {
                    minChars: 0,
                    searchBoxSelector: "#my-search", // your search input selector
                    apiKey: "klevu-14728819608184175" // your Klevu JS API Key
                },
                analytics: {
                    apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
                }
            };
            klevu(options);
        });
    </script>
</head>
<body>
<!-- The ID of the input matches 'searchBoxSelector' above -->
<form action="#">
    <input id="my-search" name="q" type="text">
</form>
    <!-- Add a placeholder where the search results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>




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.

Element

klevu.interactive Options

Description

Landing Page Path

url.landing

The url path to send customers to access the full search results

Search Box Selector

search.searchBoxSelector

The class or ID or handle used to locate the input search box(es)

Search Query Paramter

url.queryParam

The name of the search <input> to be used as the query parameter in the SRLP URL

Search URL

url.search

Your Klevu Cloud Search URL

Search API Key

search.apiKey

Your Public Klevu JS API Key

Analytics API Key

analytics.apiKey

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.

Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Quickstart : Smart Category Merchandising
Docs powered by archbee 
TABLE OF CONTENTS
Quick Search
Search Results Landing Page
Using Your Own Data