Modify Display Markup

14min
﻿IMPORTANT : The methods within this article are being replaced!

Please review the following updated guides for efficient customization:
﻿Set Template﻿﻿
Modify Request : Overview﻿﻿
Modify Response: Overview﻿﻿
Modify Recommendations: Overview﻿ 
﻿
﻿
﻿
To modify a Klevu Template,  a new template is created to replace the default instance at a specific position within the interface framework. Then during powerUp, indicate that Klevu should use the new template in place of the default.
There are three steps:
Identify which micro-template to be replaced
Create the new template
Assign the override for the appropriate template block
Please see Custom Overrides﻿ for the prerequisite details on preparing for Klevu JS overriding.
﻿
Template Identification
Klevu Theme provides a working implementation of Quick Search, Search Results Landing Page and Category Pages by just including a small JavaScript asset. All of the HTML templates are injected into your page when our JavaScript Library powers up.
In order to make efficient modifications to a template, understanding the structure and syntax will be important.
Template Name
Klevu Template JS is built on a framework of micro-templates. The micro-templates are positioned as reusable components where applicable within the base Klevu framework.
The easiest way to understand this is to enable Template Hints by appending the parameter klib_global_templateHints=true to your URL.
This will expose the micro-template positioning, each with a red border for context as well as the associated name used for rendering.
e.g:
https://www.yourdomain.com/search/?q=*&klib_global_templateHints=true

klib_global_templateHints=true
﻿
The micro-templates use this identifier to render components in place by name
For Example, landingProductBadge can be called to render at multiple positions within the default  search templates.
<header ku-block data-block-id="ku_landing_result_item_header">
    <%=helper.render('landingProductBadge', scope, data, dataLocal) %>
</header>
Please see Template Engine﻿  for further details about helper.render and options
﻿
Template ID
The Klevu theme reference script injects the micro-templates onto the webpage. The best way to view the generated templates is using the browser "Inspect Element" developer feature.
Within the website <body> you will find Klevus template <div> container(s) that include the scripted micro-templates.  
The micro-templates will all be of type="template/klevu" and will all contain a unique id
e.g.
<div id="klevu-landing-search-theme-templates" />
 <script type="template/klevu" id="klevuLandingTemplateBase"> ... </script>
 <script type="template/klevu" id="searchResultProductBadge"> ... </script>
. . .
</div>
﻿
Template Assignment
The template id is assigned to the template name during the rendering process.
In this example, Klevu will use the HTML within the script  id searchResultProductBadge where called to render by the name landingProductBadge
setTemplate(
    klevu.dom.helpers.getHTML("#searchResultProductBadge"),
    "landingProductBadge",
    true
);
<%=helper.render('landingProductBadge', scope, data) %>
Note: The render name is not always the same as the default micro-template id
Please see Template Reference﻿ for quick reference chart of template id to  name
  
Create the new template
After locating the template you wish to overwrite, it is often easiest to clone the script block and give it a unique id. Then apply any modifications you like.
For example, the default template for displaying a product badge ... 
<script type="template/klevu" id="searchResultProductBadge">
    <%if(dataLocal.stickyLabelHead && dataLocal.stickyLabelHead != "") { %>
        <div class="kuDiscountBadge">
                <span class="kuDiscountTxt">
                        <%= dataLocal.stickyLabelHead %>
                </span>
        </div>
    <% } %>
</script>
 ... Becomes ...
<script type="template/klevu" id="myCustom_searchResultProductBadge">
    <div class="kuDiscountBadge">
        <span class="kuDiscountTxt">
            SHOW A CUSTOM BADGE!
        </span>
    </div>
</script>
Please see Template Engine﻿ for further details about available data elements and options.
﻿
Attaching the override
Assign the new template id to the target render name within a previously established custom event listener.
    klevu.coreEvent.attach("myLandingPageOverride", {
        name: "attachToMyLandingPageOverride",
        fire: function () {

        // OVERRIDE DEFAULT KLEVU MARKUP

// ASSIGN a new template here for product badge message
klevu.search.landing.getScope().template.setTemplate(
    klevu.dom.helpers.getHTML("#myCustom_searchResultProductBadge"),
    "landingProductBadge",
    true
);

            klevu({
                powerUp: {
                    landing: true
                }
            });
        }
    });
Please see Custom Overrides﻿  for details on preparing for Klevu Template overriding.
﻿
Example 1 (landing)
Search landing page micro-template override displaying a custom badge message.
Replaces the default markup at the landingProductBadge position.
JavaScript
<script type="text/javascript">

    // Delay powerUp
    klevu({
        powerUp: {
            landing: false
        }
    });

    // Define a new custom event, which will fire after SRLP has initialised
    klevu.coreEvent.build({
        name: "myLandingPageOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigLanding.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen in to our custom event, to make our overrides
    klevu.coreEvent.attach("myLandingPageOverride", {
        name: "attachToMyLandingPageOverride",
        fire: function () {

            // OVERRIDE DEFAULT KLEVU MARKUP
            // ASSIGN a new template here for product badge message
            klevu.search.landing.getScope().template.setTemplate(
                klevu.dom.helpers.getHTML("#myCustom_searchResultProductBadge"),
                "landingProductBadge",
                true
            );

            // We're done with our overrides, tell Klevu to power up!
            klevu({
                powerUp: {
                    landing: true
                }
            });
        }
    });
</script>

<script type="template/klevu" id="myCustom_searchResultProductBadge">
    <div class="kuDiscountBadge">
        <span class="kuDiscountTxt">
            SHOW A CUSTOM BADGE!
        </span>
    </div>
</script>

<script type="text/javascript">

    // Delay powerUp
    klevu({
        powerUp: {
            landing: false
        }
    });

    // Define a new custom event, which will fire after SRLP has initialised
    klevu.coreEvent.build({
        name: "myLandingPageOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigLanding.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen in to our custom event, to make our overrides
    klevu.coreEvent.attach("myLandingPageOverride", {
        name: "attachToMyLandingPageOverride",
        fire: function () {

            // OVERRIDE DEFAULT KLEVU MARKUP
            // ASSIGN a new template here for product badge message
            klevu.search.landing.getScope().template.setTemplate(
                klevu.dom.helpers.getHTML("#myCustom_searchResultProductBadge"),
                "landingProductBadge",
                true
            );

            // We're done with our overrides, tell Klevu to power up!
            klevu({
                powerUp: {
                    landing: true
                }
            });
        }
    });
</script>

<script type="template/klevu" id="myCustom_searchResultProductBadge">
    <div class="kuDiscountBadge">
        <span class="kuDiscountTxt">
            SHOW A CUSTOM BADGE!
        </span>
    </div>
</script>
﻿
﻿
Example 2 (quick)
QuickSearch micro-template override displaying a custom badge message.
Replaces the default markup at the klevuQuickPromotionBanner position.
JavaScript
<script type="text/javascript">

    // Delay powerUp
    klevu({
        powerUp: {
            quick: false
        }
    });

    // Define a new custom event, which will fire after SRLP has initialised
    klevu.coreEvent.build({
        name: "myQuickSearchOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigQuick.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen in to our custom event, to make our overrides
    klevu.coreEvent.attach("myQuickSearchOverride", {
        name: "attachToMyQuickSearchOverride",
        fire: function () {

            // OVERRIDE DEFAULT KLEVU MARKUP
            // QuickSearch loop looks for any assigned searchboxes
            klevu.each(klevu.search.extraSearchBox, function (key, box) {
                // ASSIGN a new template here for promotion banner
                box.getScope().template.setTemplate(
                    klevu.dom.helpers.getHTML("#myCustom_quickPromotionBanner"),
                        "klevuQuickPromotionBanner", 
                        true
                );
            });

            // We're done with our overrides, tell Klevu to power up!
            klevu({
                powerUp: {
                    quick: true
                }
            });
        }
    });
</script>

<script type="template/klevu" id="myCustom_quickPromotionBanner">
    <div class="klevu-banner-ad kuBannerContainer">
		SHOW A CUSTOM MESSAGE!
    </div>
</script>

<script type="text/javascript">

    // Delay powerUp
    klevu({
        powerUp: {
            quick: false
        }
    });

    // Define a new custom event, which will fire after SRLP has initialised
    klevu.coreEvent.build({
        name: "myQuickSearchOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigQuick.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen in to our custom event, to make our overrides
    klevu.coreEvent.attach("myQuickSearchOverride", {
        name: "attachToMyQuickSearchOverride",
        fire: function () {

            // OVERRIDE DEFAULT KLEVU MARKUP
            // QuickSearch loop looks for any assigned searchboxes
            klevu.each(klevu.search.extraSearchBox, function (key, box) {
                // ASSIGN a new template here for promotion banner
                box.getScope().template.setTemplate(
                    klevu.dom.helpers.getHTML("#myCustom_quickPromotionBanner"),
                        "klevuQuickPromotionBanner", 
                        true
                );
            });

            // We're done with our overrides, tell Klevu to power up!
            klevu({
                powerUp: {
                    quick: true
                }
            });
        }
    });
</script>

<script type="template/klevu" id="myCustom_quickPromotionBanner">
    <div class="klevu-banner-ad kuBannerContainer">
		SHOW A CUSTOM MESSAGE!
    </div>
</script>
﻿
﻿
Example 3 (catnav)
Category page micro-template override displaying a custom badge message.
Replaces the default markup at the landingProductBadge position.
JavaScript
<script type="text/javascript">

    // Delay powerUp
    klevu({
        powerUp: {
            catnav: false
        }
    });

    // Define a new custom event, which will fire after the Category Page has initialised
    klevu.coreEvent.build({
        name: "myCategoryPageOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigCatnav.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen in to our custom event, to make our overrides
    klevu.coreEvent.attach("myCategoryPageOverride", {
        name: "attachToMyCategoryPageOverride",
        fire: function () {

            // OVERRIDE DEFAULT KLEVU MARKUP
            // ASSIGN a new template here for product badge message
            // Note : catnav and landing share the same render name and template id
            klevu.search.catnav.getScope().template.setTemplate(
                klevu.dom.helpers.getHTML("#myCustom_searchResultProductBadge"),
                "landingProductBadge",
                true
            );

            // We're done with our overrides, tell Klevu to power up!
            klevu({
                powerUp: {
                    catnav: true
                }
            });
        }
    });
</script>

<script type="template/klevu" id="myCustom_searchResultProductBadge">
    <div class="kuDiscountBadge">
        <span class="kuDiscountTxt">
            SHOW A CUSTOM BADGE!
        </span>
    </div>
</script>

<script type="text/javascript">

    // Delay powerUp
    klevu({
        powerUp: {
            catnav: false
        }
    });

    // Define a new custom event, which will fire after the Category Page has initialised
    klevu.coreEvent.build({
        name: "myCategoryPageOverride",
        fire: function () {
            if (klevu.getGlobalSetting("flags.setRemoteConfigCatnav.build", false)) {
                return true;
            }
            return false;
        },
        maxCount: 150,
        delay: 100
    });

    // Listen in to our custom event, to make our overrides
    klevu.coreEvent.attach("myCategoryPageOverride", {
        name: "attachToMyCategoryPageOverride",
        fire: function () {

            // OVERRIDE DEFAULT KLEVU MARKUP
            // ASSIGN a new template here for product badge message
            // Note : catnav and landing share the same render name and template id
            klevu.search.catnav.getScope().template.setTemplate(
                klevu.dom.helpers.getHTML("#myCustom_searchResultProductBadge"),
                "landingProductBadge",
                true
            );

            // We're done with our overrides, tell Klevu to power up!
            klevu({
                powerUp: {
                    catnav: true
                }
            });
        }
    });
</script>

<script type="template/klevu" id="myCustom_searchResultProductBadge">
    <div class="kuDiscountBadge">
        <span class="kuDiscountTxt">
            SHOW A CUSTOM BADGE!
        </span>
    </div>
</script>
﻿
﻿
﻿
﻿