@codewithjonam
Blog
Sharing knowledge through the art of wordsWeglot UI Kit Multiple Language Switchers Issue
October 09, 2023Weglot UI Kit is a handy set of custom language switchers for Weglot. You can use this UI Kit to clone 14 custom language switchers powered by Webflow Interactions.
To learn how to integrate the Weglot UI Kit , please follow the video below.
I recently integrated the Weglot UI Kit by Finsweet into one of my client’s Webflow sites, and I had to add the same language switcher at two different places on the same page.
Specifically, the language switcher below.
Now, if you test the switcher, only one of them will work and the other one will not. The reason is because, the code provided by Weglot UI Kit updates only the first switcher.
Let's look at the script provided by Weglot UI Kit for the switcher that I am using.In the above code, refer line 29 where we are accessing the switcher. Note that we are doing a
To fix this, we need to update the script as below.Refer line 29 where we we have modified the code to use
I hope this was helpful!
To learn how to integrate the Weglot UI Kit , please follow the video below.
I recently integrated the Weglot UI Kit by Finsweet into one of my client’s Webflow sites, and I had to add the same language switcher at two different places on the same page.
Specifically, the language switcher below.
Let's look at the script provided by Weglot UI Kit for the switcher that I am using.
1<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
2<script>
3 // init Weglot
4 Weglot.initialize({
5 api_key: 'wg_62d9b9b0750831f48721322c8384946b6'
6 });
7 // on Weglot init
8 Weglot.on('initialized', () => {
9 // get the current active language
10 const currentLang = Weglot.getCurrentLang();
11 // call updateFlagDropdownLinks functions
12 updateSW8FlagDropdownLinks(currentLang);
13 });
14 // for each of the .wg-element-wrapper language links
15 document.querySelectorAll('.wg-element-wrapper.sw8 [lang]').forEach((link) => {
16 // add a click event listener
17 link.addEventListener('click', function (e) {
18 // prevent default
19 e.preventDefault();
20 // switch to the current active language
21 Weglot.switchTo(this.getAttribute('lang'));
22 // call updateDropdownLinks function
23 updateSW8FlagDropdownLinks(this.getAttribute('lang'));
24 });
25 });
26 // updateFlagDropdownLinks function
27 function updateSW8FlagDropdownLinks(currentLang) {
28 // get the wrapper element
29 const $wrapper = document.querySelector('.wg-element-wrapper.sw8');
30 // if the .w-dropdown-toggle is not the current active language
31 if ($wrapper.querySelector('.w-dropdown-toggle').getAttribute('lang') !== currentLang) {
32 // swap the dropdown toggle's innerHTML with the current active language link innerHTML
33 const $activeLangLink = $wrapper.querySelector('[lang=' + currentLang + ']');
34 const childDiv = $activeLangLink.innerHTML;
35 const $toggle = $wrapper.querySelector('.w-dropdown-toggle');
36 const toggleDiv = $toggle.innerHTML;
37 $toggle.innerHTML = childDiv;
38 $activeLangLink.innerHTML = toggleDiv;
39 // swap the dropdown toggle's lang attr with the current active language link lang attr
40 const lang = $activeLangLink.getAttribute('lang');
41 const toggleLang = $toggle.getAttribute('lang');
42 $toggle.setAttribute('lang', lang);
43 $activeLangLink.setAttribute('lang', toggleLang);
44 }
45 }
46</script>querySelectorTo fix this, we need to update the script as below.
1<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
2<script>
3 // init Weglot
4 Weglot.initialize({
5 api_key: 'wg_62d9b9b0750831f48721322c8384946b6'
6 });
7 // on Weglot init
8 Weglot.on('initialized', () => {
9 // get the current active language
10 const currentLang = Weglot.getCurrentLang();
11 // call updateFlagDropdownLinks functions
12 updateSW8FlagDropdownLinks(currentLang);
13 });
14 // for each of the .wg-element-wrapper language links
15 document.querySelectorAll('.wg-element-wrapper.sw8 [lang]').forEach((link) => {
16 // add a click event listener
17 link.addEventListener('click', function (e) {
18 // prevent default
19 e.preventDefault();
20 // switch to the current active language
21 Weglot.switchTo(this.getAttribute('lang'));
22 // call updateDropdownLinks function
23 updateSW8FlagDropdownLinks(this.getAttribute('lang'));
24 });
25 });
26 // updateFlagDropdownLinks function
27 function updateSW8FlagDropdownLinks(currentLang) {
28 // get the wrapper elements
29 document.querySelectorAll('.wg-element-wrapper.sw8').forEach(($wrapper) => {
30 // if the .w-dropdown-toggle is not the current active language
31 if ($wrapper.querySelector('.w-dropdown-toggle').getAttribute('lang') !== currentLang) {
32 // swap the dropdown toggle's innerHTML with the current active language link innerHTML
33 const $activeLangLink = $wrapper.querySelector('[lang=' + currentLang + ']');
34 const childDiv = $activeLangLink.innerHTML;
35 const $toggle = $wrapper.querySelector('.w-dropdown-toggle');
36 const toggleDiv = $toggle.innerHTML;
37 $toggle.innerHTML = childDiv;
38 $activeLangLink.innerHTML = toggleDiv;
39 // swap the dropdown toggle's lang attr with the current active language link lang attr
40 const lang = $activeLangLink.getAttribute('lang');
41 const toggleLang = $toggle.getAttribute('lang');
42 $toggle.setAttribute('lang', lang);
43 $activeLangLink.setAttribute('lang', toggleLang);
44 }
45 });
46 }
47</script>querySelectorAllquerySelectorquerySelectorAllI hope this was helpful!