1

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"
  }
});

1 respuesta 1

1

Prueba agregando esto dentro de la función translate:

function translate(str) {
  var Lang = localStorage.getItem("lang") || "english";

En la función translate() no se estaba recomprobando el valor actual de Lang, que podia ser modificado dinámicamente, por eso mejor consultarlo también dentro de esta función.

Las variables locales dentro de la función tienen preferencia sobre las variables globales con el mismo nombre.

3
  • Muchas graciaaaas, funciona excelente! Solo reemplacé || "english"; por || "espanol";. Commented el 2 abr. 2022 a las 19:22
  • Bueno, puse english porque decias esto: 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... que por cierto no haces esa comprobación de ninguna forma que yo sepa.
    – masterguru
    Commented el 2 abr. 2022 a las 19:23
  • Ahh vale, una disculpa por la confusión Commented el 2 abr. 2022 a las 19:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.