Jump to content
PrestaMarketing

How to add Flags on Languages Block, for PS 1.6

Recommended Posts

The default theme of the 1.6 Prestashop version is very comprehensive, but we missed the flags on the language selector, instead of (or plus) language text.

 

We wanted to complete the original blocklanguages selector:

 

original-languages-block.png

 

into this:

 

shown-flags.png

We have make little changes to do work flags on our customized default prestashop 1.6 theme, and want to share it with you:

 

Basically, what we did was add these code lines to our "blocklanguages.tpl" file:

<img style="border: solid 3px #fff; margin-right:5px;" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" />

Of course, you can modify the width and height of your flags and adapt your CSS as you need.

 

We use 1.6.0.5 version and this is the full code on our "blocklanguages.tpl" file (that should work on all 1.6 versdions). As you can see, we have commented a line at the end of the tpl, to replace 

{$language.name|regex_replace:"/\s.*$/":""}

by the flag image code. Here you are, the full content code in "../themes/default-bootstrap/modules/blocklanguages.tpl":

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- Block languages module -->
{if count($languages) > 1}
	<div id="languages-block-top" class="languages-block">
		{foreach from=$languages key=k item=language name="languages"}
			{if $language.iso_code == $lang_iso}
				<div class="current">
			<!-- Flag image -->		
			<img style="border: solid 3px #fff; margin-right:5px;" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" /><!-- /Flag image -->
		<span>{$language.name|regex_replace:"/\s.*$/":""}</span>
                    
				</div>
			{/if}
		{/foreach}
		<ul id="first-languages" class="languages-block_ul toogle_content">
			{foreach from=$languages key=k item=language name="languages"}
				<li {if $language.iso_code == $lang_iso}class="selected"{/if}>
				{if $language.iso_code != $lang_iso}
					{assign var=indice_lang value=$language.id_lang}
					{if isset($lang_rewrite_urls.$indice_lang)}
						<a href="{$lang_rewrite_urls.$indice_lang|escape:'html':'UTF-8'}" title="{$language.name}">
					{else}
						<a href="{$link->getLanguageLink($language.id_lang)|escape:'html':'UTF-8'}" title="{$language.name}">
					{/if}
				{/if}
						<span><!-- Flag image --><img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" /><!-- /Flag image--><!--{$language.name|regex_replace:"/\s.*$/":""}--></span>
				{if $language.iso_code != $lang_iso}
					</a>
				{/if}
				</li>
			{/foreach}
		</ul>
	</div>
{/if}
<!-- /Block languages module -->

You can download the tpl too if you prefer to replace it by the original. We recommend you make a backup or, better, rename the original file in case you have to restore it in the future.

 

We hope you find this litte contributtion useful  :)

blocklanguages.zip

Edited by PrestaMarketing (see edit history)
  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

is it possible to display flags only on a single line ? with a grey effect for the language(s) witch are not selected ?

Share this post


Link to post
Share on other sites

for li element style add style="display:inline-block; float:left;" optionally add some padding / or margin param

Share this post


Link to post
Share on other sites

The default theme of the 1.6 Prestashop version is very comprehensive, but we missed the flags on the language selector, instead of (or plus) language text.

 

We wanted to complete the original blocklanguages selector:

 

original-languages-block.png

 

into this:

 

shown-flags.png

We have make little changes to do work flags on our customized default prestashop 1.6 theme, and want to share it with you:

 

Basically, what we did was add these code lines to our "blocklanguages.tpl" file:

<img style="border: solid 3px #fff; margin-right:5px;" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" />

Of course, you can modify the width and height of your flags and adapt your CSS as you need.

 

We use 1.6.0.5 version and this is the full code on our "blocklanguages.tpl" file (that should work on all 1.6 versdions). As you can see, we have commented a line at the end of the tpl, to replace 

{$language.name|regex_replace:"/\s.*$/":""}

by the flag image code. Here you are, the full content code in "../themes/default-bootstrap/modules/blocklanguages.tpl":

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- Block languages module -->
{if count($languages) > 1}
	<div id="languages-block-top" class="languages-block">
		{foreach from=$languages key=k item=language name="languages"}
			{if $language.iso_code == $lang_iso}
				<div class="current">
			<!-- Flag image -->		
			<img style="border: solid 3px #fff; margin-right:5px;" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" /><!-- /Flag image -->
		<span>{$language.name|regex_replace:"/\s.*$/":""}</span>
                    
				</div>
			{/if}
		{/foreach}
		<ul id="first-languages" class="languages-block_ul toogle_content">
			{foreach from=$languages key=k item=language name="languages"}
				<li {if $language.iso_code == $lang_iso}class="selected"{/if}>
				{if $language.iso_code != $lang_iso}
					{assign var=indice_lang value=$language.id_lang}
					{if isset($lang_rewrite_urls.$indice_lang)}
						<a href="{$lang_rewrite_urls.$indice_lang|escape:'html':'UTF-8'}" title="{$language.name}">
					{else}
						<a href="{$link->getLanguageLink($language.id_lang)|escape:'html':'UTF-8'}" title="{$language.name}">
					{/if}
				{/if}
						<span><!-- Flag image --><img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" /><!-- /Flag image--><!--{$language.name|regex_replace:"/\s.*$/":""}--></span>
				{if $language.iso_code != $lang_iso}
					</a>
				{/if}
				</li>
			{/foreach}
		</ul>
	</div>
{/if}
<!-- /Block languages module -->

You can download the tpl too if you prefer to replace it by the original. We recommend you make a backup or, better, rename the original file in case you have to restore it in the future.

 

We hope you find this litte contributtion useful  :)

 

The default theme of the 1.6 Prestashop version is very comprehensive, but we missed the flags on the language selector, instead of (or plus) language text.

 

We wanted to complete the original blocklanguages selector:

 

original-languages-block.png

 

into this:

 

shown-flags.png

We have make little changes to do work flags on our customized default prestashop 1.6 theme, and want to share it with you:

 

Basically, what we did was add these code lines to our "blocklanguages.tpl" file:

<img style="border: solid 3px #fff; margin-right:5px;" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" />

Of course, you can modify the width and height of your flags and adapt your CSS as you need.

 

We use 1.6.0.5 version and this is the full code on our "blocklanguages.tpl" file (that should work on all 1.6 versdions). As you can see, we have commented a line at the end of the tpl, to replace 

{$language.name|regex_replace:"/\s.*$/":""}

by the flag image code. Here you are, the full content code in "../themes/default-bootstrap/modules/blocklanguages.tpl":

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <contact@prestashop.com>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!-- Block languages module -->
{if count($languages) > 1}
	<div id="languages-block-top" class="languages-block">
		{foreach from=$languages key=k item=language name="languages"}
			{if $language.iso_code == $lang_iso}
				<div class="current">
			<!-- Flag image -->		
			<img style="border: solid 3px #fff; margin-right:5px;" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" /><!-- /Flag image -->
		<span>{$language.name|regex_replace:"/\s.*$/":""}</span>
                    
				</div>
			{/if}
		{/foreach}
		<ul id="first-languages" class="languages-block_ul toogle_content">
			{foreach from=$languages key=k item=language name="languages"}
				<li {if $language.iso_code == $lang_iso}class="selected"{/if}>
				{if $language.iso_code != $lang_iso}
					{assign var=indice_lang value=$language.id_lang}
					{if isset($lang_rewrite_urls.$indice_lang)}
						<a href="{$lang_rewrite_urls.$indice_lang|escape:'html':'UTF-8'}" title="{$language.name}">
					{else}
						<a href="{$link->getLanguageLink($language.id_lang)|escape:'html':'UTF-8'}" title="{$language.name}">
					{/if}
				{/if}
						<span><!-- Flag image --><img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="32" height="22" /><!-- /Flag image--><!--{$language.name|regex_replace:"/\s.*$/":""}--></span>
				{if $language.iso_code != $lang_iso}
					</a>
				{/if}
				</li>
			{/foreach}
		</ul>
	</div>
{/if}
<!-- /Block languages module -->

You can download the tpl too if you prefer to replace it by the original. We recommend you make a backup or, better, rename the original file in case you have to restore it in the future.

 

We hope you find this litte contributtion useful  :)

All very nice. But after I replaced the code, I can not choose between the languages. In my case the German flag is seen but not English. Where is the error?

All very nice. But after I replaced the code, I can not choose between the languages. In my case the German flag is seen but not English. Where is the error?

Share this post


Link to post
Share on other sites


 

Try this...

 

<div id="languages_block_top">

<div id="countries">

  <ul style="list-style:none;">

  {foreach from=$languages key=k item=language name="languages"}

   <li {if $language.iso_code == $lang_iso}class="selected_language"{/if} style="display:inline-block;margin:2px;">

   {if $language.iso_code != $lang_iso}

    {assign var=indice_lang value=$language.id_lang}

    {if isset($lang_rewrite_urls.$indice_lang)}

     <a href="{$lang_rewrite_urls.$indice_lang|escape:htmlall}" title="{$language.name}">

    {else}

     <a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}">

    {/if}

   {/if}

     <img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />

   {if $language.iso_code != $lang_iso}

    </a>

   {/if}

   </li>

  {/foreach}

  </ul>

</div>

</div>

  • Like 1

Share this post


Link to post
Share on other sites

Mi version de prestashop 1.6.9, es en español, quizas sea eso, porque no veo manera de meter eso blocklanguages.tpl

Share this post


Link to post
Share on other sites

Mi version de prestashop 1.6.9, es en español, quizas sea eso, porque no veo manera de meter eso blocklanguages.tpl

 

Hola ocx,

 

revisa lo que has hecho porque si funciona en la 1.6.0.9. Mira aquí.

 

Saludos.

Share this post


Link to post
Share on other sites

Funciona con la 1.6.0.13??  Donde hay que meter las imágenes de las banderas??

Share this post


Link to post
Share on other sites

Funciona con la 1.6.0.13??  Donde hay que meter las imágenes de las banderas??

 

Hola booble,

no lo he probado en la 1.6.0.13 pero te debería funcionar.

Con las imágenes de las banderas no tienes que hacer nada, tan sólo añadir los idiomas que necesites desde tu backoffice.

Espero que te sirva.

 

Hi booble,

I haven't tested this with the version 1.6.0.13 but I suppose It will be running.
With the flag images you have not to do nothing, only you have to add the languages from your backoffice.
I hope to help you.

Share this post


Link to post
Share on other sites

Hola ocx,

 

revisa lo que has hecho porque si funciona en la 1.6.0.9. Mira aquí.

 

Saludos.

 

Hi

Do I have to change only blocklanguages.tpl or something else?

Share this post


Link to post
Share on other sites

Hi

Do I have to change only blocklanguages.tpl or something else?

 

Hi wiedzmin,

to see the flag images only you have to change this file, also you can play with the css to obtain other result.

Regards.

Share this post


Link to post
Share on other sites

Hi wiedzmin,

to see the flag images only you have to change this file, also you can play with the css to obtain other result.

Regards.

Hi Goyo

 

Not working for me, change this file and nothing, maybe I have to reset some cache?

Regards

Edited by wiedzmin (see edit history)

Share this post


Link to post
Share on other sites

Hi Goyo

 

Not working for me, change this file and nothing, maybe I have to reset some cache?

Regards

 

Hi wiedzmin,
 
Yes, It's possible you will have to clean cache in your browser and, also, in Prestashop back-office (Advanced Parameters -> Performance). You can do this, always if you don't obtain the result you are waiting after changes.
 
Also, be sure you have selected the option "Force compilation" and Cache = NO in Advanced Parameters -> Performance.
 
Please check the last options and be sure you download the file blocklanguages.zip you can find in the post #1 and unzip It, then copy/replace the file blocklanguages.tpl inside of the folder /your_theme/modules/blocklanguages/
 
If you don't solve this, don't hesitate to contact me with a private message and send me the Ftp access or, if you use TeamViwer, send me your connection data and we can do it toguether.
 
I tested these changes with the version 1.6.0.14 and It's running, you can check here (I have added other Css changes).
 
I hope to help you.
 
Regards.
 
Goyo.
  • Like 1

Share this post


Link to post
Share on other sites

 

Hi wiedzmin,
 
Yes, It's possible you will have to clean cache in your browser and, also, in Prestashop back-office (Advanced Parameters -> Performance). You can do this, always if you don't obtain the result you are waiting after changes.
 
Also, be sure you have selected the option "Force compilation" and Cache = NO in Advanced Parameters -> Performance.
 
Please check the last options and be sure you download the file blocklanguages.zip you can find in the post #1 and unzip It, then copy/replace the file blocklanguages.tpl inside of the folder /your_theme/modules/blocklanguages/
 
If you don't solve this, don't hesitate to contact me with a private message and send me the Ftp access or, if you use TeamViwer, send me your connection data and we can do it toguether.
 
I tested these changes with the version 1.6.0.14 and It's running, you can check here (I have added other Css changes).
 
I hope to help you.
 
Regards.
 
Goyo.

 

 

Big Big Thanks Goyo now working.

 

Regards

Wiedzmin

Share this post


Link to post
Share on other sites

Big Big Thanks Goyo now working.

 

Regards

Wiedzmin

 

Ok, a pleasure to help you.
 

 

You are welcome!!!
 
Goyo.

Share this post


Link to post
Share on other sites

 

Hi wiedzmin,
 
Yes, It's possible you will have to clean cache in your browser and, also, in Prestashop back-office (Advanced Parameters -> Performance). You can do this, always if you don't obtain the result you are waiting after changes.
 
Also, be sure you have selected the option "Force compilation" and Cache = NO in Advanced Parameters -> Performance.
 
Please check the last options and be sure you download the file blocklanguages.zip you can find in the post #1 and unzip It, then copy/replace the file blocklanguages.tpl inside of the folder /your_theme/modules/blocklanguages/
 
If you don't solve this, don't hesitate to contact me with a private message and send me the Ftp access or, if you use TeamViwer, send me your connection data and we can do it toguether.
 
I tested these changes with the version 1.6.0.14 and It's running, you can check here (I have added other Css changes).
 
I hope to help you.
 
Regards.
 
Goyo.

 

 

Hi Goyo, I have Prestashop 1.6.0.11 and it doesn't work. I have "Force Compilation" and "Cache=No" in advanced options. I have also cleared Prestashop/browser cache. Any suggestion? Thanks in advance!

 

PS:  In my "blocklanguage.tpl" I don't have this line

  1. {$language.name|regex_replace:"/\s.*$/":""}
  • Like 1

Share this post


Link to post
Share on other sites

 

Hi Goyo, I have Prestashop 1.6.0.11 and it doesn't work. I have "Force Compilation" and "Cache=No" in advanced options. I have also cleared Prestashop/browser cache. Any suggestion? Thanks in advance!

 

PS:  In my "blocklanguage.tpl" I don't have this line

  1. {$language.name|regex_replace:"/\s.*$/":""}

 

 

Hi borbalher,
I don't test this in the version 1.6.0.11 but I can suppose it's useful also.
Only you have to change the content of ../themes/your_theme/modules/blocklaguages.tpl for the content you will find in the post #1 or download the file and replace it. Later, clean cache in the backoffice and in the browser you are using. With this I suppose It will be run but, like I said you, I don't test this with the version 1.6.0.11.
I hope to help you.

 

Regards.

Share this post


Link to post
Share on other sites

Hello everyone

Sorry if I write on a thread of several months ago.

I modified the file .tpl to see also the flags, now I would be interested to show languages in a single line. I tried to insert the code that vekia posted, to me it only adds a blank space after the name of the language, and the dropdown remains.
I also tried the code posted from lindertmedia, that displays the languages in one line, but it seems a poorer code (also graphically is not the best), or perhaps it was used on PS 1.5, also the languages are displayed on the top left, and not top right as I want .
 
Some other solution?
 
Thank You

Share this post


Link to post
Share on other sites

Funciona con prestashop 1.6.1.4 Thanks Goyo Big master! 

 

 

Hola Txanter,

 

encantado de poder ayudarte. Gracias por tu comentario.

Share this post


Link to post
Share on other sites

Hello, idm :

 

Hi good afternoon, i change the file blcklanguajes.tpl but now not show the name of the languajes.

 

How can i show flags and names in the same lines?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More