Language switch issue #150

AhaDigital · 2021-12-14T16:56:48Z

AhaDigital
Dec 14, 2021

Hi!
First of all. Great script!
I have an issue with my language switch in React and as standalone with javascript. The website is partly static and has some pages written in React and I have implemented this as a javascript module as in your documentation and as a React component.

I'm using a button that changes the value in <html lang=""/> to "en" or "no" by a simple js function.

Example in vanilla js below:
const langBtn = document.getElementById('langBtn'); if (langBtn) { langBtn.addEventListener('click', () => { const currentLang = document.documentElement.getAttribute('lang'); document.documentElement.setAttribute('lang', currentLang === 'en' ? 'no' : 'en'); }); }

So far so good. The language changes and everything is translating correctly in the page except cookie consent.

In my static pages I use current_lang: document.documentElement.getAttribute('lang') and I have tried that in React as well but the translation doesn't switch between 'en'/'no'.

I'm using useContext for the React pages current language globally in react pages.
To test that approach with the cookie consent function by passing language to the useEffect for the initCookieConsent function.
The console.log is printing en or no as it should right before cc.run() but the cc.run() function doesn't respond to the new language.
I also tried to manually change html lang to 'it' in https://orestbida.com/demo-projects/cookieconsent/ but the demo still shows modal in English.

Do we have a bug here or does this script only work with hard refresh to another language or am I doing it all wrong?
I also wonder if there is a way to re-initialize window.initCookieConsent(); if there is no way to update language dynamically?

Here is my React code:
`const CookieConsent = () => {
const { language } = useContext(LanguageContext);
const [showSettingsButton, setShowSettingsButton] = useState(false);

useEffect(() => {
if (!window || typeof window.initCookieConsent === 'undefined') {
return;
}
const cc = window.initCookieConsent();
// console.log(language, document.documentElement.getAttribute('lang'));
// Both are working but not triggering cc.run with new language.
cc.run({
current_lang: language,
autoclear_cookies: true,
page_scripts: true,
gui_options: {
consent_modal: {
layout: 'cloud',
position: 'bottom center',
transition: 'slide',
},
settings_modal: {
layout: 'box',
transition: 'slide',
},
},
onAccept() {
setShowSettingsButton(true);
},
onChange() {
setShowSettingsButton(true);
},
languages: {
no: {
// ...
},
en: {
// ...
},
},
});
}, [language]);`

Answered by orestbida

Dec 16, 2021

Hi @AhaDigital ,

Do we have a bug here or does this script only work with hard refresh to another language or am I doing it all wrong?
I also wonder if there is a way to re-initialize window.initCookieConsent(); if there is no way to update language dynamically?

Yes, the plugin is initialized only once. Since it doesn't have any active listeners, and doesn't use any react state (the plugin is not a react component) it can't update automatically the content of the modals.

Currently the only way to change the language — without reloading the page — would be to remove the root HTMLDivElement from the DOM: <div id="cc--main">...</div> and then call again the .run({...}) method with the new la…

View full answer

AhaDigital · 2021-12-15T15:54:26Z

AhaDigital
Dec 15, 2021
Author

Updated description and tested with vanilla js and with react.

0 replies

orestbida · 2021-12-16T16:37:42Z

orestbida
Dec 16, 2021
Maintainer

Hi @AhaDigital ,

Do we have a bug here or does this script only work with hard refresh to another language or am I doing it all wrong?
I also wonder if there is a way to re-initialize window.initCookieConsent(); if there is no way to update language dynamically?

Yes, the plugin is initialized only once. Since it doesn't have any active listeners, and doesn't use any react state (the plugin is not a react component) it can't update automatically the content of the modals.

Currently the only way to change the language — without reloading the page — would be to remove the root HTMLDivElement from the DOM: <div id="cc--main">...</div> and then call again the .run({...}) method with the new language.

With that being said, I will consider adding a .setLanguage() method!

1 reply

AhaDigital Dec 17, 2021
Author

Thanks for commenting. I think a setLanguage method would be nice. I will add a remove hack until then.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Language switch issue #150

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Language switch issue #150

AhaDigital Dec 14, 2021

Replies: 2 comments · 1 reply

AhaDigital Dec 15, 2021 Author

orestbida Dec 16, 2021 Maintainer

AhaDigital Dec 17, 2021 Author

AhaDigital
Dec 14, 2021

Replies: 2 comments 1 reply

AhaDigital
Dec 15, 2021
Author

orestbida
Dec 16, 2021
Maintainer

AhaDigital Dec 17, 2021
Author