Magento – How to replace the standard language switcher with flags? Magento 2.1.0

languagemagento2multistorestoresswitcher

I am migrating my Magento 1.9 store to Magento 2.1.

I am still quite new in Magento 2.1 and I can't seem to find some things.

Any guidelines on how to replace the textual store switcher with flags?

Best Answer

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.

  1. create all missing folders on this path: /var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch
  2. copy the code of language.phtml and add it to this folder
  3. 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
  4. add the line <css src="css/languageSwitcher.css"/>
  5. copy the code of languageSwitcher.css and add it to folder /var/www/magento/app/design/frontend/{namespace}/{name}/web/css
  6. 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.
  7. 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;
}
Related Topic