Display currency selector in header

I thought by default, that Magento had a curremcy selector in the header, as soon as you offered more than one currency.  However this doesn't look to be the case, or at least it wasn't for my 1.7.0.2 install of Magento.  Therefore I had to do lots of research on-line to see how this could be added.

I was shocked to see that it appears it cannot be added simply from the administration panel but needs to be added to the code (if this is not the case and it can be done from the administration panel, then please contact me or comment on this article).  All the instructions and guides I found assumed that you were a Magento developer or had some knowledge of the Magento files.  Therefore, I have simplified things down so those that are not Magento developers can add this feature.

 

Here is the first approach, that I have to say didn't work for me, so if you try it and it works for you then please let me know or leave a comment.

Firstly we need to edit the file "page.xml".

So where is this file located?  This will depend on the template you are using, for me I was using the default template, so the location of this file is; "app/design/frontend/base/default/layout".

Once located we need to edit this file and add the following; "<block type="directory/currency" name="currency" as="currency" template="directory/currency.phtml"/>"

So where are we going to insert this single line of code?  Well I took an educated guess and as I wanted this in the header I looked for a header block.  Once I had found this I noticed there was already a language block so thought it might be a good idea to insert this after that, so for me this was on line 72.  Please see the code below, the insert has been highlighted.

<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    <block type="directory/currency" name="currency" as="currency" template="directory/currency.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
        <label>Navigation Bar</label>
        <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
    </block>
    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
        <label>Page Header</label>
        <action method="setElementClass"><value>top-container</value></action>
    </block>
</block>

Secondly we need to edit the file "header.phtml".

So again, where can I find this file.  For me I found it at this location; "app/design/frontend/base/default/template/page/html".

Now we need to add the following line; <?php echo $this->getChildHtml('currency') ?>

This file is much smaller than the previous file and agin, just by looking at it I can take an educated guess on where we should insert the code.  See below with the inserted code in bold.

<div class="quick-access">
    <?php echo $this->getChildHtml('topSearch') ?>
    <p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
    <?php echo $this->getChildHtml('topLinks') ?>
    <?php echo $this->getChildHtml('store_language') ?>
    <?php echo $this->getChildHtml('currency') ?>
</div>

 

The second approach

I created a file called "currency.phtml", containing the following code and placed it in "app/design/frontend/default/default/template/currency" (I had to create directories  template/currency):-

<?php if($this->getCurrencyCount() > 1): ?>
<div class="form-language">
    <label for="custom-currency-selector"><?php echo $this->__('Your Currency:') ?></label>
    <select onchange="window.location.href=this.value" name="custom-currency-selector" id="custom-currency-selector">
        <?php foreach ($this->getCurrencies() as $_code => $_name): ?>
        <option value="<?php echo $this->getSwitchCurrencyUrl($_code)?>"
            <?php if($_code == $this->getCurrentCurrencyCode()): ?>
                selected="SELECTED"
            <?php endif; ?>>
            <?php echo $_code ?>
        </option>
        <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

Please not the highlighted line of code will produce a drop down with the currency codes.  If you would prefer to see the currency names, change "$_code" to $_name".

I created a file called "local.xml", containing the following code and placed it in "app/design/frontend/default/default/layout" (I had to create the directory layout):-

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="header">
            <block type="directory/currency" name="custom_currency_selector" template="currency/currency.phtml"/>
        </reference>
    </default>
</layout>

I created a file called "header.phtml", containing the following code and placed it in "app/design/frontend/default/default/template/page/html" (created directories page/html):-

<div class="header-container">
    <div class="header">
        <?php if ($this->getIsHomePage()):?>
        <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="/<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="/<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <?php else:?>
        <a href="/<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="/<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
        <?php endif?>
        <div class="quick-access">
            <?php echo $this->getChildHtml('topSearch') ?>
            <p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
            <?php echo $this->getChildHtml('topLinks') ?>
            <?php echo $this->getChildHtml('store_language') ?>
            <!-- START How to add Currency selector to Magento's header -->
            <?php echo $this->getChildHtml('custom_currency_selector') ?>
            <!-- END   How to add Currency selector to Magento's header -->
        </div>
        <?php echo $this->getChildHtml('topContainer'); ?>
    </div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>

Please note the above files were placed in the default template and the default theme.  If you wish to use the above for your template or on a different theme then replace the first "default" in the URL to "your-package" and the second "default" in the URL "your-theme".

I then needed to go in to the administration panel.  Go to System->Cache Management and cleared the cache and it worked!  Many thanks to Zvonimir Buric who created the original solution on Inchooer.

 

Sources:-
http://stackoverflow.com/questions/9424164/display-currency-picker-in-header
http://inchoo.net/ecommerce/magento/how-to-add-currency-selector-to-magentos-header