Eigene Sprachwähler bauen

Willkommen auf Ihrer Conword-Demoseite. Hier sehen Sie drei Wege, einen eigenen Sprachwähler zu bauen, der sich nahtlos in Ihr Design einfügt.

Vorbereitung: den Standard-Sprachwähler ausblenden

<script>
  var conword_config = {
    disable_language_switcher: true
  };
</script>
<script id="conword-root" charset="utf-8" src="https://static.conword.io/js/v2/[client-id]/conword.js"></script>

A. Einfache Links

Die kleinste Lösung ohne Javascript-Kenntnisse. Ein Link pro Sprache, ideal für ein Menü im Seitenkopf oder in der Fußzeile.

<nav class="language-links">
  <a href="javascript:Conword.translate('de')" data-lang="de">Deutsch</a>
  <a href="javascript:Conword.translate('en')" data-lang="en">English</a>
  <a href="javascript:Conword.translate('nl')" data-lang="nl">Nederlands</a>
</nav>

B. Auswahlliste aus den lizenzierten Sprachen

Conword kennt die Sprachen Ihrer Lizenz. Mit Conword.get_available_languages() füllen Sie eine Auswahlliste automatisch, neue Sprachen erscheinen dann ohne Änderung an Ihrer Seite.

<select id="my-language-select" aria-label="Sprache wählen"></select>

document.addEventListener('Conword:ready', function () {
  var select = document.getElementById('my-language-select');
  var languages = Conword.get_available_languages();
  for (var key in languages) {
    var option = document.createElement('option');
    option.value = key;
    option.textContent = languages[key].name;      // native name, e.g. "Deutsch"
    select.appendChild(option);
  }
  select.value = Conword.get_current_language();
  select.addEventListener('change', function () { Conword.translate(this.value); });
});

C. Buttons mit Flaggen und aktivem Zustand

Die Flaggen liegen bei Conword bereit. Der aktive Zustand wird über das Ereignis Conword:translation_done gesetzt, damit er auch stimmt, wenn die Übersetzung anderswo ausgelöst wurde, etwa durch eine gespeicherte Sprache beim Seitenaufruf.

<div id="my-language-buttons"></div>

document.addEventListener('Conword:ready', function () {
  var container = document.getElementById('my-language-buttons');
  var languages = Conword.get_available_languages();
  for (var key in languages) {
    var button = document.createElement('button');
    button.type = 'button';
    button.setAttribute('data-lang', key);
    button.innerHTML = '<img alt="" src="https://static.conword.io/assets/img/flags/svg/' + key + '.svg"> ' + languages[key].name;
    button.addEventListener('click', function () { Conword.translate(this.getAttribute('data-lang')); });
    container.appendChild(button);
  }
  markActiveLanguage();
});

function markActiveLanguage() {
  var current = Conword.get_current_language();
  document.querySelectorAll('[data-lang]').forEach(function (el) {
    el.classList.toggle('active', el.getAttribute('data-lang') === current);
  });
}
document.addEventListener('Conword:translation_done', markActiveLanguage);

D. Eine Funktion für alles

Wenn beim Sprachwechsel mehr passieren soll, zum Beispiel ein Menü schließen oder ein Tracking-Ereignis senden, rufen alle Sprachwähler eine gemeinsame Funktion auf.

function startTranslation(lang) {
  Conword.translate(lang);
  closeMenu();
  _paq.push(['trackEvent', 'Translation', lang]);   // e.g. Matomo
}

Das Sprachobjekt liefert neben name auch name_en und rtl. Weitere Methoden und Ereignisse finden Sie in der Dokumentation der Javascript-API.

Probieren Sie es aus

A. Links

B. Auswahlliste

C. Buttons mit Flaggen

Alle drei Varianten zeigen die aktuelle Sprache an, egal womit Sie gewechselt haben. Demo zurücksetzen

Ereignisse von Conword (zur Nachvollziehbarkeit):