Styling & Designs

Creating and Using Formatters Using Lightspeed

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 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, like this:  

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 uses them in Designs using this syntax:

This allows you to create any functionality in your Designs that you'd like to use with Clerk.io in your webshop.