topic Re: How to create a custom language switcher in HubL? in CMS Development

How to create a custom language switcher in HubL?

cstone — Fri, 27 Jul 2018 00:06:03 GMT

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?

Re: How to create a custom language switcher in HubL?

cstone — Fri, 27 Jul 2018 00:06:27 GMT

Re: How to create a custom language switcher in HubL?

ThomasReitz — Fri, 10 Aug 2018 13:35:15 GMT

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.

Re: How to create a custom language switcher in HubL?

andreistoica — Tue, 25 Sep 2018 19:53:33 GMT

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

<div class="language-select">

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

</div>

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

Re: How to create a custom language switcher in HubL?

nutanhaspe — Fri, 14 Jun 2019 06:39:44 GMT

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

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

<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?

Re: How to create a custom language switcher in HubL?

ThomasReitz — Tue, 25 Jun 2019 09:03:09 GMT

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)

Re: How to create a custom language switcher in HubL?

DanBQ — Tue, 24 Sep 2019 13:05:49 GMT

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!

Re: How to create a custom language switcher in HubL?

piersg — Sat, 30 May 2020 13:57:19 GMT

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 %}