FAQ

Using formatters in designs #

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

Formatters can be added in two ways:

• Through my.clerk.io > Settings > Formatters, where each Formatter can be created as separate entries.
• As a configuration for Clerk.js, in the tracking-script that is inserted on all pages, where multiple formatters can be added at once.

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:

{%raw%}{{ price | log_price }} {{ price | calculate_discount |  special_price }}{%endraw%}

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

Syncing with HTTP Auth #

Often HTTP authentication is used on staging sites to avoid uninvited visitors.

This will block the Clerk importer as well and display a 401 Unauthorized error in the sync log.

You can easily verify the importer by inserting the authentication info in the import URL like below, in Data Sync at my.clerk.io:

http://USER:PASS@www.ewoksRus.com

Upgrading to Clerk.js 2 #

Clerk.js 2 is a faster and much more flexible version of our JavaScript library that makes installing Clerk.io on any webshop a breeze.

However, since the two versions work slightly differently, you need to follow these steps to successfully upgrade.

The two main differences in Clerk.js 2 is:

• The Designs in my.clerk.io use the Liquid templating language, but can also easily be created using the Design Editor.

• The script must be inserted just before the tag in your webshops template.

Step 1: Converting Designs #

Since Clerk.js 2 has a different approach Designs, you need to create new ones.

You can create your Clerk.js 2 Designs in one of two ways:

• 1. Use the intuitive Design Editor to create new Designs, as described in the following points.

• 2. Convert your old Designs. Follow this guide to see how to do it.

1.1 Start by going to my.clerk.io -> Recommendations / Search -> Designs and click New Design:

1.2 On the following screen, give your Design a Name (we recommend adding " V2" so its obvious that you are using Clerk.js2).

1.3. Choose Design Type and follow the design set up Wizzard.

1.4. When you are done, click Create Design

1.5. In the Design Editor, click any of the existing elements like the name, image, button etc. to edit it, or add new elements to the Design to include more information about products.

1.6. Click Publish when you are done, and go to Step 2 in the guide.

1.7. Lastly, go to Recommendations / Search -> Content and change your Clerk.io Content to use your new Design.

1.8. Click Update Content. This will temporarily cause them to not show up on your webshop, until you are done with Step 2. Choose the new Design for all Content that should be updated.

1.9. There! You are now ready to switch over to Clerk.js 2.

Step 2: Replacing the script #

2.1. Start by locating the template file that is used to show all pages of the webshop, and where the original Clerk.js script is found near the bottom.

2.2. Remove the old script from the file:

2.3. Next go to my.clerk.io -> Settings -> Tracking Code. This page now contains your Clerk.js 2 tracking code.

2.4. Copy this code and insert it just before the tag in the template:

2.5. Save your template.

Congratulations! You are now running on the much-improved Clerk.js 2 setup!

You can see the full documentation for Clerk.js 2 here: https://docs.clerk.io/docs/clerkjs-quick-start