How do I create a locale dropdown to switch between languages?

Question

I’m trying to create a dropdown menu to switch between language’s on my site. I am currently doing this with this snippet found on the google plus community:

{% block locale__switch %}

{# Loop through all of the site locales, except the current one #}
{% set otherLocales = craft.i18n.getSiteLocaleIds()|without(craft.locale) %}
{% for locale in otherLocales %}

    {# Find the current entry in the other locale #}
    {% set localeEntry = craft.entries.id(entry.id).locale(locale).first %}

    {# Make sure that it's actually localized to this locale #}
    {% if localeEntry.locale == locale %}

        {# Output a link to it #}
        <a href="{{ localeEntry.getUrl() }}" style="text-transform:uppercase;">{{ locale }}</a>
    {% else %}

        {# Output a link to the hompage #}
        <a href="{{ craft.config.siteUrl[locale] }}" style="text-transform:uppercase;">{{ locale }}</a>
    {% endif %}

    {% endfor %}
{% endblock %} 

But this simply shows a single link to the opposite locale than the current. Basically I want to have something like this:

 <div id="lang-form">
    <div id="language-selected" class="dropdownbox">EN &#9662;</div>

    <div id="dropdown-wrapper">
      <ul name="lang" id="select-language-menu" class="menu">
          <li class="selected">
               English
               <div class="lang-code" style="display: none;">en &#9662;</div>
          </li>
          <li>
               Hungarian
               <div class="lang-code" style="display: none;">hu &#9662;</div>
          </li>
       </ul>
     </div>
    </div>
  </div>

This probably seems trivial and simple, but I’m having a tough time figuring out how craft works at this level. Any ideas?

Answer 1

This is because you loop through all but the current locales. Remove the without filter to loop them all.

{% set otherLocales = craft.i18n.getSiteLocaleIds()|without(craft.locale) %}

.

Add "current" class:

To assign the current locale's link a class of "current", compare the looped locale to the current locale and set a variable that you can later test for. (In the example code I use the ternary operator for short output syntax.)

.

Example Code:

With my example code below you first create an array of all the locales you want the language switch to include, and then loop through it. With this technique you can define the order of the output manually or exclude locales from the loop.

{# Configure and loop through selected site locales #}
{% set locales = ['en', 'hu'] %}
{% for locale in locales %}

    {# Check if locale equals the requested page locale #}
    {% set current = false %}
    {% if locale == craft.locale %}
        {% set current = true %}
    {% endif %}

    {# Is this an entry page? #}
    {% if entry is defined %}

        {# Find the current entry in the other locale #}
        {% set localeEntry = craft.entries.id(entry.id).locale(locale).first() %}

        {# Make sure that it's actually localized to this locale #}
        {% if localeEntry and localeEntry.locale == locale %}

            {# Output a link to it #}
            <a href="{{ localeEntry.getUrl() }}" class="nav-link{{ current ? ' current'}}">{{ craft.i18n.getLocaleById(locale).name }}</a>

        {% else %}

            {# Output a link to the hompage #}
            <a href="{{ craft.config.siteUrl[locale] }}" class="nav-link{{ current ? ' current'}}">{{ craft.i18n.getLocaleById(locale).name }}</a>

        {% endif %}

    {# Not an entry page #}
    {% else %}

        {# Output the same path with the locale's base URL (`siteUrl`) #}
        <a href="{{ craft.config.siteUrl[locale] ~ craft.request.getPath() }}" class="nav-link{{ current ? ' current'}}">{{ craft.i18n.getLocaleById(locale).name }}</a>

    {% endif %}

{% endfor %}

Code edits done to implement a lookup of the (translated) locale name as described here by Brandon Kelly

.

Notes:

• The easiest (and recommended) way to use this language switch is to exclusively use entry pages (channel entries, structure entries, or singles) on your site.
• All non entry pages have to have the same URL path / slug for each locale (eg. http://craft.dev/de/meineindexseite/ and http://craft.dev/en/meineindexseite/), translated URL parts won't work for non entry pages with this code.
• If you only use entry pages or if you are using localized template folders you should be save to remove the entry is defined conditional (incl. the else part) altogether.
• craft.config.siteUrl[localeId] only works if siteUrl is configured to take care of localized URLs

Answer 2

I've used the code provided by carlcs and it works great (many thanks for the sample code). I did have to make an adjustment for cases where an entry wasn't translated in every locale. Would have put this in a comment but don't have enough reputation.

Nothing fancy, just added another if. Here's what i ended up with:

{% set locales = ['nl_be', 'fr_be', 'en'] %}
{% for locale in locales %}

    {# Check if locale equals the requested page locale #}
    {% if locale == craft.locale %}
        {% set current = true %}
    {% else %}
        {% set current = false %}
    {% endif %}


    {# Is this an entry page? #}
    {% if entry is defined %}



        {# Find the current entry in the other locale#}
        {% set localeEntry = craft.entries.id(entry.id).locale(locale).first %}

        {# Make sure that the localised entry exists#}
        {% if localeEntry %}

            {# Make sure that it's actually localized to this locale#}
            {% if localeEntry.locale == locale %}

                {# Output a link to it #}
                <a href="{{ localeEntry.getUrl() }}" class="nav-link{{ current ? ' current'}}">{{ craft.i18n.getLocaleById(locale).id[:2] }}</a>

            {% else %}

                {# Output a link to the hompage #}
                <a href="{{ craft.config.siteUrl[locale] }}" class="nav-link{{ current ? ' current'}}">{{ craft.i18n.getLocaleById(locale).id[:2] }}</a>

            {% endif %}
        {% else %}

            {# Output a link to the hompage #}
            <a href="{{ craft.config.siteUrl[locale] }}" class="nav-link{{ current ? ' current'}}">{{ craft.i18n.getLocaleById(locale).id[:2] }}</a>
        {% endif %}
    {# Not an entry page #}
    {% else %}

        {# Output the same path with the locale's base URL (`siteUrl`) #}
        <a href="{{ craft.config.siteUrl[locale] ~ craft.request.getPath() }}" class="nav-link{{ current ? ' current'}}">{{ craft.i18n.getLocaleById(locale).id[:2] }}</a>

    {% endif %}
{% endfor %}