Create your extension with it's own layout file and block that adds links to the top menu.
Let's call that Easylife_Locale
. You will need the following files:
app/etc/modules/Easylife_Locale.xml
- the declaration file
<?xml version="1.0"?>
<config>
<modules>
<Easylife_Locale>
<codePool>local</codePool>
<active>true</active>
<depends>
<Mage_Core />
</depends>
</Easylife_Locale>
</modules>
</config>
app/code/local/Easylife/Locale/etc/config.xml
- the configuration file
<?xml version="1.0"?>
<config>
<modules>
<Easylife_Locale>
<version>1.0.0</version>
</Easylife_Locale>
</modules>
<global>
<blocks>
<easylife_locale>
<class>Easylife_Locale_Block</class>
</easylife_locale>
</blocks>
</global>
<frontend>
<layout>
<updates>
<easylife_locale>
<file>easylife_locale.xml</file>
</easylife_locale>
</updates>
</layout>
</frontend>
</config>
app/design/frontend/base/default/layout/easylife_locale.xml
- the frontend layout file
<?xml version="1.0"?>
<layout>
<default>
<reference name="top.links">
<block type="easylife_locale/stores" name="stores_links">
<action method="addStoreLinks"></action>
</block>
</reference>
</default>
</layout>
app/code/local/Easylife/Locale/Block/Stores.php
- the block that adds the links to the top.
<?php
class Easylife_Locale_Block_Stores extends Mage_Page_Block_Switch {
public function addStoreLinks() {
$parentBlock = $this->getParentBlock();
if ($parentBlock) {
$position = 200; //start position
foreach ($this->getStores() as $store) {
$params = null;
if ($store->getId() == $this->getCurrentStoreId()) {
$params = 'class="current-store"';
//if you want to skip the current store view just uncomment the next line
//continue;
}
//Print the language code (en, fr)
$text = substr(Mage::app()->getLocale()->getLocaleCode(), 0, 2);
//if your want to display the store name comment the line above and uncomment the one below
//$text = $store->getName();
$title = $store->getName();
$parentBlock->addLink($text, $store->getCurrentUrl(), $title, false, array(), $position, null, $params);
$position += 10;
}
}
return $this;
}
}
Clear the cache and try it out.
I was struggling with the same problem for some time and finally managed to solve it. Maybe you already solved it by now, but it can definitely be useful for others.
Summary
The needed code can be found at the end of this post.
- create all missing folders on this path:
/var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch
- copy the code of
language.phtml
and add it to this folder
- go to file
/var/www/magento/app/code/{theme_dir}/Magento_Theme/view/frontend/layout/default_head_blocks.xml
.
- If it doesn't exist, copy it from /var/www/magento/vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
- add the line
<css src="css/languageSwitcher.css"/>
- copy the code of
languageSwitcher.css
and add it to folder /var/www/magento/app/design/frontend/{namespace}/{name}/web/css
- create folder
/var/www/magento/app/design/frontend/{namespace}/{name}/web/images/flags
and add flags with naming convention flag_{country_ID}.png
e.g. flag_en.png
. All images need to have the same resolution.
- Recompile...haven't figured out yet if you also need to flush the cache...just do trial and error.
Extended explanation and extra information
First, you need to find, which template is responsible for the language switcher. Therefore, head to the admin-site of your Magento installation, go to Store > Configuration > Advanced > Developer > Debug > Enabled Template Path Hints for Storefront > Yes
. Now reload the page of your store and you will see a lot of red boxes with names in it. The box which contains the drop-down language-switcher has a path like:
/var/www/magento/vendor/magento/module-store/view/frontend/templates/switch/languages.phtml
.
What you want to do is to create your own template and add the changes you want. Therefore, NEVER change the aforementioned template. It is not safe because every Magento update will overwrite the changes (and maybe something else will do as well....). The recommended way is:
Copy the template to the path:
/var/www/magento/app/design/frontend/{namespace}/{name}/{vendor_name}_{module_name}/templates/{path_to_template}/template.phtml
.
{namespace} = the module's namespace (e.g. your company/domain/...)
{name} = name of the module
{vendor_name} = the name of the vendor, which provided the template
{module_name} = the module in which the template lies
{path_to_template} = the path to the right of templates
In our case, this results to:
/var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch/languages.phtml
Now, this should already work, if you make some changes to the copy, they should appear on the site.
CSS
In my solution I also used a css file to style the template. Therefore we need to add the path to the default_head_blocks.xml
. The default file lies in app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
To make changes to this file, copy it to your corresponding folder and add the path to the css file. Path:
/var/www/magento/app/code/{theme_dir}/{Magento_Theme}/view/frontend/layout
Therein you can also add extra *.js files and other sources.... add this line to the end of default_head_blocks.xml (but inside the <head>
tags): <css src="css/languageSwitcher.css"/>
.
Navigate to the folder /var/www/magento/app/design/frontend/{namespace}/{name}/web/css
and add the languageSwitcher.css
.
Next, head to .../web/images
and create the folder flags
. Add images to the folder with the naming convention: flag_{country_ID}.png
. E.g. for English use flag_en.png
. They all need to have the same resolution.
Code (languages.phtml & languageSwitcher.css)
languages.phtml
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/**
* Language switcher template
*/
?>
<?php if(count($this->getStores())>1): ?>
<div class="langs-wrapper">
<?php foreach ($this->getStores() as $_lang): ?>
<?php if ($_lang->getCode() != 'default'): ?>
<a class="lang-flag" href="<?php echo $this->getCurrentUrl() . '?___store=' . $_lang->getCode();?>"><img src="<?php echo $this->getViewFileUrl('images/flags/flag_' . $_lang->getCode() . '.png');?>" alt="<?php echo 'could not find image for ' . $_lang->getName() ?>"/></a>
<?php endif;?>
<?php endforeach;?>
</div>
<?php endif;?>
languageSwitcher.css
.langs-wrapper {
height: 15px;
}
.lang-flag {
width: 55px;
height: 32.5px;
float: left;
margin-left: 10px;
border: 1px solid transparent;
}
.lang-flag:hover {
border: 2.5px solid #FFF;
}
Best Answer
Solution: