Identify Theme Micro-Template Names

Klevu Theme provides a working implementation of Quick Search, Search Results Landing Page and Category Pages by just including a small JavaScript asset. Within this implementation we also have a set of default HTML, CSS and JavaScript which we understand you will want to modify.

In this tutorial we will guide you through the process of finding a HTML template, identifying its ID and copying the original code, so that you can follow the appropriate steps to override it.

Klevu Theme Template Location

All of the HTML templates are injected into your page when our JavaScript Library powers up the theme. Using “Inspect Element” of your browser, take a look at the top of your <body/> and you will see the micro-templates that make up a Klevu Theme UI.

Klevu Theme Templates injected into the <body/>.

We will refer to this later, once we have identified the HTML we wish to override in the steps below.

Inspect Element

Let’s say we want to override the title of a product within the product cell of the quick search.

We will override the Product Title of this cell.

One handy way is to use inspect element to find some unique looking class names, and use those to find the Klevu Template you are interested in. For example, here we found the class: klevuQuickProductName.

We use Inspect Element to find class name: klevuQuickProductName.

Finding the Micro-Template

Next go back to the “Inspect Element” view of the Klevu Templates we opened earlier. Search within that source for this class name: klevuQuickProductName.

Find the Micro-Template associated to the class we identified.

Here we have found the class name. Be careful as there may be more than one match, so compare your Inspect Element view to the Micro-Template you see here to make sure you have a match.

If we look at the opening <script/> tag, we can see that the DOM ID of this Micro-Template is klevuQuickProductBlock. This is the selector which Klevu uses to associate a particular template with the quick search.

Note down this DOM ID, and copy the entire <script/> block. This is your Micro-Template. You will be using this as your original version to modify it with your own version.

Klevu Assignment of Template

Finally we need to find the ID which Klevu Theme uses to associate this micro-template. We will then use that ID in our override, which will be within your theme file quick-search.js. To make life easier though, let’s use the debug version of this file, which is not minified and easier to read, by appending .debug.js eg:

https://js.klevu.com/theme/default/v2/quick-search.debug.js

Search within this file for the Micro-Template DOM ID we identified earlier, klevuQuickProductBlock.

Klevu retrieving HTML content from a Micro-Template.

Here we see that Klevu is setting a template for use within quick search, using the Klevu ID klevuQuickProductBlock and pulling the HTML content from a DOM ID #klevuQuickProductBlock.

box.getScope().template.setTemplate(
    klevu.dom.helpers.getHTML("#klevuQuickProductBlock"),
    "klevuQuickProductBlock",
    true
);

Note that in this example, the two values happen to have the same name, but this is not always the case.

Summary

Now you have everything you need to override a Klevu Theme template:

  • The ID which Klevu uses to identify a Micro-Template: klevuQuickProductBlock
  • The HTML content of the entire Micro-Template, which you can modify and use as an override: <script type="template/klevu">...</script>

To see how to use this to override in your own implementation, please check our other guides: