Guide
Structure

16min
The following is a basic overview of the setup and structural components used for Klevus Template JS.
Foundation
On the webpage, a placeholder HTML <div> with is assigned class="klevuLanding" as the target for displaying the search results interface.
e.g. 
<div class="klevuLanding"></div>
﻿
A small configuration is used for credentials and other variables specific for the implementation. See Configuration﻿ for details.
e.g.
klevu({
    url : {
        landing : '/search-results',
        search: 'https://XXXXXXX.ksearchnet.com/cs/v2/search'
    },
    search: {
        searchBoxSelector: "#my-search", 
        apiKey: "klevu-123XXXXXXXXXXXXXX" 
    }
});
﻿
The following JavaScript files are referenced within the web page to facilitate the corresponding implementation.
Klevu Template JS Core:
<script src="https://js.klevu.com/core/v2/klevu.js"></script>

Quick Search:
<script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>
﻿
Search Results Landing Page:
<script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>
﻿
Category/Collection Landing Pages:
<script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>
﻿
Recommendations Widgets/Banners:
<script src="https://js.klevu.com/recs/v2/klevu-recs.js"></script>
Note: Recommendations requires an alternate display target <div> that is configured within the Klevu Merchant Center. See the Getting Started with Recommnedations guide for more details.
﻿
The basic consolidated foundation for a Search Result Landing Page would look something like this...
Basic SRLP components
﻿
HTML Templates
 Klevu Template JS is built on a framework of reusable micro-templates.
The Klevu templates are a scripted combination of javascript and HTML. They are built upon a proprietary templating engine to avoid conflicts with other Javascript frameworks.
Data objects are passed to the script block and used for logic as well as printable expressions.
<script type="template/klevu" id="klevuQuickPromotionBanner">

  <% klevu.each(data.banners, function(index, banner){ %>

       <div class="klevu-banner-ad kuBannerContainer">
           <a href="<%= banner.redirectUrl %>">
               <img src="<%= banner.bannerImg %>" />
           </a>
       </div>

   <% }); %>
        
</script>
Please see Template Engine﻿  for further details about data elements and options
﻿
The following .tpl files are automatically pulled into the corresponding theme javascript during injection. They are listed here to be used as an un-minified reference only.
Note: When viewing these in the browser, use view-source to see the templates raw markup
Quick Search:
view-source:https://js.klevu.com/theme/default/v2/quick-templates.tpl
﻿
Search Results Landing Page:
view-source:https://js.klevu.com/theme/default/v2/landing-templates.tpl
﻿
Category/Collection Landing Pages:
view-source:https://js.klevu.com/theme/default/v2/catnav-templates.tpl
Please see Template Reference﻿ for further details
﻿
CSS
The following CSS file is automatically pulled into the corresponding theme javascript during injection. 
Note: The additional .debug within the filename is the un-minified version used for reference only. Remove the .debug for production use.
Quick Search:
https://js.klevu.com/theme/default/v2/quick-styles.debug.css
﻿
Search Results Landing Page:
https://js.klevu.com/theme/default/v2/landing-styles.debug.css
﻿
Category/Collection Landing Pages:
https://js.klevu.com/theme/default/v2/catnav-styles.debug.css
See : Styling CSS﻿  for further details
﻿
Analytics
The Klevu Template JS includes the necessary analytics reporting for searches and product clicks.
Depending on the implementation, checkout data reporting will need to be added. For the platforms supported by Klevus App/Plug-ins order data tracking is already included.
See : Analytics/Tracking﻿  for further details
﻿
﻿
﻿
﻿
﻿
﻿
.
Updated 08 May 2023
Did this page help you?
TABLE OF CONTENTS