jQuery Code for Instant Bitcoin Conversion of Prices

bytw1qs


I love and believe in Bitcoins so I wanted to have my store display prices in BTC, not just fiat. I did a little digging but I couldn’t find a good solution for some inline substitution/addition in a WordPress WP e-Commerce site.

The following code gives you the ability to convert any price into the current BTC amount using jQuery.

This is the result:

$10,000.50

(Here’s a screenshot in case the example doesn’t work in your browser)

The jQuery that makes that happen is the following (please read the comments):

jQuery(function() {

  // Remove any double class applications
  jQuery(".pricedisplay .pricedisplay").removeClass("pricedisplay");

  // Load from BitPay's conversion rates JSON page
  jQuery.ajax({
    dataType: "json",
    url: "https://bitpay.com/api/rates",
    success: function( data ) { 

      for ( var member in data) {

        // Change the abbreviation to be the currancy you want
        if (data[member].code == "USD") {

            // Append the conversion after any .pricedisplay class member
            jQuery(".pricedisplay").each(function() {

            // Read original text
            var tex = jQuery(this).text();

            // Convert text to a double
            var num = Number(tex.replace(/[^0-9.-]+/g,""));

            // Create a new div with the class BTC_Price and append it after the original price
            var n = jQuery('<div/>', {
                class: 'BTC_Price',
                text: ""+(num/data[member].rate).toFixed(4)+" BTC*"
            }).insertAfter(jQuery(this));

            // Apply the same classes the other price had to get similar formatting
            n.addClass(jQuery(this).find(">:first-child").attr("class"));

            // Add a disclaimer about changes to the conversion rate while the user is browsing
            var no = jQuery('<div/>', {
              text:"BTC Value is calculated at the time this page was loaded and may no longer be valid at checkout. The Bitpay checkout page will display the final price in bitcoins for the transaction.",
              class:"alert"
            }).insertAfter(n);

            // Set the disclaimer width
              no.width(300);
              no.hide();

              // Make the disclaimer show and hide
              n.hover(function() { no.stop().fadeIn(200)}, function() {no.stop().fadeOut(200)});
            });
            break;
        }

      } 
    }
  });

});
And the styles I use are the following (but please don’t reference my image in your file, make a copy of it) :
/* SMTB Custom */
.BTC_Price {

border: thin solid #a5a5a5;
color: #333;
background: #ccc URL('/wp-content/uploads/2013/11/Bitcoin16.png') 2px 2px no-repeat;
padding-left: 22px;
padding-right: 3px;
font-size: 0.8em !important;
font-weight: bold;
min-height: 22px;
display: inline-block;
white-space: nowrap;
-moz-border-radius: 3px;
border-radius: 3px;
margin:3px;
text-shadow: 2px 2px #fff;

}

Finally, you use this code for prices in HTML:

<p><span class="pricedisplay">$10,000.50</span></p>

I hope that this helps you adopt Bitcoin for your store or blog!

If you find my code useful and want me to know it, please consider tipping some bitcents to 16K9awt7tfdgiWB79qzbSH4wpfoU3VS8zP

Thanks all!

 Uncategorized.

 1 Comment
 

One Response to jQuery Code for Instant Bitcoin Conversion of Prices

  1. It would be good if you could let the user enter in the dollar value, and have the btc price populate based on that. thanks.