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/> and you will see the micro-templates that make up a Klevu Theme UI.
We will refer 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 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
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: