Перенаправление в соответствии с языком браузера

Question

Привет У меня есть простое приложение, в котором пользователь может выбрать язык, который будет использоваться в моем приложении, между английским и польским.

Когда пользователь открывает мой веб-сайт, я хочу следующее:

• Если язык браузера = английский, переключитесь на польский язык.
• Если язык браузера = польский, ничего не делать.
• Предположим, что польский язык является языком по умолчанию.

Поскольку это очень простое приложение, я использую jQuery для перевода.

Ниже приведено мое решение:

JSFIDDLE: demo

//redirect
$(document).ready(function() {
  var userLang = navigator.language || navigator.userLanguage;
  if (userLang == "pl-pl") {
    break;
  } else {
    userLang = "eng-gb"
  }
}
});



// translation

// The default language is Polish
var lang = "pl-pl";
// Check for localStorage support
if ('localStorage' in window) {

  var usrLang = localStorage.getItem('uiLang');
  if (usrLang) {
    lang = usrLang
  }
}


var arrLang = {
  "pl-pl": {
    "Valentine": "Do Walentynek zostało już tylko",
  },
  "en-gb": {
    "valentine": "Remaining days to Valentines!",
  }
}


$(document).ready(function() {
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });

  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });

  // get/set the selected language
  $(".translate").click(function() {
    var lang = $(this).attr("id");

    // update localStorage key
    if ('localStorage' in window) {
      localStorage.setItem('uiLang', lang);
    }

    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });
});

<div class="translate">
  <ul class="language">
    <li class="eng translate" id="en-gb">EN</li>
    <li class="pl translate" id="pl-pl">PL</li>
  </ul>
</div>

<div class="rss-feed">
  <p class="lang" key="valentine">Do Walentynek zostało już tylko
  </p>
  <span id="mybenfit-timer" class="lang" key="days">
       </span>
</div>

К сожалению, мое решение не работает.Что не так с моим кодом?

Answer 1

Попробуйте следующее, надеюсь, это поможет

$(document).ready(function() {

    // translation

    // The default language is English
    var userLang = navigator.language || navigator.userLanguage;
    var lang = "pl-pl";

    // If Browser Language == English then switch to the Polish language.
    // since there en-GB en-US ...
    if(userLang.split('-')[0] == 'en'){ 
        lang = "pl-pl";
    }

    // Check for localStorage support
    if('localStorage' in window){

        var usrLang = localStorage.getItem('uiLang');
        if( typeof(usrLang) === 'string' && usrLang !== 'undefined') {
            lang = usrLang
        }

    }

    var arrLang = {
        "pl-pl": {
            "valentine": "Do Walentynek zostało już tylko",
            "days": " 10 dni"
        },
        "en-gb": {
            "valentine": "Remaining days to Valentines!",
            "days": " 10 days"
        }
    }


    $(".lang").each(function(index, element) {
        $(this).text(arrLang[lang][$(this).attr("key")]);
    });

    // get/set the selected language
    $(".translate").click(function(e) {
        e.stopPropagation();
        var lang = $(this).attr("id");

        // update localStorage key
        if('localStorage' in window){
            localStorage.setItem('uiLang', lang);
        }

        $(".lang").each(function(index, element) {
            $(this).text(arrLang[lang][$(this).attr("key")]);
        });
    });
});

Answer 2

Имена свойств чувствительны к регистру.

Ваше название для польского языка в arrLang отличается от английского. pl-pl равно Valentine, а en-gb равно valentine. Но ваш key="valentine" ищет последний в pl-pl, который не существует.

строчными буквами их обоих и вуаля.

var arrLang = {
  "pl-pl": {
    "valentine": "Do Walentynek zostało już tylko",
  },
  "en-gb": {
    "valentine": "Remaining days to Valentines!",
  }
}

Answer 3

• userLang возвращает en-GB, поэтому язык состоит из двух строчных символов и страны из двух заглавных символов, поэтому оператор if должен быть if(userLang == 'pl-PL'), а не if(userLang == 'pl-pl'), он всегда будет возвращать false по вашему пути

• НО пока вам просто нужен язык, верно? Вы можете попробовать это .. и всегда использовать язык в двух строчных символах .. не нужно использовать pl-pl или en-GB вы можете использовать pl или en

//redirect
$(document).ready(function() {
  var userLang = navigator.language || navigator.userLanguage;
  console.log(userLang);
  var userLang = userLang.split('-')[0];
  console.log(userLang);
  var userLang = (userLang !== "pl")? 'en' : 'pl';
  console.log(userLang);
  
  var arrLang = {
    "pl": {
      "Valentine": "Do Walentynek zostało już tylko",
    },
    "en": {
      "valentine": "Remaining days to Valentines!",
    }
  }
  console.log(arrLang[userLang].valentine);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>