El día de ayer hice esta pregunta sobre cómo traducir el texto de un SweetAlert2 mediante mi código Javascript (que traduce sin necesidad de refrescar) y la respuesta que me dieron me funcionó.
El problema es que si cambio el idioma (A inglés) y muestro el SweetAlert, se sigue mostrando en Español, el idioma por defecto. Y para que el SweetAlert se muestre en inglés debo refrescar la página (Gracias al Localstorage
que mantiene la traducción).
Quisiera saber cómo hacer que el SweetAlert salga en inglés al cambiar el idioma a inglés sin tener que refrescar. O en su caso, cargar el idioma inglés en la primera carga de página si no se detecta el idioma Español en el navegador.
Este es el código:
let strings = {
espanol: {
lang: "Idioma",
elegir: "Seleccionar",
esp: "Español",
eng: "English",
texto1: "Hola!",
alertTxt: 'Algo está mal',
alertBtn: 'Entendido'
},
english: {
lang: "Language",
elegir: "Select",
esp: "Spanish",
eng: "English",
texto1: "Hi!",
alertTxt: 'Something is wrong',
alertBtn: 'Got it'
}
};
$( ".espanol" ).on( "click", function() {
localStorage.setItem("lang", "espanol");
localizeStrings('espanol');
});
$( ".english" ).on( "click", function() {
localStorage.setItem("lang", "english");
localizeStrings('english');
});
var Lang = localStorage.getItem("lang") || "espanol";
localizeStrings(Lang);
function localizeStrings(strLang) {
$(strings[strLang]).each(function(key, lang){
$.each(lang, function(id, string) {
$("#"+id).html(string);
});
});
}
function translate(str) {
if(!strings.hasOwnProperty(Lang) || !strings[Lang].hasOwnProperty(str)) {
// El idioma o la cadena a traducir (propiedad) no existe
return str;
}
// Devolver traducción
return strings[Lang][str];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="lang">Idioma</label>
<select name="seleccion" id="ejemplo">
<option id="elegir">Seleccionar</option>
<option id="esp">Español</option>
<option id="eng">English</option>
</select>
<h6 id="texto1">Hola!</h6>
Y así se adaptó el SweetAlert:
Swal.fire({
text: translate('alertTxt'),
icon: "warning",
buttonsStyling: false,
confirmButtonText: translate('alertBtn'),
customClass: {
confirmButton: "btn btn-warning"
}
});