7min

Quickstart : Smart Category Merchandising

﻿
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 PagesThe 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 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 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 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 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 DataThere 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﻿
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

UP NEXT

Quickstart : Smart Recommendations

Docs powered by archbee

TABLE OF CONTENTS

Category Pages

Using Your Own Data

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
Search API Key	search.apiKey	Your Public Klevu JS API Key
Analytics API Key	analytics.apiKey	Your Klevu Analytics API Key