Wrapping HTML in a menu module to change blog language version?
SOLVEI'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).
For reference this is the menu html
Thanks.
1 Accepted solution
Wrapping HTML in a menu module to change blog language version?
SOLVE@IPars - I'd recommend moving the language switcher outside of the menu module and using HubSpot's built-in multi-language functionality instead.
In your header you can use the langugage switcher module, then you can follow the advice on the help center on creating multi-language blogs.
Your language switcher module will look something like this:
{% module "language-switcher"
path="@hubspot/language_switcher",
label="Language Switcher",
display_mode="localized"
%}
And without any styling will look something like this:
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:
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!
Stephanie O'Gay Garcia
Wrapping HTML in a menu module to change blog language version?
SOLVE@IPars - I'd recommend moving the language switcher outside of the menu module and using HubSpot's built-in multi-language functionality instead.
In your header you can use the langugage switcher module, then you can follow the advice on the help center on creating multi-language blogs.
Your language switcher module will look something like this:
{% module "language-switcher"
path="@hubspot/language_switcher",
label="Language Switcher",
display_mode="localized"
%}
And without any styling will look something like this:
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:
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!
Stephanie O'Gay Garcia
