Library Reference
JS Library

Template Engine

4min



The template engine allows easy access to rendering tools that are present in the Klevu library.

Core template functions

  • setData – sets the data variable of the template
  • getData – gets the data variable of the template
  • getHelpers – get a full list of available template helpers
  • setHelper – set new template helper or override existing one dependent on the name – setHelper: function ( name , functionSource )
  • render – compile the js template based on name and return html in string format – render: function ( name /* ,  data , dataLocal */ ) 
  • list –  get a full list of available template names
  • setTemplate – set a new template string as a template, decoded is used as a format for the templateString if set to false it will decode the template sting from base64 encoding – setTemplate : function ( templateString , name , decoded = false )
  • convertTemplate – transform html string to DOM tree – return is encapsulated in a div element
  • insertTemplate – append as chield a DOM node element to a parent DON node – insertTemplate : function ( parent , child )

Template render

Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources.Template functions can both interpolate values, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. If you wish to interpolate a value and have it be HTML-escaped, use <%- … %>. 

Global template variables

Inside the template, you have access to the following js variables:

  • data – contains the returned processed data and settings of the current request in the format:
    • settings – containing settings set as part of the global context example term, landingUrl,termOriginal
    • suggestions – containing processed response of the suggestion type request, refer to the API v2 Docs for a complete format
    • query – containing processed response of the query type request, refer to the API v2 Docs for a complete format
  • dataLocal – contains the object send when using micro templates. Refer to the template helper.render section
  • helper – contains the list of functions defined as template functions. Core functions include:
    • translator – able to access the scope translation object in full 
    • translate – map to the scope traslator.translate 
    • addTranslation – map to the scope traslator.addTranslation
    • getTranslation – map to the scope traslator.getTranslation
    • removeTranslation – map to the scope traslator.removeTranslation
    • setTranslations – map to the scope traslator.setTranslations
    • processCurrency – map to the scope currency.processCurrency
    • each – map to klevu.each
    • buildUrl – accepts 3 arguments – example helper.buildUrl(data.settings.landingUrl,”q” , “test”)
      • uri – original url
      • key – key that needs to be changed
      • value – the value of the change
    • stripHtml – accepts 1 argument – strips any HTML tags from the input string
    • render – accepts 4 arguments
      • name – the name of the set template
      • scope – the scope the template will be rendered in
      • data – optional – will be taken from scope if not provided – data to be set in the data object of the rendered template
      • dataLocal – optional – will be defaulted to data – data to be set in the dataLocal of the rendered template

Scope

The scope of the template engine is dependent on what Search Object Scope it is linked to. Each search object will contain as part of its scope a instance of the template engine. All data and templates are executed as part of that scope. If a user wants to use the same template in 2 or more search objects then the template has to be set for each of the template engines.

The template source can be any location where a full sting containing the template code can be extracted from , example: a element contents in main DOM , an AJAX response , an encoded variable.

Template engine accepts encoded templates in the base 64 encoding by parsing the third parameter to false(this is the default).











.

Updated 30 Oct 2023
Doc contributor
Doc contributor
Did this page help you?