Introduction
bitcoinprices.js is a JavaScript library for presenting Bitcoin prices with currency conversion.
Example:
Features
See also
Demos
Demo with clickable bitcoin prices, bitcoin price menu and manu bitcoin price conversion.
BitWatcher
Installation
No server-side components needed.
You must have jQuery (version 1.9 or later) installed.
Put bitcoinprices.js
in your application.
You manually need to call bitcoinprices.init()
to trigger the loading of exchange rate data and
making price switching logic to work:
<script src="bitcoinprices.js"></script>
<script>
$(document).ready(function() {
bitcoinprices.init({
url: "https://api.bitcoinaverage.com/ticker/all",
marketRateVariable: "24h_avg",
currencies: ["BTC", "USD", "EUR", "CNY"],
symbols: {
"BTC": "<i class='fa fa-btc'></i>"
},
defaultCurrency: "BTC",
ux : {
clickPrices : true,
menu : true,
clickableCurrencySymbol: true
},
jQuery: jQuery,
priceAttribute: "data-btc-price",
priceOrignalCurrency: "BTC"
});
});
</script>
All configuration parameters can be omitted. Then defaults from bitcoinprices.js
is used (defaultConfig
variable).
How it works
Your templating language must output Bitcoin prices with attribute:
<p>
<div>Example price: <span data-btc-price="1.0">1.0 BTC</span></div>
</p>
- You manually initialize the library with and give it a config you want to use,
including bitcoinaverage.com API URL. See the demo for an example.
bitcoinprices.init()
fires HTML document marketdataavailable
event when the script manages to load
exchange rates- Whenever the user changes price presentation format HTML document
activecurrencychange
event is fired - You can manually call
bitcoinprices.convert()
to convert between any currencies supported
by bitcoinaverage.com - You can manually call call
bitcoinprices.updatePrices()
if your own JavaScripts
sets the active currency and all prices on the page are updatd.
It is suggested that you cache bitcoinaverage.com API output on a local server with proper
cache headers. This may considerably speed up your site and reduces bitcoinaverage.com load.
Drupal and UberCart integration
Here is another example how bitcoinprices.js
is used
with popular Drupal content management system and its UberCart eCommerce add on.
An example live site, It's time for plan B.
Integration instructions
Change UberCart templates to output price as data-price-usd
attribute.
Example modification to node--production.tpl.php
:
$usd_price = round(render($content['sell_price']['#value']) , 2);
<span data-price-usd="<?=$usd_price ?>"><?=$usd_price ?></span>
Include bitcoinprices.js
in your CSS.
Add CSS styles for .clickable-price
selector (prices become clickable only when succesful market data
exchange rates have been downloaded from bitcoinaverage). clickable-price
CSS class is added
automatically you don't need to add it to your templates:
.clickable-price {
cursor: pointer;
border-bottom: 1px #888 dashed;
}
Include an initialization JavaScript snippet as a separate JS file:
(function($) {
$(document).ready(function() {
bitcoinprices.init({
currencies: ["BTC", "USD", "EUR", "CNY"],
defaultCurrency: "USD",
ux : {
clickPrices : true,
menu : false,
},
jQuery: $,
priceAttribute: "data-price-usd",
priceOrignalCurrency: "USD"
});
});
})(jQuery);
Author
Mikko Ohtamaa (blog, Facebook, Twitter, Google+)
Contact for work and consulting offers.