Styling and Design

Creating and Using Formatters on Prestashop

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.

For Prestashop this file contains the tracking-script:

modules->clerk->views->templates->hook->clerk_js.tpl

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(){
(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: '{$clerk_public_key}',
collect_email: {$clerk_datasync_collect_emails},
language: '{$language}',
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.