Build a language switcher for a one page website?

Question

I'm building a site with two languages, and I need a language switcher so wherever you enter the website you can switch the language easily. The website is a onepager, so i can't direct to a specific language URL. Instead i'm thinking of adding a segment (/de /fr) to the URL.

I don't know how to display the language fields and language globals.

Answer 1

The basics for setting up your localized site are nicely written down in the Localization Guide. This walks you through the steps necessary to make your site being available under their subfolders /de and /fr.

Set up correctly, your templates will always show the field content translated to the currently accessed locale.

If your one-pager template is not connected to an entry (case 4 in the Routing article) and you simply save your template files at templates/de/index.html and templates/fr/index.html (case 6), have a look at the include tag, that allows you to maintain one template responsible for all of your locales (e.g. {% include '../de/index.html' %}).

The following code is a simplified version of the example I wrote down here, and should do fine for a one-page website:

{# Loop through selected site locales #}
{% set locales = ['de', 'fr'] %}
{% for locale in locales %}

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

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

{% endfor %}