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
5 Replies 5
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.

New Contributor

We have current page language english and created another page with spanish language.

 

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

<!-- {% if absolute_url is string_containing "/en/" %} English {% endif %} -->
{% if absolute_url is string_containing "/es/" %} Spanish
{% else %} English {% endif %}
</div>

<!-- hidden dropdown -->
<div class=" menu-dropdown-content">
<ul class="hs-skip-lang-url-rewrite">
<li><a href="/{{ content.slug }}" target="_blank">{{ content.slug }}</a></li>
<li><a href="/{{ content.translated_content['es'].slug || 'es' }}" target="_blank">Spanish</a></li></ul>
</div>
</div>

 

Here first time means when user view default english version then linking works well but when user view spanish version then linking goes wrong .Here english  display link for spanish and spanish display link for default domain url   with /es appended at the end not whole page url  ..is anybody have any answer?

Reply
0 Upvotes
Regular Contributor

Hi,

 

I think the problem is, that you would need an if-check on the links, too.

{{ content.slug }} is the url path of the current page. So the page links to it self (which isn't really necessary for the visitor).

 

So you would have to check first the language of the current page and set the links for each translation individually.

 

An easy solution could look like:

 

Bildschirmfoto 2019-06-25 um 10.51.07.png

 

This would create a link to the spanish version on the german page and a link to the german page on the spanish page.

 

Bildschirmfoto 2019-06-25 um 10.55.15.pngSpanish > GermanBildschirmfoto 2019-06-25 um 10.54.52.pngGerman > Spanish

 

I hope this helps (and sorry for the late reply)