The Magento currency picker we’re aiming for…

So, you’re interested in changing the default way of selecting a currency in Magento – an html select box. How about using buttons instead, which you have created yourself?
This tutorial will show you how to do exactly that and take you through the process step by step. Take a look at the image above for a visual idea of how this might work. The proceess of this conversion is ideal for those wanting to improve the default layout and create a currency picker that complements the rest of your web design, while not detracting from the site’s usability.

Using buttons instead of a select box of course comes with its own drawbacks – you require more space if you want to offer a considerable number of currencies on the site. This Magento tutorial is therefore best suited to those wishing to only offer a handful of currency options on their magento e-commerce site.

The effect allows you to create your own imagery for your currency picker buttons, and add an active state to the button which is currently selected and applied to the products in your store.

Step 1: What you need in your toolbag…

This tutorial should be fairly easy to follow for all web designers / developers, however a working knowledge of XHTML & CSS is assumed throughout the tutorial. The Magento software is built in PHP, and this tutorial describes how to re-write the default currency picker module to use images instead. While a working knowledge of php is not a necessity (you can just copy and paste our code!), it is needed if you want to gain a full understanding of the process. All you will need for this tutorial is a text-editor and a working installation of Magento.

Step 2: The Code

Firstly, lets locate the file we are interested in. We are only looking at changing a single file for this modification. To locate it, start in your Magento root folder and use this path:

app/design/frontend/default/default/template/directory/currency.php

‘Default’ here may be different for your own installations if you are using your own theme. Navigate to this file and open it in your text editor. The default file looks like the one below. Create a backup copy of this file in case you need to revert for any reason.

The only part of the code that needs modification is the part found inside the
<div class=“box currency-switcher”>

<?php if($this->getCurrencyCount()>1): ?>
<div class=“box currency-switcher”>
    <div class=“head”>
        <h4><?php echo $this->__(‘Select Your Currency’) ?></h4>
    </div>
        <select name=“currency” onchange=“changeCurrency(this)”>
        <?php foreach ($this->getCurrencies() as $_code => $_name): ?>
            <option value=”<?php echo $_code ?>”<?php if($_code==$this->getCurrentCurrencyCode()): ?> selected=“selected”<?php endif; ?>>
                <?php echo $_name ?> – <?php echo $_code ?>
            </option>
        <?php endforeach; ?>
        </select>
</div>
<script type=“text/javascript”>
//<![CDATA[
function changeCurrency(sObject){
    if(sObject.value){
        setLocation(’<?php echo $this->helper(‘directory/url’)->getSwitchCurrencyUrl() ?>currency/’+sObject.value);
    }
}
//]]>
</script>
<?php endif; ?>

Delete everything inside the currency-switcher div, and we can begin writing our code.
Remember, we are using images as a form of currency picker, so, for visual feedback, we need two images for each currency – one inactive and one active. The code we are about to write prints out all activated currencies (as chosen by the site’s owner in the admin section) as images, with only the active currency using its active version. This will become clear when we create the images later.

Our first attack is to loop through all currency codes selected as ‘activated’ in the Magento admin section. These are expressed by Magento as a unique 3 letter code which represents the currency, for example GBP = British Pound Sterling, EUR = Euro, USD = United States Dollar.
All of the code required is available at the end of this tutorial in a single block for you to copy.

<?php foreach ($this->getCurrencies() as $_code => $_name): ?>

Within the loop we look at each currency until the active currency is matched. For this currency we assign a variable a value of ‘_active’. So when a currency is selected, we can use this variable and assign a suffix of “_active” to its name (Eg. GBP_active)

<?php $active = ($_code==$this->getCurrentCurrencyCode()) ? ‘_active’:’‘; ?>

Still inside the loop, we finally need to print out a linked image in order for the user to select a different currency by clicking on it. We will look at the images in a minute.
The first part of the link tells Magento to set the clicked currency to be used accross the site.

<a href=”<?php echo $this->helper(‘directory/url’)->getSwitchCurrencyUrl() . ‘currency/’ . $_code; ?>” title=“Set <?php echo $_code ?> as your chosen currency”>

We then add our custom images to the link where the variable $_code is the 3 letter name of a currency. The matched active currency will also use the variable $_active which we produced earlier. Hard-coding ‘.jpg‘ to the end of the source completes our path.
We then simply close our link and end the loop.

<img src=”<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN) . ‘frontend/default/default/images/currency/’ .  $_code . $active;?>.jpg” alt=“Set <?php echo $_code ?> as your chosen currency” /></a>
        <?php endforeach; ?>

Step 3: The Images

So the hardest part is out out of the way, now we just need some images.

Important! The key concept of this modification is that the image file names match the 3 letter currency codes used by Magento, so make sure that for every currency you add, you also create the associated images.

So, if you wanted to use British Pounds, Euro and US Dollars on your site, you would need to create images entitled GBP.jpg, EUR.jpg and USD.jpg. You could use other image formats of course, just remember to change this in the link in the code.

As mentioned earlier, all images need a second version to indicate an ‘active state’. The file names for these should be exactly the same as the inactive images, only with ‘_active’ added to the currency code. These will be triggered when the active currency is matched in the loop. So, taking the example above, GBP_active.jpg, EUR_active.jpg and USD_active.jpg.

Create a new directory named ‘currency‘ on this path:
skin/frontend/default/default/images/currency

This is where we will store all of our new currency button images. Go ahead and create your buttons, remembering the naming convention that we need to use so that the code can access them. Below is an example set of images for British Pounds, Euro and US Dollar. Please do not use these images in your web designs.

Once you have saved your image set and defined your currencies from within the admin section, its then up to you to add styling as you want it, but in terms of the currency selector buttons working, that should be that! Below is an example of how the currency selector might look when switching between GBP and EURO.

The final code is below for you to copy and paste into currency.phtml, replacing the content inside <div class=“box currency-switcher”>.

<?php foreach ($this->getCurrencies() as $_code => $_name): ?>
     <?php $active = ($_code==$this->getCurrentCurrencyCode()) ? ‘_active’:’‘; ?>
     <a href=”<?php echo $this->helper(‘directory/url’)->getSwitchCurrencyUrl() . ‘currency/’ . $_code; ?>” title=“Set <?php echo $_code ?> as your chosen currency”>
          <img src=”<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN) . ‘frontend/benna_interface/default/images/currency/’ .  $_code . $active;?>.jpg” alt=“Set <?php echo $_code ?> as your chosen currency” />
     </a>
<?php endforeach; ?>

We hope you have found this tutorial helpful and easy to follow, and that it has solved a problem for you!

If you’ve used this Magento currency picker tutorial in your web design, let us know! Leave a comment below – we’d love to see your implementations.

This tutorial was brought to you by Kudos Web Solutions – Web Design Manchester, UK.

« Back to Blog