Vous avez besoin de créer un site e-commerce PrestaShop ?

Freelance spécialisée dans la création de site de vente en ligne, je réalise des sites performants et ergonomiques, respectant l'univers de votre marque et l'expérience utilisateur.

CONFIEZ-MOI LA CRÉATION DE VOTRE FUTUR SITE E-COMMERCE

Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6

Vous désirez insérer le drapeau du pays des langues que vous avez choisies pour votre site e-commerce. L’astuce est simple et rapide.

Valable pour Prestashop 1.6.

——————-

1) Ouvrez le fichier blocklanguages.tpl qui se situe dans themes > lenomdevotretheme > modules > blocklanguages > blocklanguages.tpl.

Il va falloir insérer ce code à deux endroits. Par défaut, j’ai mis la largeur à 25 et la hauteur à 13 mais vous pouvez modifier les dimensions selon vos envies.

 <img class="imgLanguages" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="25" height="13" />

1	<img class="imgLanguages" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="25" height="13" />

Voici le code complet du fichier avec le morceaux de code ajouté.

Je l’ai mis juste devant <span>{$language.name|regex_replace: »/\s$.*$$/ »: » »}</span> qui se situe au début et à la fin

<!-- 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 class="imgLanguages" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="25" height="13" />
 <!-- /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}
 <!-- Flag image --> 
 <img class="imgLanguages" src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="25" height="13" />
 <!-- /Flag image -->
 <span>{$language.name|regex_replace:"/\s\(.*\)$/":""}</span>
 {if $language.iso_code != $lang_iso}
 </a>
 {/if}
 </li>
 {/foreach}
 </ul>
 </div>
{/if}
<!-- /Block languages module -->

{if count($languages) > 1}

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

{if $language.iso_code == $lang_iso}

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

</div>

{/if}

{/foreach}

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

{if $language.iso_code != $lang_iso}

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

{if isset($lang_rewrite_urls.$indice_lang)}

{else}

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

{/if}

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

{if $language.iso_code != $lang_iso}

</a>

{/if}

</li>

{/foreach}

</ul>

</div>

{/if}

Voila le résultat :

Je vous l’accorde il faut un peu de css pour harmoniser le tout.

2) Pour cela, on va ouvrir le fichier blocklanguages.css qui se situe dans themes > lenomdevotretheme > css > modules > blocklanguages> blocklanguages.css.

Modifier le code qui doit se situer vers la ligne 55

#languages-block-top ul li a,
      #languages-block-top ul li > span {
        padding: 0 10px 0 12px;
        display: block;
        color: #fff; }

#languages-block-top ul li a,

#languages-block-top ul li > span {

padding: 0 10px 0 12px;

display: block;

color: #fff; }

par

 #languages-block-top ul li a,
 #languages-block-top ul li > span {
    display: inline-block;
    color: #fff; }
 #languages-block-top ul li .imgLanguages {
    border:1px solid #fff; 
    margin: 0 10px;}
 #languages-block-top div .imgLanguages {
    border:1px solid #fff; 
    margin-right: 5px;}

#languages-block-top ul li a,

#languages-block-top ul li > span {

display: inline-block;

color: #fff; }

#languages-block-top ul li .imgLanguages {

border:1px solid #fff;

margin: 0 10px;}

#languages-block-top div .imgLanguages {

border:1px solid #fff;

margin-right: 5px;}

Maintenant si on regarde de nouveau votre site, le résultat est beaucoup mieux :

Capture d’écran 2015-06-29 à 15.44.23

Articles similaires

Ajouter gratuitement un live chat sur votre site | Astuce Prestashop 1.6

Qu'est qu'un live chat ? Le terme live chat désigne l'ensemble des moyens qui permet à un internaute de rentrer instantanément en contact avec un employé du site afin de répondre à ses questions. Comment installer un live chat sur sa boutique Prestashop ? Pour l'installer sur votre site en ligne, il vous faudra un module et s'enregistrer sur une platform. C'est très rapide et facile ...

Où Changer le nom de sa boutique | Astuce Prestashop 1.6

Si vous désirez modifier le nom de votre boutique sur le cms Prestashop, suivez ce petit tuto Comment modifier le nom de sa boutique depuis le back-office de Prestashop ? Connectez-vous au back-office de Prestashop Allez dans Préférences > Coordonnées et Magasins 3. Il faut scroller un peu jusqu'à "Coordonnées" Cette partie propose plusieurs réglages : - Nom de la bout...

Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop

Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieux vous aidez dans la création de votre site e-commerce. Document 1 : Modèle de cahier des charges Avant de se lancer dans l'aventure de l'e-commerce, il est très important de mettre par écrit un ensemble d'informations qui va vous aider pour la su...

Page blanche bon de livraison | Astuce Prestashop 1.6

Lorsque vous désirez télécharger le bon de livraison depuis le back-office de prestashop, vous avez le droit à une jolie page blanche. Ce bug se trouve sur la version 1.6.1.4 et 1.6.1.5 de Prestashop Voici la solution pour régler ce problème Ouvrir le fichier TemplateDeliverySlip.php qui se situe dans le dossier classes/pdf Collez le code suivant tout à la fin juste avant la dern...

Supprimer le nom de la boutique de la balise Meta Title| Astuce Prestashop 1.6

Grâce à ce tuto, vous allez pouvoir supprimer le nom de votre boutique de la balise Meta Title de vos pages sur votre site e-commerce Astuce Prestashop 1.6 ---------------------------------- Dans un premier temps, nous allons overrider le fichier Meta.php. En effet ces dans ce fichier que nous allons supprimer le paramètre Configuration::get('PS_SHOP_NAME') qui fait référence au nom de vo...

8 réponses à “Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6”

Nono dit :

3 septembre 2015 à 22 h 38 min

Bonsoir, encore moi
en effet c’est beaucoup plus visible avec les drapeaux, merci.
cependant, quand je mouse-over sur english
la moitié du rectangle est d’une autre couleur
quelle ligne dans le css pour régler ca?

voici ce que ca donne:
http://postimg.org/image/6ev21880v/
c_majory dit :

4 septembre 2015 à 9 h 46 min

Bonjour,

Le fichier css pour modifier le bloc langue se trouve dans ../themes/nomdevotretheme/css/modules/blocklanguages/blocklanguages.css
Nono dit :

4 septembre 2015 à 10 h 49 min

Bonjour
Oui ça à priori j’avais compris, je ne trouve pas quelle ligne modifier pour que la ligne anglais soit de la meme couleur quand on passe dessus avec la souris, et que ca ne fasse pas moitié marron, moitié gris comme sur l’image citée dans mon 1er post
c_majory dit :

5 septembre 2015 à 17 h 03 min

Bonjour,

Pouvez-vous me donner une adresse url ?
David BINGUE dit :

25 septembre 2015 à 8 h 23 min

Hello,

Je me permet, car j’ai été confronté au même problème, il faut rajouter :

display: block;

à

#languages-block-top ul li.selected, #languages-block-top ul li:hover a { > un peu plus bas

Bien cordialement
Musashi dit :

15 octobre 2015 à 9 h 21 min

Bonjour,

Je suis sous prestashop 1.6.1.1 et j’utilise le thème par défault.
Je suis novice dans le domaine mais j’ai effectué les opérations tel que vous les avez expliqué et cela ne donne rien , aucun drapeau s’affiche.
Serait ce dû à la version que j’utilise ou bien aurais je effectué une erreur ?

Cordialement
c_majory dit :

16 octobre 2015 à 17 h 23 min

Bonjour,

Oui l’astuce fonctionne aussi sur cette version

1) Avez-vous bien modifié le tpl qui se situe à l’intérieur de votre thème ? Dans votre cas default-boostrap

2) Avez-vous vider votre cache ? Back office de presta > Paramètres avancés > Performances > Vider le cache (en haut à droite)
Christophe Jaouen dit :

18 janvier 2018 à 14 h 39 min

Bonjour,
Merci pour ce tuto qui m’a permis de débloquer un client en 2 temps 3 mouvements.
Pour info, en ajoutant un width:100%; sur la ligne css juste en dessous, on évite le souci de hover (couleur qui s’arrête juste après le texte au passage de la souris et non à la fin du ) évoqué par Nono en commentaire.
Dans mon cas :
#languages-block-top ul li.selected, #languages-block-top ul li:hover a {
background: #484848;
width:100%;}

Laisser un commentaire

RECHERCHE

About Me

Freelance spécialisée en création de sites E-Commerce PrestaShop, je vous accompagne tout au long de votre projet afin de construire ensemble un site marchand parfaitement adapté à votre environnement et aux exigences de vos futurs clients: création et intégration de votre charte graphique, formation, conseil, aide au référencement…

N’hésitez pas à me contacter pour un devis ou simplement si vous avez des questions, je vous répondrai avec plaisir.

Contact: cubizollesmajory@gmail.com