Build UI
Templates Customizations
After Template Render
5min
there may be a use case or business requirement in which a modification or action is needed to take place upon the rendering of the klevu template js the aftertemplaterender function is triggered immediately after the last template has processed klevu aftertemplaterender ("\<scope>", "\<callback>"); identify the data object the simplest way to get acquainted with the available data is to use console log and review the output klevu aftertemplaterender ("landing", function(data, scope){ console log('klevu aftertemplaterender', data); }); for example, the following snippet loops through each record in the productlist result and outputs the product object to the browser's developer console log klevu aftertemplaterender ("all", function(data, scope){ klevu each( data template query productlist result , function(indx, product) { console log('klevu template product ' + indx, product); }); }); determining scope note that each klevu aftertemplaterender function 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") multiple klevu aftertemplaterender functions can be applied in the same or mixed scope example t he following snippet loops through each record in the productlist result for the search landing page scope and adds an "on sale" notice using the dom if there is a pricing discount applied \<script type="text/javascript"> klevu aftertemplaterender("landing", function(data, scope){ klevu each(data template query productlist result, function(indx, product) { if (product price < product saleprice) { var domelement = document queryselector('li\[data id="'+product id+'"] kuprodbottom'); domelement innerhtml += '\<strong style="color\ red;">on sale\</strong>'; } }); }); \</script>