This Page content is translated with the LwcTranslator.

{{header.currentLanguage}}

Example usage of LwcTranslator


  <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="assets/css/prism.min.css">
  <title>{{title}}</title>
</head>
<body>
  
  <h1>This Page content is translated with the LwcTranslator.</h1>

  <header>
    <h1>{{header.currentLanguage}}</h1>
  </header>

  <select name="" id="select" onchange="reloadPage(event)"></select>

  <script src="dist/v2/lwcTranslator.js"></script>
  <script>
  
  var translator = new LwcTranslator({
    querySelector: "html",
    translationSettings: "/assets/config/languages.json",
    translationFolder: "/assets/config/languages/",
    initialLanguageCode: 'en-GB',
    onError: (err) => {
      console.log(err);
    },
    onTranslationSettingsLoaded: function(settings) {
      let select = document.getElementById('select');
      for (let i = 0; i < settings.supported.length; i++) {
        select.innerHTML += "<option value=\""+settings.supported[i].langCode+"\">"+settings.supported[i].name+"</option>";
      }
    }
  });

  window.onload = function() {
    select.value = null;
    select.value = translator.getCurrentLanguage().langCode;
  }

  function reloadPage(e) {
    translator.setCurrentLanguage(e.currentTarget.value);
    window.location.reload();
  }
  </script>
</body>
</html>