Custom language switcher / Language switching

[FelTigre]

Hello
i’m trying to create a switcher language on blog but i can’t sort the languages by country.

My switcher :

and what i want :

{% elif group.translations %}

 <ul class="dropdown menu country-list" data-dropdown-menu>

 {% set currLang = locale_name(locale) %}
 {% set codesLang = {'English' : 'en', 'Français - France' : 'fr-fr', 'Français' : 'fr' ,'Français - Luxembourg' : 'fr-lu', 'Français - Belgique' : 'fr-be', 'Nederlands' :'nl', 'Nederlands - België' || 'Nederlands - Belgique' : 'nl-be' } %}

 <li class="">
 <a class="lang-select" href="#" data-country="{{ codesLang[currLang]| truncate (2, true, '') }}" data-lang="{{ codesLang[currLang] }}">
 <img class="lang-flag" src="https://ressources.birdee.co/hubfs/Media/Common/{{ codesLang[currLang] }}.svg">
 {{ currLang }}
 </a>
 </li>

 {% for item in group.translations|sort(False, False, 'language') %}

 {% if item.language == 'fr' %}
 {% set name = 'Français' %}
 {% set country = 'France' %}
 {% set data = 'fr' %}
 {% elif item.language == 'fr-fr' %}
 {% set name = 'Français - France' %}
 {% set country = 'France' %}
 {% set data = 'fr' %}
 {% elif item.language == 'en' %}
 {% set name = 'English' %}
 {% set country = 'Europe' %}
 {% set data = 'eu' %}
 {% elif item.language == 'fr-be' %}
 {% set name = 'Français - Belgique' %}
 {% set country = 'Belgique' %}
 {% set data = 'be' %}
 {% elif item.language == 'nl-be' %}
 {% set name = 'Nederlands - Belgium' %}
 {% set country = 'Belgique' %}
 {% set data = 'be' %}
 {% elif item.language == 'nl' %}
 {% set name = 'Nederlands' %}
 {% set country = 'Nederlands' %}
 {% set data = 'nl' %}
 {% elif item.language == 'fr-lu' %}
 {% set name = 'Français - Luxembourg' %}
 {% set country = 'Luxembourg' %}
 {% set data = 'lu' %}
 {% endif %}
 <li class="menu desktop-lang">
 <ul class="others-lang--menu">
 <li class="other-lang">
 <span class="langTitle">
 <span class="flag">
 <img src="https://ressources.birdee.co/hubfs/Media/Common/{{ item.language }}.svg" class="dd-selected-image">
 </span>
 {{ country }}
 </span>
 <a class="lang-option" href="{{ item.absolute_url }}" data-country="{{ data }}" data-lang="{{ item.language }}">
 {{name}} 
 </a>
 </li>
 </ul>
 </li>
 {% endfor %}
 </ul>
 {% endif %}

And second question, in the articles, the switcher isn’t the same as on blog-archive, how can i display only the languages whose articles are translated :

{% if content.translated_content|length %}
 <ul class="dropdown menu country-list" data-dropdown-menu>
 {% set currLang = locale_name(locale) %}
 {% set codes = {'English' : 'en', 'Français' : 'fr', 'Français - France' : 'fr-fr', 'Nederlands - Belgium' :'nl-be', 'Français - Luxembourg' : 'fr-lu' } %}
 <li class="">
 <a class="lang-select" href="#"><img class="lang-flag" src="https://ressources.birdee.co/hubfs/{{ codes[currLang] }}.svg" data-country="{{ codes[currLang]| truncate (2, true, '') }}" data-lang="{{ codes[currLang] }}">{{ currLang }}</a>
 </li>
 <li class="menu desktop-lang">
 <ul class="others-lang--menu">
 {% for key, val in codes.items() %}

 {% if val == 'fr' || val == 'fr-fr' %}
 {% set name = 'Français' %}
 {% set country = 'France' %}
 {% set data = 'fr' %}
 {% elif val == 'en' %}
 {% set name = 'English' %}
 {% set country = 'Europe' %}
 {% set data = 'eu' %}
 {% elif val == 'fr-be' %}
 {% set name = 'Français - Belgique' %}
 {% set country = 'Belgique' %}
 {% set data = 'be' %}
 {% elif val == 'nl-be' %}
 {% set name = 'Nederlands - Belgium' %}
 {% set country = 'Belgique' %}
 {% set data = 'be' %}
 {% elif val == 'nl' %}
 {% set name = 'Nederlands' %}
 {% set country = 'Nederlands' %}
 {% set data = 'nl' %}
 {% elif val == 'fr-lu' %}
 {% set name = 'Français - Luxembourg' %}
 {% set country = 'Luxembourg' %}
 {% set data = 'lu' %}
 {% endif %}
 {% set URL = "/"~content.translated_content[val].slug || val %}
 <li class="menu desktop-lang">
 <ul class="others-lang--menu">
 <li class="other-lang">
 <span class="langTitle">
 <span class="flag">
 <img src="https://ressources.birdee.co/hubfs/{{val}}.svg" class="dd-selected-image">
 </span>
 {{ country }}
 </span>
 <a class="lang-option" href="{{ URL }}" data-country="{{ data }}" data-lang="{{ val }}">{{key}}</a>
 </li>
 </ul>
 </li>
 {% endfor %}
 </ul>
 </li>
 </ul>

i use the same code

Thank you very much.

[piersg]

Hi @FelTigre,

The issue with sorting by country is that the country appears last in the language code e.g. ‘fr-be’ is country: Belgium, language: French, so to sort it by that you’d have to somehow get that substring out of item.language and then sort the list by that substring. It would be easier to do this with JS:

var items = document.getElementsByClassName('other-lang');

items = Array.prototype.slice.call(items).sort(function(a, b) {
 return a.lastElementChild.dataset.country.localeCompare(b.lastElementChild.dataset.country);
});

var menu = document.getElementsByClassName('others-lang--menu')[0];
for (var i = 0, length = items.length; i < length; i++) {
 menu.appendChild(items[i]);
}

For the second question, instead of {% for key, val in codes.items() %} do {% for item in content.translated_content %}.

[FelTigre]

@piersg Thank you

I will try this and i’ll tell you if it works

[piersg]

@FelTigre Sorry, small error, I used firstElementChild instead of lastElementChild, will update the above accordingly.

[dennisedson]

jeez @piersg …

[ALarsson]

Why is all this ****? Why can’t we simply get something like:

foreach translations as translation {

if (translation.current) {

/* show current language label */

} else {

<a href=“get_url_for_translated_content(translation)”>translation.super_nice_locale_name</a>

}

}

??

I’ve been tearing my hair out for hours to accomplish this simple little thing. I don’t want to do a billion conditions over “yeah it might be french, or maybe swedish”. This is just stupid. Fix the CMS already and let real programmers, who have to work with this platform whether we want or not, to accomplish simple BASIC things.

Sorry if I’m sounding angry, but I am.