'' Afficher les drapeaux dans le sélecteur de langue 2024 '' ''

Afficher les drapeaux dans le sélecteur de langue - Prestashop 1.6, 1.7

Parfois, vous voulez afficher des drapeaux dans le sélecteur de langue de votre thème Prestashop. Nos clients m'ont aussi demandé comment montrer les drapeaux et parfois ils veulent afficher les drapeaux de la liste déroulante à la ligne.

Tout ce dont vous avez besoin est d'ouvrir ce fichier : your-website/themes/classic/modules/ ps_languageselector/ps_languageselector.tpl en utilisant votre éditeur de code favori (mon outil : text editor :D) et changez-le comme vous le souhaitez.

Afficher les drapeaux dans le sélecteur de langue - Prestashop 1.6, 1.7

`

Changeur de langue avec des drapeaux

Jetez un coup d'œil dans le fichier. Dans Prestashop 1.6 et Prestashop 1.7, vous trouverez quelque chose comme ça :

<li {if $language.id_lang == $current_language.id_lang} class="current" {/if}>
            <a href="/{url entity='language' id=$language.id_lang}" class="dropdown-item">
                    {$language.name_simple}
           </a>
</li>

Ok, maintenant nous devons ajouter l'image du drapeau. Changez-le pour :

<li {if $language.id_lang == $current_language.id_lang} class="current" {/if}>
            <a href="/{url entity='language' id=$language.id_lang}" class="dropdown-item">
                 <img src="https://presta.b-cdn.net/img/l/{$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />
                 {$language.name_simple}
            </a>
</li>

Vous pourriez vouloir montrer le drapeau sur la langue actuelle. Trouvez ce code :

{$current_language.name_simple}

Changez-le pour :

<img src="https://presta.b-cdn.net/img/l/{$current_language.id_lang}.jpg" alt="{$current_language.iso_code}" width="16" height="11" /> 
{$current_language.name_simple}

Les images de langue se trouvent dans le dossier /your-website/img/l/. Enregistrez les modifications et profitez de la première étape!

Afficher en ligne

Dans le cas où vous souhaitez afficher les drapeaux en ligne, ouvrez le fichier ci-dessus, supprimez tout et passez le code source:

<span id="language-selector-label" class="hidden-md-up">{l s='Language:' d='Shop.Theme.Global'}
{foreach from=$languages item=language}
            <a href="/{url entity='language' id=$language.id_lang}" style="margin-right:3px; margin-top: .9375rem;">
                   <img src="https://presta.b-cdn.net/img/l/{$language.id_lang}.jpg" style="{if $language.id_lang == $current_language.id_lang}border:3px solid rgba(0, 0, 0, 0.71);{else}border:3px solid #fff;{/if}" alt="{$language.iso_code}" width="22" height="17" />
           </a>
{/foreach}

Comme vous pouvez le voir, ceci est un tutoriel basique et très simple. La chose la plus importante est de s'assurer que vos clients savent où ils cherchent.

Si vous êtes prêt à plonger et à commencer à personnaliser votre site Web Prestashop, assurez-vous de télécharger SOO Magic Menu pour personnaliser les menus du site Web comme vous le souhaitez.

Personnalisez les menus Prestashop

Apprendre encore plus

New module.

Xleft module

Xleft shows customers how much more they need to spend to get free shipping in real time.

Dernière mise à jour des modules!

Age Restriction - 18+ ⊙
Corrigez certains problèmes d’affichage sur les appareils mobiles.


Newsletter Popup v3.2.2
Édition de Noël pour booster vos ventes.


Trusty v1.4.7 ⊙
Compatible avec PrestaShop 1.7 et PrestaShop 8.

PrestaSOO team
Tout ce dont vous avez besoin pour gagner votre vie en faisant le travail que vous aimez.

Découvrir


C'est un investissement judicieux

Modules Prestashop que nous avons créés en premier pour résoudre le problème de notre propre entreprise - un site de commerce électronique. Cela signifie qu'ils sont très utiles pour une entreprise sérieuse. Si vous appréciez votre propriété Web, ces modules sont un investissement judicieux.
Sarah Reeves, Développeur d'applications @ PrestaSOO
Fabriqué avec à Paris et à Hanoi
PrestaSOO © 2024. Tous les droits sont réservés. // Privacy Policy Terms of Service
''