---
title: After Template Render
slug: template-js/after-template-render
docTags: 
createdAt: 2023-06-15T15:47:47.000Z
---



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.

:::BlockQuote
**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.

:::BlockQuote
klevu.afterTemplateRender("landing", function(data, scope)\{
&#x20;     **console.log('klevu.afterTemplateRender', data);**
&#x20;});
:::

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**

:::BlockQuote
klevu.afterTemplateRender("all", function(data, scope)\{
&#x20; klevu.each(**data.template.query.productList.result**, function(indx, product)
&#x20; \{
&#x20;   **console.log('Klevu Template Product:' + indx, product);**
&#x20; });
});
:::



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

:::hint{type="success"}
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.

```javascript
<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>
```



::Image[]{src="https://api.archbee.com/api/optimize/816_4eGYZQxALlijMlcBN/a1Mj01CJlinKDM-LHXfLb_image.png" size="40" width="300" height="325" caption="Example" position="center" showCaption="true"}