Clerk.js allows you to write custom javascript functions, that adds new functionality to the Designs.

TemplateFormatters should be inserted as a configuration for Clerk.js, in the tracking-script that is inserted on all pages.

An example can be seen below:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  window.clerkAsyncInit = function() {
      Clerk.config({
          key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
          templateFormatters: {
             log_price: function(price) {
             console.log(price);
          }
      });
  };

  (function(){
      var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
      e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
  })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
               

You can write any number of TemplateFormatters, separated by comma:

templateFormatters: {
   log_price: function(price) {
      console.log(price);
   },
   calculate_discount: function(price,special_price) {
      return price-special_price;
   },
   substring: function(text) {
      var short_string = text.substring(0,20);
      return short_string;
   }          
}

After creating your TemplateFormatters, you can use them in your Designs using this syntax:

{{ substring name }} {{ calculate_discount price special_price }}

This effectively allows you to create any functionality in your Designs that you require.

Did this answer your question?