---
title: Structure
slug: template-js/structure
docTags: 
createdAt: 2022-06-03T19:39:23.000Z
---

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.&#x20;

:::BlockQuote
\<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.

:::BlockQuote
klevu(\{
&#x20;   url : \{
&#x20;       landing : '/search-results',
&#x20;       search: 'https\://XXXXXXX.ksearchnet.com/cs/v2/search'
&#x20;   },
&#x20;   search: \{
&#x20;       searchBoxSelector: "#my-search",&#x20;
&#x20;       apiKey: "klevu-123XXXXXXXXXXXXXX"&#x20;
&#x20;   }
});
:::



The following JavaScript files are referenced within the web page to facilitate the corresponding implementation.

**Klevu Template JS Core:**

:::BlockQuote
\<script src="https\://js.klevu.com/core/v2/klevu.js">\</script>
:::


**Quick Search:**

:::BlockQuote
\<script src="https\://js.klevu.com/theme/default/v2/quick-search.js">\</script>
:::



**Search Results Landing Page:**

:::BlockQuote
\<script src="https\://js.klevu.com/theme/default/v2/search-results-page.js">\</script>
:::



**Category/Collection Landing Pages:**

:::BlockQuote
\<script src="https\://js.klevu.com/theme/default/v2/category-page.js">\</script>
:::



**Recommendations Widgets/Banners:**

:::BlockQuote
\<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](https://help.klevu.com/support/solutions/articles/5000871419-recommendation-banner) for more details.



The basic consolidated foundation for a Search Result Landing Page would look something like this...

![](https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/H0y5_AnI62xTv8RpYpQkh_image.png "Basic SRLP components")

### HTML Templates

&#x20;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.

:::BlockQuote
\<script type="template/klevu" id="klevuQuickPromotionBanner">

&#x20; \<% klevu.each(data.banners, function(index, banner)\{ %>

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

&#x20;  \<% }); %>
&#x20;      &#x20;
\</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.

:::hint{type="info"}
**Note:** When viewing these in the browser, use **view-source** to see the templates raw markup
:::

**Quick Search:**

:::BlockQuote
**view-source:**&#x68;ttps\://js.klevu.com/theme/default/v2/quick-templates.tpl
:::

****

**Search Results Landing Page:**

:::BlockQuote
**view-source:**&#x68;ttps\://js.klevu.com/theme/default/v2/landing-templates.tpl
:::

****

**Category/Collection Landing Pages:**

:::BlockQuote
**view-source:**&#x68;ttps\://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.&#x20;

:::hint{type="info"}
**Note:** The additional **.debug** within the filename is the un-minified version used for reference only. Remove the .debug for production use.
:::

**Quick Search:**

:::BlockQuote
https\://js.klevu.com/theme/default/v2/quick-styles.**debug**.css
:::

****

**Search Results Landing Page:**

:::BlockQuote
https\://js.klevu.com/theme/default/v2/landing-styles.**debug**.css
:::

****

**Category/Collection Landing Pages:**

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













.