Magento Themes and Magento Extensions

How to add Currency selector to Magento’s header

Share

Since Magento has built in functionality for currency, this article will be pretty much straightforward. I’ll explain how to do it step by step. So you might say it’s a tutorial for beginners.

Now, perhaps you’ve noticed that in Magento’s Administration under “System->Configuration” menu, you have “Currency Setup” tab. There You should select default site currency, and besides that, all currencies you wish to support.

Here’s a screenshot of how it looks:After that you should go to menu item under “System->Manage Currency Rates”. And set rates between values you’ve chosen before. And here’s how it looks like:

And now, after you’re done with initial setup, let’s go with modifications to make output in header happen. First thing you should do is to create new template file and put it here “YOUR_PACKAGE/YOUR_THEME/template/directory/currency.phtml”. Put in this content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//Change 1 to 0 if you wish to output selector always
<?php if($this->getCurrencyCount() > 1): ?>
<span>Select Currency:</span>
<select 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>
<?php endif; ?>
<script type="text/javascript">
$('custom-currency-selector').observe('change',function(evt){
window.location = $('custom-currency-selector').value;
});
</script>

Next thing you need to do is to display this custom currency template inside header. I’ve inserted one line inside “YOUR_PACKAGE/YOUR_THEME/layout/page.xml” as follows (as base for this article I’ve used Magento CE “Modern” theme):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<block type="page/html_header" name="header" as="header">
<block type="core/text_list" name="top.menu" as="topMenu" translate="label">
<label>Navigation Bar</label>
</block>
<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
<!--line starts here-->
<block type="directory/currency" name="store_currency_selector" as="store_currency_selector" template="directory/currency.phtml"/>
<!--line ends here-->
<block type="page/template_links" name="top.links" as="topLinks"/>
<block type="page/html_wrapper" name="top.bar" as="topBar" translate="label">
<label>Breadcrumbs</label>
<action method="setElementClass"><value>top-bar</value></action>
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
</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>

And finally there’s one more thing you need to do to inject our custom template so you can see it on frontend, Open “YOUR_PACKAGE/YOUR_THEME/template/page/html/header.phtml” (or create new file if there’s none there) and add yet another line:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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?>
<p class="top-promo" title="<?php echo $this->__('Free Shipping on orders over 50$'); ?>">
<?php echo $this->__('Free Shipping on orders over 50$'); ?></p>
<?php echo $this->getChildHtml('topMenu') ?>
</div>
<div class="quick-access">
<?php echo $this->getChildHtml('store_language') ?>
<!--Inserted line starts-->
<?php echo $this->getChildHtml('store_currency_selector') ?>
<!--Inserted line ends-->
<p class="welcome-msg"><?php echo $this->getWelcome()?></p>
<?php echo $this->getChildHtml('topLinks') ?>
</div>
<?php echo $this->getChildHtml('topBar') ?>
<?php echo $this->getChildHtml('topContainer'); ?>
</div>

After this if you save everything and reload page, you should see something like this (I’ve added US Dollars and Euro as currencies, and have selected Euro on frontend):

Leave a Reply

You must be logged in to post a comment.