Wrapping HTML in a menu module to change blog language version?
SOLVE
I'm a HubSpot and HubL novice trying to develop a blog template with navigation styled similar to my corporate website (WordPress), which includes an English/French language switching link:
I’m currently using a menu module to create the navigation. I'm trying to figure out if it's possible to use wrapping html and HubL code to apply some logic to the menu module when the EN (English) or FR (French) link is clicked, i.e., if on an English page and clicking the FR link, go to the French version (if there is one; otherwise, go to the French blog listing page), and if on a French page and clicking the EN link, go to the English version (if there is one; otherwise, go to the English blog listing page).
And without any styling will look something like this:
Language Switcher
Which doesn't look like yours, but you can use CSS to remove the globe, remove absolute positioning from the dropdown... etc. to style it. The HTML looks like this so it's straightforward enough:
Language Switcher HTML
You should be able to hide the current language as well by using a condition and comparing it to the page's current language (using the {{ content.language }} tag - see page variables here).
And I've always used JavaScript to output "EN" instead of English by pulling the data-language tag, like this:
/* Change links in the switcher from language (e.g. English) to abbreviation (e.g. EN) */
var langLinks = document.querySelectorAll(".lang_switcher_link");
langLinks.forEach(function (langLink) {
var language = langLink.dataset.language.toUpperCase();
langLink.text = language;
});
But am curious if anyone else has a more HubL friendly way of doing it!
And without any styling will look something like this:
Language Switcher
Which doesn't look like yours, but you can use CSS to remove the globe, remove absolute positioning from the dropdown... etc. to style it. The HTML looks like this so it's straightforward enough:
Language Switcher HTML
You should be able to hide the current language as well by using a condition and comparing it to the page's current language (using the {{ content.language }} tag - see page variables here).
And I've always used JavaScript to output "EN" instead of English by pulling the data-language tag, like this:
/* Change links in the switcher from language (e.g. English) to abbreviation (e.g. EN) */
var langLinks = document.querySelectorAll(".lang_switcher_link");
langLinks.forEach(function (langLink) {
var language = langLink.dataset.language.toUpperCase();
langLink.text = language;
});
But am curious if anyone else has a more HubL friendly way of doing it!