Getting Started

Quickstart : Smart Category Merchandising

5min

﻿
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.
Category Pages
The following code is the minimum required to get a Category Page up and running. 
Note: The sample below does not contain any additional Klevu functions (Quick Search and Search Result Landing Page). For details on those aspects please review the Quickstart : Smart Search﻿ 
This code sample contains:
JS Library core reference -  klevu.js
Configuration JavaScript -  klevu.interactive
Category Page Theme Layout reference - category-page.js 
Search Result HTML target/placeholder - <div>
﻿
HTML
<!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 Klevu APIv2 Search URL + endpoint path
                },
                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 results will be injected -->
    <div class="klevuLanding"></div>
</body>
</html>
<!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 Klevu APIv2 Search URL + endpoint path
                },
                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 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 the above code in order for use with your Klevu index. 
Element
JavaScript Varliable
Description
Category Page Name
var klevu_pageCategory
The page specific Category name. 
This value must match the category value defined during indexing
Element
klevu.interactive Options
Description
Search URL
url.search
Your Klevu Cloud Search URL  + endpoint path
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.

Element	JavaScript Varliable	Description
Category Page Name	var klevu_pageCategory	The page specific Category name. This value must match the category value defined during indexing

Element	klevu.interactive Options	Description
Search URL	url.search	Your Klevu Cloud Search URL + endpoint path
Search API Key	search.apiKey	Your Public Klevu JS API Key
Analytics API Key	analytics.apiKey	Your Klevu Analytics API Key

Updated 30 Oct 2023

Did this page help you?

Quickstart : Smart Search

Quickstart : Smart Recommendations