topic Re: Wrapping HTML in a menu module to change blog language version? in CMS Development

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

IPars — Thu, 02 Mar 2023 21:54:50 GMT

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

For reference this is the menu html

Thanks.

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

Stephanie-OG — Fri, 03 Mar 2023 14:39:15 GMT

@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 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!

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact

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

IPars — Fri, 03 Mar 2023 20:41:18 GMT

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