There a multiple ways of working with currency conversion in Clerk.io. A simple way to make it work is outlined below.

1. Sending the different prices in the feed

Clerk needs to know the prices of each product in the different currencies. The easiest way to do this is to send them as a list of formatted prices, in your Data Feed.

Example:

JSON

   "products": [
        {
            "id": 1,
            "name": "Cheese",
            "description": "A nice piece of cheese.",
            "price": 100,
            "list_price": 50,
            "categories": [25, 42],
            "image": "http://example.com/images/products/1.jpg",
            "url": "http://example.com/product/1",
            "prices_formatted": ['$ 100', '€ 87.70', '£ 68.68'],
            "list_prices_formatted": ['$ 50', '€ 43.86', '£ 34.35']
         },
         {
            "id": 2,
            "name": "A pound of nuts",
            "description": "That's a lot of nuts!",
            "price": 100,
            "categories": [1],
            "image": "http://example.com/images/products/2.jpg",
            "url": "http://example.com/product/2",
            "prices_formatted": ['$ 100', '€ 87.70', '£ 68.68']
         }
    ]


2. Creating a Template Formatter

In the tracking script inserted on every page of your shop, you can define JavaScript functions, that can be used inside of our templates.

Here you can define a function that takes your price-list as argument, and returns the price for a specific index, that you can choose which matches the place of the currency in the price-list.

JavaScript

Clerk.config({
        key: 'Your_API_Key',
        templateFormatters: {
            currency_selector: function (price_list) {
              var currency_index = INSERT_CURRENCY_INDEX;
              return price_list[customer];
            }
        }
   });

3. Using the Template Formatter in Clerk Designs

Lastly, you can use this function as part of your design.

HTML

<div class="price">
  {{#is list_price ">" price }}
    <span class="price-old">
      {{currency_selector list_prices_formatted}}</span>
    <span class="price-new">
      {{currency_selector prices_formatted}}</span>
  {{else}}
      {{ currency_selector prices_formatted}}
  {{/is}}
</div>

Did this answer your question?