Creating A Custom Language Switcher in HubSpot

Sometimes you need more control over how your language switcher looks in your Hubspot site, in this post we're going to go over the basics of creating a custom language switcher.

First let's take a look at the variables that will tell us if there are translations of this content:

{% if content.translated_content.values()|selectattr("published")|length or is_listing_view and group.translations %} 

content.translated_content.values()|selectattr("published")|length tells us if the content on our page has a corelated transtaltion that's been published.

is_listing_view and group.translations tells us if our blog list page has translated articles on it.

Then we want to loop through the translations, these are going to be identified differently depending on if it's a blog or a page, so we'll set up what to look for first

{% if is_list_view %}
{% set translation_dict = group.translations %}
{% else %}
{% set translation_dict = content.translated_content|sort(False, False, 'language') %}
{% endif %} 

Then the loop:

<ul class="menu__submenu menu__submenu--level-2 no-list">
  {% for item in  translation_dict  %}  
  <li class="lang-item">
<a class="lang-link other-langs" href="{{ item.absoluteUrl}}">{{ item.language }}</a>
   </li>
       {% endfor %}       
          </ul>

If we want to see what the language of the current content is, this is different also for list pages, so we update out if statement above

{% if is_list_view %}
{% set current_language = group.language %}
{% set translation_dict = group.translations %}
{% else %}
{% set current_language = html_lang %}
{% set translation_dict = content.translated_content|sort(False, False, 'language') %}
{% endif %}

Then we'll output that on screen like

 <li class="lang-item">
<a class="lang-link current-lang" href="#">{{ current_language }}</a>
   </li> 

We can use all of the above to get us to a serviceable language translator, but what if we want "French" instead of "fr" (the language code). That's where a language map would come in. Here's an example

{% set language_map = {
    "fr-ca": "French (CA)",
    "en-ca": "English (CA)",
    "es": "Spanish",
    "de": "German",
    "it": "Italian",
    "pt": "Portuguese",
    "zh": "Chinese",
    "ja": "Japanese",
    "ko": "Korean",
    "ru": "Russian"
} %}

Then where we have {{item.language}} and we'll use and instead.

So let's put it all together.

{% set language_map = {
    "fr-ca": "French (CA)",
    "en-ca": "English (CA)",
    "es": "Spanish",
    "de": "German",
    "it": "Italian",
    "pt": "Portuguese",
    "zh": "Chinese",
    "ja": "Japanese",
    "ko": "Korean",
    "ru": "Russian"
} %}

{% if is_list_view %}
{% set current_language = group.language %}
{% set translation_dict = group.translations %}
{% else %}
{% set current_language = html_lang %}
{% set translation_dict = content.translated_content|sort(False, False, 'language') %}
{% endif %}


<ul class="menu__submenu menu__submenu--level-2 no-list">
   <li class="lang-item">
<a class="lang-link current-lang" href="#">{{ language_map[current_language] }}</a>
   </li>
{% for item in  translation_dict  %}  
  <li class="lang-item">
<a class="lang-link other-langs" href="{{ item.absoluteUrl}}">{{loop.index}} {{ language_map[item.language] }}</a>
   </li>
  
       {% endfor %}       
          </ul>

That of course just outputs a very basic list of the languages but you can now manipulate it however you see fit - have the current language as a top level menu item and the translations in a sub menu, use img files of flags in the language map instead of text, etc.