參考:http://mengento.com/magento切換語言-國旗圖標.html
注意:下面我的做法走多了個彎,由於我是接我的同事手尾做的,他使用code的命名,例如de_germany_german,圖片命名爲germany.png,使得代碼要多判斷一步,可以參照上面的參考鏈接裏的命名規範和代碼寫法。
添加各個語言商店:Backend->System->Manage Stores
未添加多商店時的數據表(core_store):
已添加多商店時的數據表(core_store):
app\design\frontend\default\[your template]\template\page\switch\languages.phtml
<?php
/**
* Language switcher template
*
* @see Mage_Page_Block_Switch
*/
?>
<script>
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
<style>
ul.label {
width: 180px;
height: 20px;
color: #000;
float: left;
list-style-type: none;
background: #eef7fe;
margin-top: 3px;
border: 1px solid #7f9db9;
position: relative;
z-index: 9999;
}
ul.label li {
width: 180px;
height: 20px;
line-height: 20px;
float: left;
transparent url(<?php echo $this->getSkinUrl('images/list_down.gif')?>) no-repeat 163px 3px;
}
ul.label li a, ul.label li a:hover {
color: #000;
text-decoration: none;
padding-left: 35px;
background-repeat: no-repeat;
display: block;
background-position: 2px 4px;
text-align: left;
}
.lispan {
float: left;
display: inline-block;
width: 70px;
height: 28px;
line-height: 28px;
}
#listul {
width: 180px;
background: #3398ff;
position: absolute;
left: -1px;
top: 20px;
display: none;
border: 1px solid #7f9db9;
}
#listul li {
width: 145px;
text-align: left;
background: #eef7fe;
background-repeat: no-repeat;
background-position: 2px 4px;
}
#listul li a {
display: inline-block;
width: 145px;
color: #000;
text-decoration: none;
background: #eef7fe;
padding-left: 35px;
background-repeat: no-repeat;
background-position: 2px 4px;
}
#listul li a:hover, #listul li.on {
display: inline-block;
width: 145px;
color: #fff;
text-decoration: none;
background: #3398ff;
padding-left: 35px;
background-repeat: no-repeat;
background-position: 2px 4px;
}
</style>
<?php if(count($this->getStores())>1): ?>
<?php
$isoCode = Mage::app()->getLocale()->getLocale();
$parts = explode("_", $isoCode);
$selectedLang = $parts[0];
if($selectedLang == "en"):
$selectedLang = "usa";
elseif($selectedLang == "de"):
$selectedLang = "germany";
elseif($selectedLang == "es"):
$selectedLang = "spain";
elseif($selectedLang == "fr"):
$selectedLang = "france";
elseif($selectedLang == "pt"):
$selectedLang = "portugal";
elseif($selectedLang == "ru"):
$selectedLang = "russia";
elseif($selectedLang == "zh"):
if($parts[1]=="CN"):
$selectedLang = "china";
else:
$selectedLang = "hongkong";
endif;
endif;
?>
<span class="lispan"><?php echo $this->__('Language') .':' ;?></span>
<?php
$out = '';
$ulcss = 'style="background-image:url(' .$this->getSkinUrl('images/flags/'.$selectedLang.'.png') .');"';
foreach($this->getStores() as $_lang)
{
$langName = $this->__($this->htmlEscape($_lang->getName()));
$langId = $_lang->getId();
$countries = $_lang->getCode();
$country = split('_',$countries);
$countryFlag = $country[1];
$css = 'style="background-image:url(' .$this->getSkinUrl('images/flags/'.$countryFlag.'.png') .');"';
if($langId == $this->getCurrentStoreId())
{
$selectedLang = $langName;
$out .= '<li ' . $css . ' class="on">'. $langName .'</li>';
}
else
$out .= '<li ><a ' . $css . ' href="'. $_lang->getCurrentUrl() .'">'. $langName .'</a></li>';
}
print '<ul class="label"><li href="#" '.$ulcss.'>'. $selectedLang .'</a><ul id="listul">'.$out.'</ul></li></ul>';
?>
<?php endif; ?>
國旗的圖片放到
skin\frontend\base\default\images\flags
效果圖:
http://zjp2230987.blog.163.com/blog/static/114098041201342094911904/