shopify-custom-i18n.js

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

i18n._langCache = {}

i18n._availableLangs = [
  'en',
  'zh-TW',
  'ja'
]

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

i18n.changeLanguage = function (lang) {
  this._lang = lang
  $.cookie('shopify.custom-lang', lang)

  if (!i18n._langCache.hasOwnProperty(lang)) {
    let langPackUrl = '{{ "locales..json" | asset_url }}'.replace('s..j', 's.' + lang + '.j')

    $.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()
  }
}

$("#changeLanguageDropdown a").click(function (event) {
  let lang = event.target.getAttribute('data-lang')
  i18n.changeLanguage(lang)
})

i18n.autoDetectLanguage = function () {
  if ($.cookie && $.cookie('shopify.custom-lang')) {
    let lang = $.cookie('shopify.custom-lang')
    i18n.changeLanguage(lang)
  } else {
    $.ajax({
      url: '//ajaxhttpheaders.appspot.com',
      type: 'POST',
      asunc: false,
      dataType: 'jsonp',
      success: function (headers) {
        let preferredLangs = headers['Accept-Language'].split(';')[0].split(',')
        var lang = 'en'
        preferredLangs.some(function (preferredLang) {
          if (i18n._availableLangs.includes(preferredLang)) {
            lang = preferredLang
            return true
          }
        })
        i18n.changeLanguage(lang)
      }
    })
  }
}
i18n.autoDetectLanguage()

Example page (404.liquid):

{% capture header_title %} <span data-lang-content='general.404.title'></span>{% endcapture %}
{% include 'page_header' with header_title %}

<div class="wrapper wrapper--margins wrapper__article">
	<h2 class="home-section-title less-margin" data-lang-content='general.404.subtitle'></h2>
	<p data-lang-content="general.404.content_html"></p>
</div>

Sample dropdown html:

<ul class="site-nav__dropdown">
  <div id="changeLanguageDropdown">
    <li><a href="#" data-lang="en">English</a></li>
    <li><a href="#" data-lang="zh-TW">繁體中文</a></li>
    <li><a href="#" data-lang="ja">日本語</a></li>
  </div>
  <span class="arrow">&nbsp;</span>
</ul>

Sample json file (assets/locales.zh-TW.json)

{
  "general": {
    "404": {
      "title": "404",
      "subtitle": "頁面消失了",
      "content_html": "找不到這個頁面。 <a href=\"\/collections\/all\">回到商品頁面<\/a> 繼續購物"
    }
  }
}

If haven't load jquery.cookie, should load in theme.liquid

{{ '//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js' | script_tag }}

Thanks @Asoul !!!

I keep getting this errors:

But can't figure out what I'm missing. Any ideas?

Thank you! @Asoul