1

Tengo este código Javascript dónde puedo cambiar traducir mi página sin necesidad de recargar:

var strings = {
    espanol: {
        lang: "Idioma",
        texto1: "Hola!"
    },
    english: {
        lang: "Language",
        texto1: "Hi!"
    }
}

$( ".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") || "english";
localizeStrings(Lang);
function localizeStrings(strLang) {
    $(strings[strLang]).each(function(key, lang){
        $.each(lang, function(id, string) {
            $("#"+id).html(string);
        });
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="lang">Idioma</button>
<h1 id="texto1">Hola!</h1>

Y dentro de otro archivo Javascript tengo un código que al terminar un proceso, saltaba un alert que reemplacé por un SweetAlert2:

Swal.fire({
  text: "Algo está mal!",
  icon: "warning",
  buttonsStyling: false,
  confirmButtonText: "Entiendo",
  customClass: {
    confirmButton: "btn btn-warning"
  }
})

Quiero saber si hay forma de traducir el SweetAlert sin refrescar simplemente asignando de alguna manera un ID y de ahí poder tomarlo con mi código ya mencionado?

Quiero traducir del sweetalert: text: "Algo está mal!", y el texto del botón: confirmButtonText: "Entiendo",

Muchas gracias de antemano.

1 respuesta 1

1

Agrega las cadenas necesarias en el objeto:

let strings = {
    espanol: {
        lang: "Idioma",
        texto1: "Hola!",
        alertTxt: 'Algo está mal',
        alertBtn: 'Entendido'
    },
    english: {
        lang: "Language",
        texto1: "Hi!",
        alertTxt: 'Something is wrong',
        alertBtn: 'Got it'
    }
};

Crea una función para obtener la cadena a traducir:

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];
}

Después usas la función para traducir las cadenas al crear la alerta, así no tienes que modificar elementos HTML que, por cierto, solo existen cuando se muestra la alerta:

Swal.fire({
  text: translate('alertTxt'),
  icon: "warning",
  buttonsStyling: false,
  confirmButtonText: translate('alertBtn'),
  customClass: {
    confirmButton: "btn btn-warning"
  }
});
3
  • Hola, seguí los pasos tal cual me los pusiste, incluso puse todo junto pero me sale "alerTxt is not defined" Como se ve aquí :( Commented el 1 abr. 2022 a las 20:47
  • Ya probé y rectifiqué que todo esté bien escrito y no encuentro el error :( Commented el 1 abr. 2022 a las 21:17
  • 1
    @NotoriusSha, cierto, se me escapó ese pequeño detalle, los parámetros deben ir entre comillas: translate('alertTxt') ya corregí la respuesta.
    – Triby
    Commented el 1 abr. 2022 a las 22:22

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.