Switch locale to preferred language

Hi everyone,

I would like to achieve automatic switching of the website to a client’s preferred language.

I have attempted to save the preferred language to local storage. If the URL is accessed in the default language (via a QR code), the website language should automatically change to the preferred language.

Here are the steps:

  1. In a museum, many QR codes will be placed in the default language.
  2. After the first scan, if the visitor changes their language preference, it will be saved to local storage.
  3. When the visitor scans the next QR code (still in the default language), I aim to render the website in the language already saved in their local storage.

How can I ensure that this transition is very smooth?

This is an older project, and I am using the Rainlab.Translate plugin.

Thank you, Zs


I did that using a Cookie. Whenever the user is changing from the dropdown the language, it will create a cookie. But the idea is the same.

In your layout, you can put a function that will check if the user needs to be redirected or not.

1 Like

I would like to achieve to not load the full DOM in default language, then after reload in preferred language.
I would like to reload as early as I can, to achieve the best possible user experience.

I use the following code:

        const activeLocale = "{{ activeLocale }}";

    function onChangeToPreferredLanguage(activeLocale) {
        const savedLanguage = localStorage.getItem("preferredLanguage");
        // const allCookies = getCookies();
        // const savedLanguageCookie = allCookies["preferred_language"];

        if (savedLanguage != activeLocale) {
            $.request("localePicker::onSwitchLocale", {
                data: { locale: savedLanguage },

But allways gives me an error like: $.request is not a function
at onChangeToPreferredLanguage

But the jQuery is added.

How did you achieve the best solution?

Thank you,