Using Currency Conversion with Clerk.io on Other / Custom Platforms
Platforms:
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 dict of formatted prices, with the currency symbol as they key, 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": "{'USD':'$100', 'EUR':'€ 87.70', 'GBP':'£ 68.68'}"
},
{
"id": 2,
"name": "A pound of nuts",
"description": "That's a lot of nuts!",
"price": 150,
"categories": [1],
"image": "http://example.com/images/products/2.jpg",
"url": "http://example.com/product/2",
"prices_formatted": "{'USD':'$150', 'EUR':'€142', 'GBP':'£120'}"
}
]
2. Creating a 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-dict as argument, and returns the price for a specific currency, that you can choose which matches the place of the currency in the price-dict.
Make sure that your code replaces currency with the currently chosen currency from the frontend.
JavaScript
Clerk('config', {
key: 'Your_API_Key',
formatters: {
currency_selector: function (price_list) {
const currency = "EUR";
price_groups_obj = JSON.parse(price_list)
return price_groups_obj[currency];
}
}
});
3. Using the Formatter in Clerk Designs
Lastly, you can use this function as part of your design.
HTML
<div class="price">
<span class="price">
{{ product.prices_formatted | currency_selector }}
</span>
</div>