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
The 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.
JS
<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>
<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>
﻿
﻿
Example
﻿
﻿

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")

Updated 30 Oct 2023

Did this page help you?

Set Custom Helpers

Styling CSS