Currency Converter

A jQuery plugin that creates currency conversion widget


This is jQuery plugin that creates currency conversion widget. This widget is flexible customizable and easily integratable in any site working on different platforms. Your website visitors can convert currencies using latest exchange rates.



Features

Requirements

There are a few requirements you need to meet before you can utilise currency converter, the most obvious of which is the inclusion of the jQuery library. You can grab the latest version here.

Or include directly into HTML head from Google


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
I recommend version 1.8.3

Browser Support

IE 8+ Chrome 4+ Firefox 3.5+ Opera 10.50+ Safari 4+

Installation

Installing currency convertion widget is relatively straight forward. Simply include the jQuery and currency converter library files with localization using script html element(s). Set one of 6 themes you like or include your own. Create DOM element and initialize widget. Like so:


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.currency.js"></script>
<script type="text/javascript" src="js/jquery.currency.localization.en_US.js"></script>
<link type="text/css" rel="stylesheet" href="css/currency.default.css">
<title>Currency Converter - jQuery Plugin</title>
<script type="text/javascript">
$(document).ready(function(){
	$('#currency-widget').currency();
});
</script>
<style type="text/css">
#currency-widget {
	width:223px;
}
</style>
</head>
<body>
<div id="currency-widget"></div>
</body>
</html>

HTML structure

Once created, currency convertion widget have a common HTML structure in this form:


<div class="currency-wrapper">
<p class="currency-header">Currency Converter</p>
<div class="currency-content">
<div class="currency-error-container" style="display:none">
<span class="currency-error">Server temporary unvailabe</span>
<button class="currency-backBtn">New conversion</button>
</div><!-- End of currency-error-container -->
<div class="currency-loading" style="display:none;">
<span class="currency-loading-phrase">Loading...</span>
<img src="img/loader.gif" class="currency-loading-gif">
</div><!-- End of currency-loading -->
<div class="currency-back" style="display:none;">
<table class="currency-back-table">
<tbody>
<tr>
<td colspan="3" class="currency-result-from"></td>
</tr>
<tr>
<td colspan="3" class="currency-equals">=</td>
</tr>
<tr>
<td colspan="3" class="currency-result-to"></td>
</tr>
<tr>
<td class="currency-result-compare1"></td>
<td class="currency-back-gap"></td>
<td class="currency-result-compare2"></td>
</tr>
</tbody>
</table>
<button class="currency-backBtn">New conversion</button>
</div><!-- End of currency-back -->
<div class="currency-front">
<form class="currency-form">
<input type="text" class="currency-quantity" name="currency-quantity" placeholder="">
<span class="currency-from-label">From</span>
<select class="currency-from" name="currency-from"></select>
<span class="currency-to-label">To</span>
<select class="currency-to" name="currency-to"></select>
<button name="currency-convert" class="currency-convertBtn">Convert</button>
</form>
</div><!-- End of currency-front -->
</div><!-- End of currency-content -->
<div class="currency-footer">
<a href="http://currency-converter.php5developer.com">Add this widget to your website</a>
</div>
</div><!-- End of currency-wrapper -->

Examples

Example #1

Widget initialization with default parameters

HTML


<div id="currency-widget"></div>

JS


$(document).ready(function(){
	$('#currency-widget').currency();
});


Example #2

Currency converter has many options you can pass in at initialization. Let's have a look at some of them.

HTML


<div id="currency-widget"></div>

JS


$(document).ready(function(){
	$('#currency-widget').currency({
		// Set currencies quantity
		quantity: 20,
		// Currency exchange from
		from: 'GBP',
		// Currency exchange to
		to: 'RUB',
		// The number of digits after the decimal point
		decimals: 2,
		// Disable loading image
		loadingImage: false,
	});
});

Example #3

Currency converter has possibility to create own group of popular currencies displaying at the top of the select list. To create it, you need to pass list of currencies in popularFrom or popularTo parameter.

HTML


<div id="currency-widget"></div>

JS


$(document).ready(function(){
	var popular = [
		'USD', 'EUR', 'RUB', 'JPY', 'GBP',
	];
	$('#currency-widget').currency({
		// Popular currenices
		fromPopular: popular,
		// Popular currenices
		toPopular: popular,
		// Set default currency from
		from: 'USD',
		// Set default currency to
		to: 'EUR',
	});
});

Deploy own currency rate provider

By default, currency conversion plugin is using 3rd party services to pull currency rates, but it can affect the performance of the widget, because no one can guarantee the trouble-free operation of external APIs. To avoid this, widget comes with own PHP API.
The pros of using own server:

Here is the instructions how to deploy your own server:
  1. Make sure PHP version is greater than 5.0 and mysqli extension is enabled.
  2. Upload php_api/api_currency.php on FTP (For instance in root folder: http://example.com/api_currency.php)
  3. Create database and import dump: php_api/dump.sql
  4. Setup MySQL credentials. You can find them at the top of php_api/api_currency.php file.
    defined('CURRENCY_API_DB_HOST') or define("CURRENCY_API_DB_HOST", "localhost"); // Mysql host
    defined('CURRENCY_API_DB_USER') or define("CURRENCY_API_DB_USER", "root"); // Mysql user
    defined('CURRENCY_API_DB_PASSWORD') or define("CURRENCY_API_DB_PASSWORD", ""); // Mysql password
    defined('CURRENCY_API_DB_DBNAME') or define("CURRENCY_API_DB_DBNAME", "api_currency"); // Database name
    
  5. Tell widget to use own PHP API
    $('#currency-widget').currency({
    	localRateProvider: 'api_currency.php', // This is the same as http(s)://example.com/api_currency.php
    });
    

Themes

Currency convertion widget comes with 6 built-in styles that are ready to go, all you have to do is specify the stylesheet with your theme of choice.

HTML Head


...
<link type="text/css" rel="stylesheet" href="css/currency.default.css">
<link type="text/css" rel="stylesheet" href="css/currency.blue.css">
<link type="text/css" rel="stylesheet" href="css/currency.lightblue.css">
<link type="text/css" rel="stylesheet" href="css/currency.green.css">
<link type="text/css" rel="stylesheet" href="css/currency.orange.css">
<link type="text/css" rel="stylesheet" href="css/currency.red.css">
...

Localization

Currency converter plugin contains only en_US localization, but you can easy create your own. Let's take a look how it must be done.

Step #1

Create new file jquery.currency.localization.your_LOCALE.js

Step #2

Open jquery.currency.localization.en_US.js file, copy all and paste into your newly created file.

Step #3

Change object's keys with chosen locale.

$(function () {
	$.currency.interface['your_LOCALE'] = {
		...
	},
	$.currency.isocode['your_LOCALE'] = {
		...
	}
});
and begin translation.

Step #4

Pass locale parameter at widget initialization.

$(document).ready(function(){
	$('#currency-widget').currency({
		locale: 'your_LOCALE', // Set widget locale
	});
});

All in one place

At the end of the localization process the code should look like this.


<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.currency.js"></script>
<script type="text/javascript" src="js/jquery.currency.localization.de_DE.js"></script>
<link type="text/css" rel="stylesheet" href="css/currency.default.css">
<title>Currency Converter - jQuery Plugin</title>
<script type="text/javascript">
$(document).ready(function(){
	$('#currency-widget').currency({
		locale: 'de_DE',
	});
});
</script>
</head>
<body>
<div id="currency-widget"></div>
</body>
</html>

Options

Property Function Example
locale (String. Default: 'en_US') Currency convertion widget's localization locale: 'en_US'
quantity (Float. Default: 100) Currencies quantity quantity: 20.99
placeholder (String. Default: '') If the currencies quantity equals 0, then you can specify element placeholder placeholder: 100
from (String. Default: 'USD') Currency exchange from (See ISO codes) from: 'GBP'
to (String. Default: 'EUR') Currency exchange to (See ISO codes) from: 'RUB'
fromPopular (Array. Default: []) The group of popular currencies in "from" section fromPopular: ['EUR', 'USD', 'RUB']
toPopular (Array. Default: []) The group of popular currencies in "to" section toPopular: ['GBP', 'JPY', 'LTL']
loadingImage (Mixed. Default: 'img/loader.gif') Path to loading image or false to hide image loadingImage: false
decimals (Integer. Default: 4) The number of digits after the decimal point on the result page decimals: 2
separator (String. Default: '------') Separator between popular currency group and other currencies separator: '======='
rateProvider (String. Default: 'rateExchange') The ID of currency rates provider. Can be:
  • rateExchange
  • php5dev
The switching between providers can be useful when one of them has problems with uptime.
Note! The currency rates are the same in all providers.
rateProvider: 'php5dev'
localRateProvider (String. Default: null) The link to local rate provider. Read here how to deploy own currency rate provider. localRateProvider: 'api_currency.php'
copyright (Boolean. Default: true) Wheter to show copyright copyright: true

Methods

Method Function Example
destroy Destroy the widget

	$(selector).currency("destroy");


Purchase

If you like this script and want to see it on your website, then you have possibility to purchase it. Click here for more information.