Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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()
@Asoul

This comment has been minimized.

Copy link
Owner Author

Asoul commented Feb 23, 2017

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>
@Asoul

This comment has been minimized.

Copy link
Owner Author

Asoul commented Feb 23, 2017

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>
@Asoul

This comment has been minimized.

Copy link
Owner Author

Asoul commented Feb 23, 2017

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

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

@Asoul

This comment has been minimized.

Copy link
Owner Author

Asoul commented Feb 23, 2017

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 }}
@robocide

This comment has been minimized.

Copy link

robocide commented Apr 14, 2018

Thanks @Asoul !!!

@KarinaMendezC

This comment has been minimized.

Copy link

KarinaMendezC commented Jun 4, 2018

I keep getting this errors:
image
But can't figure out what I'm missing. Any ideas?

Thank you! @Asoul

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.