Klevu Theme

We are very excited to announce our simplest approach yet for getting up and running with Klevu JavaScript Library: Klevu Theme. This is a brand new feature so please give it a try and let us know if you run into any issues during the beta period. Please check the bottom of this article for any known issues we are already working on, and if you need support you can reach out to us on the Community Forum.

The following JS files contain everything you need to get up and running with Klevu, then below we have included some code samples which you can copy+paste to get started.

Quick Search

The following code is the minimum required to get a quick search, or auto-suggestions overlay, to appear. Copy this to your website and as soon as you click on the search box you should see some results appearing.

<!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 following code is the minimum required to get a SRLP up and running. Copy this to your website and use ?q=bag URL parameter to show some search results.

<!DOCTYPE html>
<html>
<head>
    <!-- Include JS Library -->
    <script src="https://js.klevu.com/core/v2/klevu.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: {
                    apiKey: "klevu-14728819608184175" // your Klevu JS API Key
                },
                analytics: {
                    apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
                }
            };
            klevu(options);
        });
    </script>
</head>
<body>
    <!-- Add a placeholder where the search results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>

Category Pages

The following code is the minimum required to get a Category Page up and running. Copy this to your website and modify the klevu_pageCategory variable to show results for a particular category. This value must match the definition of categoryPath referenced in our API Documentation.

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

    <!-- Include Category Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>

    <!-- Configure Klevu for your store -->
    <script type="text/javascript">
        klevu.interactive(function () {
            var options = {
                url : {
                    protocol: 'https:',
                    search: 'https://eucs3v2.ksearchnet.com/cs/v2/search' // your search URL
                },
                search: {
                    apiKey: "klevu-14728819608184175" // your Klevu JS API Key
                },
                analytics: {
                    apiKey: 'klevu-14728819608184175' // your Klevu JS API Key
                }
            };
            klevu(options);
        });
    </script>

    <!-- Provide current category context -->
    <script type="text/javascript">
        var klevu_pageCategory = "Clothing";
        sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
    </script>
</head>
<body>
    <!-- Add a placeholder where the search results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>