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
<body/> for references to script tags of
type="template/klevu", where you will see the micro-templates which make up a Klevu Theme UI within:
<div id="klevu-quick-search-theme-templates" />
<div id="klevu-landing-search-theme-templates" />
<div id="klevu-catnav-search-theme-templates" />
We will come back to this later, once we have identified the HTML we wish to override in the steps below.
Let’s say we want to override the title of a product within the product cell of the quick search.
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:
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:
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 Klevu ID which the theme uses to define each template within the interface. We will then use this Klevu ID in our override and assign it to use the new micro-template html.
There are 2 options for locating this Klevu ID:
Option 1: Enable Template Hints by appending the parameter
klib_global_templateHints=true to your URL.
This will expose all the available Klevu ID names inline on-screen.
Option 2: Locate the default Klevu assignment within your theme file
To make life easier though, let’s use the debug version of this file, which is not minified and easier to read, by appending
Search within this file for the Micro-Template DOM ID we identified earlier,
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
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.
Now you have everything you need to override a Klevu Theme template:
- The ID which Klevu uses to identify a Micro-Template:
- The HTML content of the entire Micro-Template, which you can modify and use as an override:
To see how to use this to override in your own implementation, please check our other guides: