Override a Category Template

In this tutorial we will guide you through the process of overriding a Template within Klevu Theme, allowing you to modify any of the default HTML of your Category Page. A full working example can be found at the bottom of the page.

This tutorial assumes you have already completed the following prerequisite:

Create your own Template

From the above prerequisite guides you will have identified the ID you would like to override, eg. klevuLandingTemplateResultsHeadingTitle. You will also have the original HTML which Klevu Theme renders by default, so you can modify it with your own customisations.

We do this by defining a new DOM element in the page and copying in your custom version of the HTML template. We give this a different ID to the original so we can distinguish it as our override, eg. klevuLandingTemplateResultsHeadingTitleCustom:

<script type="template/klevu" id="klevuLandingTemplateResultsHeadingTitleCustom">
    YOUR CUSTOM HTML HERE
</script>

Now we need to tell Klevu to use this template, instead of the default one. The following steps will detail this process.

Postpone Category Power Up

First we need to tell Klevu not to power up the category straight away. We will first apply our overrides and then we will update this flag later on.

klevu.interactive(function () {
    klevu({
        powerUp: {
            catnav: false
        }
    });
});

Hook into Klevu Events

Next we will create a new event which will fire once Klevu has completed it’s own internal building of the theme. The name we have chosen here is setRemoteConfigCategoryOverride but you can name this whatever you like.

klevu.coreEvent.build({
    name: "setRemoteConfigCategoryOverride",
    fire: function () {
        if (klevu.getSetting(klevu,"settings.flags.setRemoteConfigCatnav.build", false)) {
            return true;
        }
        return false;
    },
    maxCount: 150,
    delay: 100
});

This event will wait for a flag setRemoteConfigCatnav.build to be set to TRUE. It will asynchronously retry 150 times, waiting 100 milliseconds between each retry. Once this flag is TRUE by the Klevu Theme, it will fire any attached events, which we will define below.

klevu.coreEvent.attach("setRemoteConfigCategoryOverride", {
    name: "attachRemoteConfigCategoryOverride",
    fire: function () {
        klevu.search.catnav.getScope().template.setTemplate(
            klevu.dom.helpers.getHTML("#klevuLandingTemplateResultsHeadingTitleCustom"),
            "klevuLandingTemplateResultsHeadingTitle",
            true
        );
    }
});

This will override the default template for klevuLandingTemplateResultsHeadingTitle with our own version, which will be retrieved from the DOM element we defined earlier with the ID of klevuLandingTemplateResultsHeadingTitleCustom.

Power Up Category

Now that we have completed our overrides, we can tell Klevu that we are done and allow it to power up.

klevu({
    powerUp: {
        catnav: true
    }
});

Working Example

Putting all of the above together, we have the following complete example. We have modified the template to include the text !CUSTOMISED! before each product name, just to serve as an example.