Weglot 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.

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>
47

In the above code, refer line 29 where we are accessing the switcher. Note that we are doing a querySelector here that always returns only one item. This is the reason why the second switcher will not work.

To 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>
48

Refer line 29 where we we have modified the code to use querySelectorAll instead of querySelector. querySelectorAll returns all switchers, which we can then loop and apply accordingly.

I hope this was helpful!