CMS Development

IPars
Participant

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:

IPars_0-1677793271616.png

 

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

IPars_1-1677793627098.png

Thanks.

0 Upvotes
1 Accepted solution
Stephanie-OG
Solution
Key Advisor

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: 

 

Language SwitcherLanguage 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 HTMLLanguage 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!

 


Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

View solution in original post

2 Replies 2
Stephanie-OG
Solution
Key Advisor

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: 

 

Language SwitcherLanguage 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 HTMLLanguage 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!

 


Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

IPars
Participant

Wrapping HTML in a menu module to change blog language version?

SOLVE

Thank you so much for this Stephanie! I'm going to take a closer look at it next week... I think it might be just what we need. 🙂

 

Regards,

 

Ian