Modify Display Markup

14 min

important important the methods within this article are being replaced! please review the following updated guides for efficient customization docid 6yvx9naw6ax68wygucob7 modify request docid ndrepmgauhyltilxkg o modify response docid\ k usia fv m380bqcaw7p modify recommendations docid\ o03qerb3f sy0bhba64af 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 docid bc3gcthleeatoyujdtue 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 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 docid\ rv82o3 jm6nxxz8ibauuq 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 docid\ b1swnmiaoqopor679nw o 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 docid\ rv82o3 jm6nxxz8ibauuq 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 docid bc3gcthleeatoyujdtue 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> 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> 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>