Styling and Design

Creating and Using Formatters on SmartWeb

Write custom functions for use in your Designs

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

Formatters 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. Please be aware this is for Clerk V2 (latest version): 

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  <script type="text/javascript">
    (function(w,d){
      var e=d.createElement('script');e.type='text/javascript';e.async=true;
      e.src=(d.location.protocol=='https:'?'https':'http')+'://cdn.clerk.io/clerk.js';
      var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
      w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
      key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
      formatters: {
             log_price: function(price) {
             console.log(price);
          }
      });
    });
  </script>

    <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
               

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

formatters: {
   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 Formatters, you can use them in your Designs using this syntax:

 

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