7

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?

Improve this question

3 Answers 3

Reset to default
12

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/{theme_dir}/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/design/frontend/{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;
}
Improve this answer
1

Create a file in your theme /app/design/frontend/Vendor/Theme/Magento_Store/templates/switch/languages.phtml

<?php
/**
 * Language switcher template
 */
if (count($this->getStores())) { ?>
<div class="langs-wrapper">
    <?php foreach ($this->getStores() as $_lang) { ?>
        <a class="lang-flag" href="#" data-post='<?php echo $block->getTargetStorePostData($_lang); ?>'><img src="<?php echo $this->getViewFileUrl('images/flags/' . $_lang->getCode() . '.png');?>" alt="<?php echo $_lang->getName(); ?>" /></a>
    <?php } ?>
    </div>
<?php
}

This will make the language-switch persist using a session rather than just switch language on the specific page and discard it on next.

Improve this answer
0

You can put below code in your template file.

enter image description here

Add your Country Flag Images inside “flag” directory in skin/[your_theme]/images/folder and name it as the store view code.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.