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.
For Magento 1 this file contains the tracking-script:
app->design->frontend->base->default->template->clerk->tracking.phtml
An example can be seen below:
<script type="text/javascript">
window.clerkAsyncInit = function() {
Clerk.config({
key: '<?php echo $this->getPublicKey(); ?>',
collect_email: <?php echo $this->collectEmails() ? 'true' : 'false'; ?>,
templateFormatters: {
form_key: function () {
return '<?php echo $this->getFormKey(); ?>';
},
price_in_currency: function(price) {
price = Math.round(price * 100) / 100;
var price_converted = Math.round((price * <?php echo (float)$rates[$currentCurrencyCode]; ?>) * 100) / 100;
var retVal = <?php echo json_encode($currentCurrencySymbol); ?> + ' ' + price_converted.toFixed(2).toString();
return retVal;
},
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>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:
{{ formatter attribute }} {{ formatter attribute1 attribute2 }}This allows you to create any functionality in your Designs that you require.