16min
Structure

The following is a basic overview of the setup and structural components used for Klevus Template JS.
FoundationOn 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
﻿
CSSThe 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
﻿
AnalyticsThe 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 03 Mar 2023
Did this page help you?
Yes
UP NEXT
Configuration
Docs powered by archbee
TABLE OF CONTENTS