How to create a custom language switcher in HubL?

[cstone]

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?

[andreistoica]

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.

[nutanhaspe]

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?

[ThomasReitz]

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:

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

Spanish > GermanGerman > Spanish

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

[DanBQ]

Hi Is it possible to have a statement in my language switcher module so that only if there is a translated page in that language available to display that language option in the switcher, if not don't display that language option in the dropdown?

Here is my code:

<div class="navbar">
  <div class="dropdown">
    <button class="dropbtn">
     <i class="fa fa-globe"></i>
    </button>
    <div class="language-dropdown-content">
     {% if content.language.langauageTag == "en-us" %} <a href="/{{ content.translated_content['en-us'].slug || '' }}">Americas</a> {% endif %}
     <a href="/{{ content.translated_content['en-gb'].slug || 'en-gb' }}/{{ request.path|split('/', 2)|last }}">EMEA</a>
    </div>
  </div> 
</div>

That if statement isn't working. It's just turning the switcher off on every page.

This is the website: https://www.cogencyglobal.com/en-gb

Many thanks!

[piersg]

Hey @DanBQ 

I came up with a language switcher that does that, you just add/remove languages in the "codes" arrays as necessary. It will only display the languages you put in that array.

My original post is here, but for you it would look like this:

*Edit: updated to cut out a line:

{% if content.translated_content|length %}
  {% set codes = {'Americas': 'en-us', 'EMEA': 'en-gb'} %}
  <div class="navbar">
    <div class="dropdown">
      <button class="dropbtn">
       <i class="fa fa-globe"></i>
      </button>
      <div class="language-dropdown-content">
      {% for key, val in codes.items() %}
        {% set URL = "/"~content.translated_content[val].slug || val %}
        <a href="{{ URL }}">{{key}}</a></li>
      {% endfor %}
      </div>
    </div> 
  </div>
{% endif %}

[ThomasReitz]

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: Link to english versionHover: 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.