Help with NavBar Link

I’m currently trying to build a multilingual website and want to include a button in my navbar that will link to the other language (french to english). My navbar is a symbol, which means that when I create another button, it will always redirect to the same page, no matter what page I’m currently on. The thing is, I would like my language link to redirect to the current page but translated. How can I do so without creating a new NavBar symbol for every page of the website?

Hi @Laurence_De_Larochel,

You might need some javascript to do that.
Let’s assume you have two folder in your sitemap, one called “fr” and another one called “en”.

I wrote a small javascript snipet which checks in which folder you currently are and switches the entire url accordingly from “fr” to “en” (respectively “en” to “fr”) before opening it in the same location using the window.open() function

Hope it helps get you started !

Here is the live webflow page
https://current-lang-test.webflow.io/en/welcome

Here is the codepen:

Here is the webflow read-only link
https://preview.webflow.com/preview/current-lang-test?utm_source=current-lang-test&preview=fef45d2e41ec4090ecea870e0a1ecb1e

PS: The code is at the moment at page level, you should out the javascript at the before the end of the tag in the setting of your website, in the custom code tab.

Here is how your button should look like in Webflow custom code element:

<button id='switchLink'>switch language</button>

Here is the JavaScript snipet with comments for you to understand:

/*
 * switch current url
 * based on current language folder
 * commented version 😎 
*/
// function definition
function switchLanguage() {
  // get the switch button from the HTML markup
	const switchButton = document.getElementById('switchLink');
	console.log(`🍑 button id = ${switchButton.id}`); // returns the button element
  
	// get current host url
	let currentHost = window.location.host;
	console.log(`🍌 current host = ${currentHost}`); // returns 'cdpn.io'
  
    // create an array by breaking up the current url pathname by '/'
	let pathNameArray = window.location.pathname.split('/'); // will split: '/boomboom/index.html'
  console.log(pathNameArray); // returns ["", "boomboom", "index.html"]
  
    // access the second element of the splitted url array
	let currentLanguage = pathNameArray[1];
	console.log(`🍉 current language = ${currentLanguage}`); // returns 'boomboom'
  
    // access the third element of the splitted url array
	let currentHTMLpage = pathNameArray[2];
	console.log(`🥑 current HTML page = ${currentHTMLpage}`); // returns 'index.html'
  
	// add a 'click' event listener on the switch link
	switchButton.addEventListener('click', function() {
			// if current language equals 'fr'
			if (currentLanguage == 'fr') {
				// switch URL to 'en' folder
				let newLocation = window.location.protocol + '//' + currentHost + '/en/' + currentHTMLpage;
        console.log(newLocation);
        window.open(newLocation, '_self'); // opens the new url within the same page
				// else if current language equals 'en'
			} else if (currentLanguage == 'en') {
				// switch URL to 'fr' folder
				let newLocation = window.location.protocol + '//' + currentHost + '/fr/' + currentHTMLpage;
        window.open(newLocation, '_self'); // opens the new url within the same page
			}
		} // end of else if statement
	); // end of event listener
}; // end of function definition
console.clear(); // clear previous logs
switchLanguage(); // calls the function

Here is the short version, without comments:

/*
 * switch current url
 * based on current language folder
 * Imediately Invoked Function Expression 🧠
*/
(function switchLanguage() {
	const switchButton = document.getElementById('switchLink');
    let protocol = window.location.protocol;
	let currentHost = window.location.host;
	let pathNameArray = window.location.pathname.split('/');
	switchButton.addEventListener('click', function() {
			if (pathNameArray[1] == 'fr') {
        window.open(protocol + '//' + currentHost + '/en/' + pathNameArray[2], '_self');
			} else if (pathNameArray[1] == 'en') {
        window.open(protocol + '//' + currentHost + '/fr/' + pathNameArray[2], '_self');
			}
		}
	);
})();
1 Like

Wow thank you very much! I’ll try it out :slight_smile:

Quick question, I’m not sure I understand this part: PS: The code is at the moment at page level, you should out the javascript at the before the end of the tag in the setting of your website, in the custom code tab.

instead of pasting the code at page level, past it at site level throuch the settings of your project > custom code > footer as seen on the screen shot bellow. I copied the code at page level so you can see it with the read-only preview link I shared.

By the way, here is a shorter version, without comments:

(function switchLanguage() {
	const switchButton = document.getElementById('switchLink');
  let protocol = window.location.protocol;
	let currentHost = window.location.host;
	let pathNameArray = window.location.pathname.split('/');
	switchButton.addEventListener('click', function() {
			if (pathNameArray[1] == 'fr') {
        window.open(protocol + '//' + currentHost + '/en/' + pathNameArray[2], '_self');
			} else if (pathNameArray[1] == 'en') {
        window.open(protocol + '//' + currentHost + '/fr/' + pathNameArray[2], '_self');
			}
		}
	);
})();


Hope that helps ! :slight_smile:

1 Like

Great thank you! And finally, would there be a way to style the “switch language button”? I would really like the button to display “FR” and “EN” when clicked. Let’s say I’m on the english version, I would like the button to show “FR”.

Hi @Laurence_De_Larochel,

Sure, you could use the .innerHTML method to change the text of the button. You could chain that method directly after the window.open() method like so:

(function switchLanguage() {
	const switchButton = document.getElementById('switchLink');
    let protocol = window.location.protocol;
	let host = window.location.host;
	let pathNameArray = window.location.pathname.split('/');
	switchButton.addEventListener('click', function() {
			if (pathNameArray[1] == 'fr') {
        window.open(protocol + '//' + host + '/en/' + pathNameArray[2], '_self');
        switchButton.innerHTML = 'fr';
			} else if (pathNameArray[1] == 'en') {
        window.open(protocol + '//' + host + '/fr/' + pathNameArray[2], '_self');
        switchButton.innerHTML = 'en';
			}
		}
	);
})();

let me know if that helps.