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 
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 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 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 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

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 Recommendations
Docs powered by archbee 
TABLE OF CONTENTS
Category Pages
Using Your Own Data