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.

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

Voila le résultat  : 

Ajouter le drapeau du pays dans le bloc langues | Prestashop

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

par

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

Insérer pop-up dans une page CMS | Astuce Prestashop 1.6
views 3324
Un client désirait insérer un système de pop-up dans la page cms de Prestashop Je ne voulais pas installer un n-ième module pour faire simplement c...
Comment activer SSL dans PrestaShop 1.6 & 1.7 ?
views 1417
Dans ce tuto nous allons voir comment activer le SSL sur votre boutique, c'est tout simple Qu'est- ce que le SSL ? Lorsque vous regardez l'url des s...
La structure des fichiers du nouveau thème Classic | Prestashop 1.7
views 12603
La version stable de Prestashop 1.7 est sortie ce lundi et comme vous pourrez le constater, la structure des fichiers dans le dossier thème a totaleme...
Braintree – Une solution de Paiement sans VAD | Prestashop
views 5007
Qu'est-ce que Braintree ?  Braintree offre une solution complète de paiement pour les e-marchands sur mobile, tablette et bureau. C'est une entrepris...
Supprimer le contenu par défaut de votre boutique | Astuce Prestashop 1.6
views 3817
Lorsque vous installez Prestashop pour la 1er fois, du contenu par défaut est installé : faux clients, faux produits, fausses commandes.... Si vous...
Comment insérer une nouvelle langue automatiquement | Prestashop 1.6 / 1.7
views 4985
Vous souhaitez que votre boutique de vente en ligne soit en plusieurs langues afin de toucher une clientèle très large ? Il est très facile depuis ...
Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6
views 4494
Ce tutorial va vous permettre de transformer les tabs "Populaire", "Meilleurs ventes", "Nouveaux Produits" et "Promotions" de la page d'accueil en blo...
Comment afficher le nom du produit complet – PrestaShop 1.6 &1.7
views 947
Dans PrestaShop 1.6 et 1.7, si vos noms de produit sont trop long, ils vont être coupés. Vous désirez peut-être avoir le nom complet, c'est très si...
Pourquoi faut-il migrer sur Prestashop 1.6 | Infographie
views 180
Cette infographie, met en avant les différentes raisons pour migrer son site Prestashop sur la version 1.6 En voici quelques-unes : - le thème par d...
Insérer une page CMS sur votre formulaire de contact | PrestaShop 1.6
views 1908
Vous désirez insérer une page cms à l'intérieur de votre formulaire de contact de votre boutique PrestaShop Rien de plus simple avec ce petit tuto ...
  1. c_majory Auteur de l’article

    Bonjour,

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

  2. Nono

    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

  3. David BINGUE

    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

  4. Musashi

    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

  5. c_majory Auteur de l’article

    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)

  6. Christophe Jaouen

    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

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *