[Mini Tutorial] – Magento Store Switcher as Country Flags

The following post is a quick tutorial to enable your Magento store switcher as country flags. We have included the code below to help you get started.

Related: Mini Tutorial -- How to use MYSQL String Functions to filter a Magento collection

You have two stores for countries US and Canada having store codes “us” and “ca” respectively.

This is the php* and html* code for the flag switches: <div class="store-countries">
<?php
$websites = Mage::getModel('core/website')->getCollection();
foreach($websites as $website):
$default_store = $website->getDefaultStore();
$url_obj = new Mage_Core_Model_Url();
$default_store_path = $url_obj->getBaseUrl(array('_store'=>     $default_store->getCode()));
$current = strstr($this->helper('core/url')->getCurrentUrl(), $default_store_path);
if($default_store->getCode() == 'ca'){
$country = 'canada';
if(strstr($default_store_path,$this->helper('core/url')->getCurrentUrl())){
$current = true;
}?>
<a href="<?php if(!$current) echo $default_store_path; else echo '#' ?>" title="Shop in Canadian dollars">&nbsp;</a>
<?php }
elseif($default_store->getCode() == 'us') {
$country = 'usa'; ?>
<a href="<?php if(!$current) echo $default_store_path; else echo '#' ?>" title="Shop in US dollars">&nbsp;</a>
<?php }
?>

<?php endforeach; ?>
</div>

Here is the css*:


.store-countries { float: right }
.store-countries a {
display: block;
float: left;
height: 20px;
text-decoration: none;
width: 26px;
}

.store-countries a.current.canada {
background: url("../images/CAflag.jpg") no-repeat scroll 0 0 transparent;
}

.store-countries a.current.usa {
background: url("../images/USflag.jpg") no-repeat scroll 0 0 transparent;
}

.header-panel .store-countries a.not-current.canada {
background: url("../images/GreyCAflag.jpg") no-repeat scroll 0 0 transparent;
}

.store-countries a.not-current.usa {
background: url("../images/GreyUSflag.jpg") no-repeat scroll 0 0 transparent;
}

.store-countries a {
display: block;
float: left;
height: 20px;
text-decoration: none;
width: 26px;
}

.store-countries a.usa {
margin: 0 5px;
}

Required images (size: 26 x 20 px)

• GreyCAflag.jpg
• CAflag.jpg
• GreyUSflag.jpg
• USflag.jpg

* All coding was done by Michael Kreitzer