How to create a custom language switcher in HubL?

SOLVE
Community Manager

HubSpot hosted our first ever CMS Developer AMA on July 25th 2018. This question was submitted and the first reply is what the panelist and audience chat responded with. (view the full AMA here)

--------------------------------------------

How to create a custom language switcher in HubL?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Community Manager
3 Replies
Community Manager
Regular Contributor

Hi,
thanks for the tip.

However, I did notice something strange while trying it out:

I re-created the example from the video and unfortunately it doesn't work that easily (at least in our test portal).

 

Here's the problem:

If the "Enable Language Specific Redirects" function is activated in the settings, the URL of the translated language version is linked correctly. However, the URL addition "?hsLang=de" ensures that a visitor cannot change the language, because he is always redirected to the current language.

If this function is deactivated, the output of the URL of the translated version works as text, but not as a link target.

 

However, if you give the link the class "lang_switcher_link" from the standard language switcher module, the correct target URL is linked.

 

hover-english-version.pngHover: Link to english versionhover-french-version.pngHover: Link to french version

Or you simply add the class "hs-skip-lang-url-rewrite" on a parent or child-element. Which deactivates the automatic Language Specific Redirects on your Language-Switcher-Links. 

With this class, the target url is linked correctly, too – no matter if the setting is activated or not.

hover_engl_2.png

 

 

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hi. I struggled a bit with this but you can find below my current solution:</p>

 

<div class="menu-dropdown">

<!-- language select item here -->
<div class="language-select">

{% if absolute_url is string_containing "/en/" %} English {% else %} Nederlands {% endif %}

</div>


<!-- hidden dropdown -->
<div class=" menu-dropdown-content">
<ul><li><a href="/{{ content.translated_content['nl-nl'].slug || '' }}" target="_blank">Nederlands</a></li>
<li><a href="/{{ content.translated_content['en'].slug || 'en' }}" target="_blank">English</a></li></ul>
</div>
</div>

 


Let me know if this helps.