shopify-custom-i18n.js

window.i18n = window.i18n || {};

i18n._langCache = {}

i18n._availableLangs = [
  'fi',
  'en',
]

i18n._updateElements = function () {
  var elements = document.querySelectorAll('*')
  elements.forEach(function (element) {
    var langIndex = element.getAttribute('data-lang-key')
    var langPack = i18n._langCache[i18n._lang]
    if (langIndex) {
      var langTarget = langPack
      langIndex.split('.').forEach(function (layer) {
        langTarget = langTarget[layer]
      })
      element.innerHTML = langTarget
    }
  })
}

i18n.changeLanguage = function (lang) {
  this._lang = lang;

  if (!i18n._langCache.hasOwnProperty(lang)) {
    langPackUrl = "https://localhost:8080/" + lang + ".json";

    $.ajax({
      url: langPackUrl,
      type: 'GET',
      dataType: 'json',
      async: false
    }).success(function (langPack) {
      i18n._langCache[lang] = langPack
      i18n._updateElements()
    }).fail(function (error) {
      console.error('error', error)
    })
  } else {
    i18n._updateElements()
  }
}

$("#language-dropdown a").click(function (event) {
  var lang = event.target.getAttribute('data-lang')
  console.log(lang)
  i18n.changeLanguage(lang)
})

i18n.autoDetectLanguage = function () {
  var lang = "fi";
  i18n.changeLanguage(lang)
}

i18n.autoDetectLanguage()

/* HTML
<div id="language-dropdown">
  <a href="#" data-lang="fi">FI</a>
  <a href="#" data-lang="en">EN</a>
</div>

<h1 data-lang-key="general.hello.world">{{ 'general.hello.world' | t }}</h1>
*/