How to: Convert your store prices to multiple currencies with money.js + accounting.js + jQuery
When building stores, you will sometimes want to display the prices of your products in different currencies. Even if you will charge your customers in your own currency only, it’s never a bad idea to show an estimate of what a product would cost in your customer’s own local currency. It gives the customer a more secure feeling about a purchase and will take away a bit of uncertainty when they see an item they want to buy.
In this blog post I’ll show you an easy way to do just that: currency conversion with a few simple javascript libraries and a free exchange rate provider.
What you need to do to get started:
1 – first, add jQuery to your web page and grab a copy of the money.js library
2 – this step is optional but I highly recommend it: grab a copy of the accounting.js library so that we can easily format our prices matching the selected currency format. In Europe we use comma’s after all as a decimal mark while in the States there’s a dot in that very same place. The accounting.js library takes the pain out of formatting that kind of fun stuff.
3 – you’ll need a web page (what else?) where we can experiment or show different currencies for a product
Step 1: Link money.js to your web page
Start your engines! Add jQuery and the money.js library to your web page. We’ve used the minified version of the library to speed up the loading of the store. If you don’t need to look at the source of the library, go for the minified version as well. Make sure to also link up jQuery before anything else. We are using the Google CDN to quickly service jQuery to our users worldwide.
Here’s the code we used.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> </script> <script type="text/javascript" src="js/money.min.js"></script>
The money.js library itself is no more than 1.1 kb in size, which is – well – not much to load.
Step 2 (optional): Link accounting.js to your web page
As I said before, this step is optional, but I would suggest using the accounting.js library to format currencies in a correct manner.
<script type="text/javascript" src="js/accounting.min.js"></script>
Step 3: Convert your price into different currencies
This step is actually easier than one might think, so bear with me and let me try to explain how to build this up.
First, we will tell jQuery to start working once the page has finished loading by wrapping our code in the .ready() event.
$(document).ready(function(){
//load this code once the page is loaded
});
Then, we will tell the money.js library what our default currency is. In other words, we need to tell the library what the currency of the price is we want to convert, so that it knows what exchange rates to apply.
fx.base = "EUR";
fx.settings = {
from : "EUR"
};
Then comes the cool part. We’ll query the open source exchange rates API to get current representative exchange rates for all currencies. After grabbing the json-feed, we’ll add the exchange rates to the money.js library.
$.getJSON(
'http://openexchangerates.org/latest.json',
function(data) {
// Check money.js has finished loading:
if ( typeof fx !== "undefined" && fx.rates ) {
fx.rates = data.rates;
fx.base = data.base;
} else {
// If not, apply to fxSetup global:
var fxSetup = {
rates : data.rates,
base : data.base
}
}
}
);
Once we have those rates, we can start converting our price into any exchange rate we want:
var USD = fx.convert(amount, {to: "USD"});
We’ll also format that currency into a nice recognizable format:
USD = accounting.formatMoney(USD, "$ ", 2, ",", ".");
That’s it, now we can show this estimate to our users by appending it to our page, in a list if you want:
$("ul.currencies").append("<li>USD estimate: " + USD + "</li>");
The complete code and example could look more or less like this:
<!DOCTYPE html>
<html>
<head>
<title>Currency Conversion Tutorial</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/money.min.js"></script>
<script type="text/javascript" src="js/accounting.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
fx.base = "EUR";
fx.settings = {
from : "EUR"
};
var amount = 9.99; //in SolidShops, you could use: {{ product.price }}
// Load exchange rates data via the cross-domain/AJAX proxy:
$.getJSON(
'http://openexchangerates.org/latest.json',
function(data) {
// Check money.js has finished loading:
if ( typeof fx !== "undefined" && fx.rates ) {
fx.rates = data.rates;
fx.base = data.base;
} else {
// If not, apply to fxSetup global:
var fxSetup = {
rates : data.rates,
base : data.base
}
}
// now that we have exchange rates, add a few to our page
var USD = fx.convert(amount, {to: "USD"}); //13.22784197768393
var GBP = fx.convert(amount, {to: "GBP"}); //8.567532636985659
var JPY = fx.convert(amount, {to: "JPY"}); //1028.1670562349989
// we can now use the accounting.js library to format the numbers properly
USD = accounting.formatMoney(USD, "$ ", 2, ",", ".");
GBP = accounting.formatMoney(GBP, "£ ", 2, ",", ".");
JPY = accounting.formatMoney(JPY, "¥ ", 2, ",", ".");
$("ul.currencies").append("<li>USD estimate: " + USD + "</li>");
$("ul.currencies").append("<li>GBP estimate: " + GBP + "</li>");
$("ul.currencies").append("<li>JPY estimate: " + JPY + "</li>");
}
);
});
// ]]></script>
</head>
<body>
<h1>€ 9,99</h1>
<ul class="currencies"></ul>
</body>
</html>
The output of the final currencies list looks like this:
I hope this gives you at least a little bit of inspiration to get started with converting your prices in your store.
Please post a comment if you have any questions or if you have used these amazing libraries to build better stores for your clients. I’d love to see what you come up with!
20 Comments
Hi I like the way the script is but if I wish to add other currencies to the script what would be the best way of doing it
Also can product.price be used to fetch a price on a webpage then be used to display the price as a foreign currency?
Hi dc, what other currencies would you like to add? Money.js supports pretty much every possible currency I’ve ever seen. Your second question is indeed correct: you could use var amount = {{ product.price }} in your Solidshops templates instead of using the var amount = 9.99 from the example. Does that make sense?
Hi Joris, thanks for speedy reply also I was wandering is there a way for this script to get prices automatically without having to use the SolidShops templates for example on this website http://www.vinsonjewellers.com/ so that it displays from the currency GBP to for example rupees or AED?
Hi! Sure, you can use the script for any website. You don’t need to have an account on SolidShops – although we’d love to see you build stores with us
. I’ve written the above tutorial with *any* website in mind, so you can certainly use it on your own sites.
Hi Joris, thanks for your reply but if i put the script into that website and wanted it to get the prices automatically would I need any additional code for that and if I would need how it would be formulated?
You would of course have to adjust the script to your exact needs, but in short: no you wouldn’t need any special additional code to make it work on your website.
Great article Joris – thanks a lot. I was struggling a little in getting money.js working until I found your article.
Thanks Jim, glad I could help! Are you using money.js in an e-commerce project somewhere?
Great tutorial Joris!
Thanks for introducing me to money.js and accounting.js, the’re both lifesavers!
Hi Stijn. They are lifesavers indeed. Glad you got some use out of the tutorial!
I’m using money.js on a couple of real estate sites actually. I’ve got it working great by combining cookie.js so that it remembers a user’s currency preference.
Quick question though – how would you show different currencies for a page listing multiple products?
Hi Jim. That depends on the design, but you could add a clear selection of currency somewhere in your page, that would convert all prices at once into a different currency? I’m sure users that would click on “EUR” for example would like to see all prices in Euro, not just the price for one particular product.
Does that make sense?
Thanks Joris. I was really looking for a code example for say, a search results page listing products. How would you go about changing multiple prices on a page? Your (fantastic) example only shows changing one product price.
I’m sure there must be some SolidShops customers wanting to be able to add this great functionality to pages with multiple product listings.
Any help would be greatly appreciated.
Hey Jim, I’ve sent you a code sample through email, since it would be really messy to post something like that in the comments. Hope that helps!
Hi Joris, thank you for this script. Regards to your first reply to Jim above. I’d like to expand on that. I’m actually looking for a solution similar to this in where the user will select ‘EUR’ for example and this will update all the prices on the page in Euro’s.
I’ve got to the stage where I’ve created a Javascript dropdown which will list the currencies which can be chosen in the header of the site.
So my script is..
jQuery(document).ready(function() {
jQuery(‘#currency_droplist’).click(toggleCurrency);
// set a timer to hide the list on mouse out of elements
jQuery(‘#currency_droplist, #currency_changer’).hover(
function() {
clearTimeout(currencyTimer);
}, function() {
if (jQuery(‘#currency_changer’).is(‘:visible’)) {
window.currencyTimer = setTimeout(function() {
jQuery(‘#currency_changer’).slideUp();
}, 700);
}
});
function toggleCurrency() {
if (jQuery(‘#currency_changer’).is(‘:visible’)) {
jQuery(‘#currency_changer’).slideUp();
} else {
jQuery(‘#currency_changer’).slideDown();
}
clearTimeout(currencyTimer);
}
});
How could I incorporate your script into the use of the javascript dropdown box and the selection of a currency which will change all prices on the page (any page)? Any example scripts would be greatly appreciated. Thank you. Jonah. PS: I hope I’m making sense here.
Hi Jonah,
sure, your question makes sense. However, we can’t really create a custom Javascript solution for every possible situation out there here on the blog.
If your Javascript or jQuery skills are not sufficient to get this up and running your self, I would suggest asking this technical question on Stackoverflow.com.
It’s definitely something that can be done easily with some javascript or jquery help from a web designer or community on sites such as Stackoverflow.com.
I’m sure you understand that that is a better and more helpful please for such technical issues.
Thanks for your script. As Jim said above I have multiple pages with pricing in USD and need to convert to international currency once the page is loaded without any user experience issues. We must use our external vendor currency conversion rates which we pull from a back-end call. Please let me know if you can email an example for converting every product price on the page.
Hi CNU. I don’t have a custom solution for you at my fingertips, but you can do is get the currencies from your own vendor in JSON format. Just make sure you get them in the same structure as what the url http://openexchangerates.org/latest.json is returning and you should be fine!
This is a great article but I’m also looking at converting all amounts on a page to GBP ( they are EUR to start with).
Obviously any help would be greatly appreciated. But not expected. Will post a question on stackoverflow tomorrow in work.