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

15

7

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?

simonsweeney

Posted 2014-07-10T00:10:22.963

Reputation: 154

Answers

15

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

carlcs

Posted 2014-07-10T00:10:22.963

Reputation: 31 320

Delish, I get it now. Thanks Christian! – simonsweeney – 2014-07-10T02:56:05.470

Good to hear, @simon! Just added some additional info for you. – carlcs – 2014-07-10T03:02:56.773

Is it possibly to jump on this question? I'm using the above code which is working fine expect on my 404 page. I have two locales (en_gb and en_de) and I get this error: _Key "en_gb" for array with keys "en, de" does not exist in "layout" at line 91 – richardpixel – 2016-10-31T18:50:04.950

5

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 %}

Steven Vandemoortele

Posted 2014-07-10T00:10:22.963

Reputation: 177

Steven, what's the reason for that new conditional?localeEntry.locale == locale is not working for you? This is actually the conditional that should check if the entry is translated to that locale. – carlcs – 2014-08-06T16:36:19.223

localeEntry.locale == locale wasn't working for me. I had entries that didn't exist in all languages and that part threw a template error: Impossible to access an attribute ("locale") on a NULL variable ("") – Steven Vandemoortele – 2014-08-07T12:31:06.950

Ahh OK., I didn't know that this is possible. Is this because you added locales after that entry already existed? – carlcs – 2014-08-07T15:08:15.670

No, you can use the switch buttons on the right of an entry in the cms to disable/enable an entry per locale. http://imgur.com/rPiObyN

– Steven Vandemoortele – 2014-08-07T15:29:18.120