Structure

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 docid\ el9qchgznersiaeg e lu 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 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 docid\ rv82o3 jm6nxxz8ibauuq 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 docid\ b1swnmiaoqopor679nw o 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 docid 2evmr7ofkw87yl6atyu 6 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 docid\ ryzkc8ncv55 qcfjluohq for further details