Magento切換語言下拉顯示國旗

參考:http://mengento.com/magento切換語言-國旗圖標.html

注意:下面我的做法走多了個彎,由於我是接我的同事手尾做的,他使用code的命名,例如de_germany_german,圖片命名爲germany.png,使得代碼要多判斷一步,可以參照上面的參考鏈接裏的命名規範和代碼寫法。


添加各個語言商店:Backend->System->Manage Stores
未添加多商店時的數據表(core_store):

Magento切換語言下拉顯示國旗 - SNSD - Dream about me

已添加多商店時的數據表(core_store):

Magento切換語言下拉顯示國旗 - SNSD - Dream about me


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
效果圖:

Magento切換語言下拉顯示國旗 - SNSD - Dream about me

http://zjp2230987.blog.163.com/blog/static/114098041201342094911904/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章