Babel not working on a new instance

Support MODX Cloud
1

Hi there!

I have have a website running on MODX 2.8.8 with Babel configured and working correctly. recently I created a new instance from this one, but the language switch functionality stopped working in the new instance.

We’ve updated the main URL in the system settings, and also adjusted the site_url and http_host values in the context settings accordingly. While this temporarily resolves the issue after a hard cache clear, the problem returns once we make any changes in the manager—the language selection stops functioning again.

Any guidance on what might be causing this would be greatly appreciated.

2

Do you mean the BabelLinks snippet on the front-end by that, or the functionality in the manager?

What exactly to you mean by “stopped working”?
If the issue is BabelLinks, does nothing get output at all or are just the URLs in the links wrong?

3

Hi @halftrainedharry,

Sorry—I didn’t explain it clearly earlier. it seems like is not using the snippet [[BabelLinks]] directly but is working perfectly with this javascript on the live site, not on the copied instance.

 if(window.location.href.indexOf("fr") !== -1) {
            const _container = document.querySelector('[data-headerdesktop-exclude]');
            const _x = <a data-lang="en" href="https://webiste.com/" class="babellink hover:text-blue transition-colors duration-200 ease-in-out " target="_self" data-to="">EN</a>
            _container.insertAdjacentHTML('beforeend', _x);
            
            if(window.innerWidth < 901) {
                const _mobilecontainer = document.querySelector('[data-search-toggle="mobile"]').parentElement
                const _j = <a data-lang="en" href="https://webiste.com/" class="babellink text-m-g font-semibold uppercase hover:text-blue transition-colors duration-200 ease-in-out" target="_self" data-to="">EN</a>
                _mobilecontainer.insertAdjacentHTML('beforeend', _j);    
            }
            
        } else {
            const _container = document.querySelector('[data-headerdesktop-exclude]');
            const _y = <a data-lang="fr" href="https://webiste.com/fr/index.html/" class="babellink hover:text-blue transition-colors duration-200 ease-in-out " target="_self" data-to="">FR</a>
            _container.insertAdjacentHTML('beforeend', _y);
            
             if(window.innerWidth < 901) {
                const _mobilecontainer = document.querySelector('[data-search-toggle="mobile"]').parentElement
                const _k= <a data-lang="fr" href="https://webiste.com/fr/index.html/" class="babellink text-m-g font-semibold uppercase hover:text-blue transition-colors duration-200 ease-in-out" target="_self" data-to="">FR</a>
                _mobilecontainer.insertAdjacentHTML('beforeend', _k);    
            }
        }

When I click to switch to French, the URL changes correctly, but the cultureKey remains as en instead of switching to fr.

If I try to view a resource directly form the manager, is always going to the home page on English

4

It’s more likely that the problem is not Babel, but the routing.
What routing extra do you use (e.g. Langrouter, XRouting) or did you write a custom routing plugin?

5

@yuliyepes did you copy over the Web Rules for Babel? That handles the redirects for Babel around the language strings.

There’s a gist for getting Babel to work in MODX Cloud here: MODX Cloud web rules example for Babel with two languages.In this example, German is the default language with resources in the 'web' context; English is the secondary language, set up in the 'en' context.This technique is based on the "SEO Friendly Multilingual Websites" article archived here: https://web.archive.org/web/20180927220103/http://www.multilingual-modx.com/blog/2011/seo-friendly-multilingual-websites-with-modx-and-babel.html · GitHub

But you should also have them to just copy over from the source instance.

1 Like
6

Thanks so much to both of you! The issue was indeed due to the missing web rules—they hadn’t been copied over correctly.

All sorted now!

1 Like