Set Template

14 min

to modify a klevu template, a new template is created to replace the default instance at a specific position within the interface framework then, 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 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 there are two steps to enable template hints set a sessionstorage variable by opening your browser's developer tools, going to the console and typing the following command sessionstorage setitem('klv debugmode', true); once you have ran the above command in the console you can append 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=blue \&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 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 for example, the default search result page (landing) template uses the markup within the script id searchresultproductbadge to render by the name landingproductbadge note the render name is not always the same as the default micro template id please see template reference docid\ b1swnmiaoqopor679nw o for quick reference chart of template id to name as well as detail on how to view the default template markup create the new template after locating the template you wish to overwrite, it is often easiest to make a copy of the original script block and give the new copy a unique id then apply any modifications you like to the new copy please see template reference docid\ b1swnmiaoqopor679nw o for detail on how to view the default template markup for example, make a copy of 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> and replace the id to something unique \<script type="template/klevu" id=" mycustom searchresultproductbadge "> <% console log('klevu datalocal', datalocal) %> \<div class="kudiscountbadge"> \<span class="kudiscounttxt"> show a custom badge! \</span> \</div> \</script> note the use of the console log output for the datalocal object has been provided here for reference this is an easy way to review the product attributes available for use within the template on the browsers developer console please see template engine docid\ rv82o3 jm6nxxz8ibauuq for further details about available data elements and options assign the override assign the new template id ( selector ) to the target render name within the klevu options object using the following format 	{ 	 scope "\<scope identifier(s)>", 	 selector "\<id of my template>", 	 name "\<name of template to replace>" 	} e g klevu({ 	theme { 	 settemplates \[ 	 { 	 scope "landing,catnav,quick", 	 selector "#idofmytemplate", 	 name "nameoftemplatetoreplace" 	 } 	 ] 	} }); notice how the selector value is actually a css selector for your new template determining scope note that each settemplates assignment requires definition within the corresponding scope of the override we will chart these below scope description all applies to all scope modules quick quicksearch module landing srlp module catnav category module full page both srlp and category modules (same as "landing,catnav") example search landing page micro template override displaying a custom badge message replaces the default markup at the landingproductbadge position for the landing scope only javascript

Magento

Template Reference