Basic Multilingual Features in Website Using Javascript and Keep Language Persist Using Local Storage


November 12, 2018 3 minutes javascript , multilingual

following snippet helps me to convert a basic site to 2 language site

Html code for menu

<h3
data-langen="Sorry this resturent does not have any menu yet . please try again later"
data-langhe="מצטערים, אין תפריט זה עדיין. בבקשה נסה שוב מאוחר יותר"
class="blanker">Sorry this resturent does not have any menu yet . please try again later </h3>

initial code for checking country (in my case Israel) and changed language to Hebrew

function changeLanguage (lang) {
    if (lang == 'en') {
        $("[data-langen]").each(function (index , val) {
            $(this).html($(this).attr('data-langen'));
        });
    } else {
        $("[data-langhe]").each(function (index , val) {
            $(this).html($(this).attr('data-langhe'));
        });
    }
}
if (localStorage.getItem('user_lang')) {
  let lang = localStorage.getItem('user_lang');
  changeLanguage(lang);
} else {
  $.get('http://ip-api.com/json', (response) => {
    if (response.countryCode == "IL") {
      localStorage.setItem("user_lang", 'il')
      changeLanguage('he');
    }
  })
}

language icon for changing language manually

{% raw %}
<div class="language-changer">
  <p><a href="<?= (@end(explode('@', request()->route()->getAction('controller'))) == 'catmenu') ? action('frontEndController@language', ['lan' => 'en']) : '#'; ?>" class="en"><img src="{{ asset('img/en.png') }}" alt="Language icon is not available"></a></p>
  <p>
    <a href="<?= (@end(explode('@', request()->route()->getAction('controller'))) == 'catmenu') ? action('frontEndController@language', ['lan' => 'he']) : '#'; ?>" class="il"><img src="{{ asset('img/il.png') }}" alt="Language icon is not available"></a>
  </p>
</div>
{% endraw %}

click event when user click on language changing button

$(".language-changer  a").on('click' , function (event) {
    if ($(this).attr('href') == '#') {
        event.preventDefault();
        var lang = $(this).attr('class');
        localStorage.setItem("user_lang", lang)
        changeLanguage(lang)
    }
});

See Also