topic Re: Include Language Switcher In Header in CMS Development

Include Language Switcher In Header

Ingentis — Thu, 29 Aug 2024 09:23:03 GMT

Hi all,

We have a landing page template that was created during our HubSpot setup. This template does not include a language switcher but it would definitely make sense to have one.

We also have a "website template" but that is in our old CI and we are not using it. However, it includes the following code for a language switcher:

<div class="language-switcher mobile-language-switcher"> {% module "language_switcher" path="../../modules/language-switcher", label="Language Switcher" %} </div>

The code for the language switcher module is as follows:

<div class="language-switcher-wrapper"> <button class="language-selector"> <i class="fa-solid fa-earth-europe" aria-hidden="true"></i> <span class="language-text"> {{ module.english_ }} </span> </button> <ul class="dropdown-menu"> {% for item in module.language_items %} <li class="dropdown-item dropdown-item-reset px-3"> {% set href = item.language_link.url.href %} {% if item.language_link.url.type is equalto "EMAIL_ADDRESS" %} {% set href = "mailto:" + href %} {% endif %} <a href="{{ href }}" {% if item.language_link.open_in_new_tab %}target="_blank"{% endif %} {% if item.language_link.rel %}rel="{{ item.language_link.rel }}"{% endif %} > <span>{{ item.language_text }}</span> </a> </li> {% endfor %} </ul> </div>

The page on which I would like to add the language switcher module is the following: https://lp.ingentis.com/events

Can someone help me figure out where to insert the language switcher code for it to appear in the header section of this page?

Thanks in advance!

Best,

Theresa

Re: Include Language Switcher In Header

GiantFocal — Thu, 29 Aug 2024 15:06:44 GMT

Hi @Ingentis,

Can you confirm if the site page and landing page templates are within the same theme?

Re: Include Language Switcher In Header

BarryGrennan — Thu, 29 Aug 2024 16:39:24 GMT

quick look at the code on the page shows me a partial "Ingentis_May2023/templates/partials/header-no-navigation.html"

That's where you'd want to put your language switcher.

To be honest the code form your custom module looks like it overcomplicates things greatly. It looks like you have to manually set the link. There's also a provision for if the link is an email. Why would it be an email??

For reference here is the code from the Hubspot Boilerplate that simply includes the default Hubspot Language Switcher. The switcher her will show up automatically if the page has translations.

{% if content.translated_content.values()|selectattr("published")|length or is_listing_view and group.translations %} <div class="header__language-switcher header--element"> <div class="header__language-switcher--label"> {% module "language-switcher" path="@hubspot/language_switcher", label="Language switcher", display_mode="localized" %} <div class="header__language-switcher--label-current"> {{ locale_name(locale) }}</div> </div> </div> {% endif %}

And if you still needed to customize the switcher more instead of using the default Hubspot module you could use something like:

<ul class="menu__submenu menu__submenu--level-2 no-list"> <li class="lang-item"> <a class="lang-link" href="#">{{ locale.language }}</a> </li> {% for item in content.translated_content|sort(False, False, 'language') %} <li class="lang-item"> <a class="lang-link" href="//{{ item.resolvedDomain }}/{{ item.slug }}">{{ item.language }}</a> </li> {% endfor %} </ul>

That'll auto detect the translations so no need for manually adding links etc.

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

Re: Include Language Switcher In Header

Ingentis — Fri, 30 Aug 2024 06:40:23 GMT

Hi Barry,

First of all, thank you so much for looking into this. To be honest, I don't know why the language switcher was coded that way. I think we should be fine with the default one.

This is the header-no-navigation code. Could you tell me where exactly I'd need to insert the code that you sent?

<div class="custom-header lp-header"> <header class="site-header"> <div class="header-inner"> <div class="header-row"> <div class="header-logo"> {% module_block module "header_logo" path="@hubspot/rich_text" label="Header Logo" %} {% module_attribute "html" %} <a href="https://www.ingentis.com/"> <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" class="navbar-brand-image d-block fill-svg-current flex-svg-img is-portrait"> <defs> <style> .cls-1 { fill: #fff; } .cls-2 { fill: #eaf469; } </style> </defs> <g> <path class="cls-1" d="M8.84,20.47A6.83,6.83,0,0,0,2,27.3V75.15a6.84,6.84,0,1,0,13.67,0V27.3A6.83,6.83,0,0,0,8.84,20.47Z"></path> <circle class="cls-2" cx="8.84" cy="9.06" r="6.84"></circle> <path class="cls-1" d="M252.22,20.46a30.8,30.8,0,0,0-30.76,30.76V75.13a6.84,6.84,0,0,0,13.68,0V51.22a17.08,17.08,0,1,1,34.16,0v24a6.84,6.84,0,0,0,13.68,0v-24A30.8,30.8,0,0,0,252.22,20.46Z"></path> <path class="cls-1" d="M52,20.46A30.8,30.8,0,0,0,21.26,51.22V75.13a6.84,6.84,0,0,0,13.67,0V51.22a17.09,17.09,0,1,1,34.17,0v24a6.84,6.84,0,0,0,13.67,0v-24A30.79,30.79,0,0,0,52,20.46Z"></path> <path class="cls-1" d="M315.54,21H302.48V9.1a6.84,6.84,0,0,0-13.67,0V75.24a6.84,6.84,0,1,0,13.67,0V34.65h13.06a6.84,6.84,0,1,0,0-13.67Z"></path> <path class="cls-1" d="M333.85,20.53A6.84,6.84,0,0,0,327,27.37V75.22a6.84,6.84,0,1,0,13.67,0V27.37A6.83,6.83,0,0,0,333.85,20.53Z"></path> <circle class="cls-2" cx="333.85" cy="9.13" r="6.84"></circle> <path class="cls-1" d="M378,44.5h0c-.48,0-4.21,0-13.65,0a5.26,5.26,0,0,1-5.25-5.25,4.91,4.91,0,0,1,5.25-4.9h22.85a6.72,6.72,0,0,0,6.8-6.62,6.8,6.8,0,0,0-6.8-6.79H364.31c-10.54,0-18.8,8-18.8,18.31a18.87,18.87,0,0,0,18.8,18.88h0c.5,0,4.25-.05,13.65,0a5.49,5.49,0,0,1,5.6,5.37c0,3.13-2.82,4.77-5.6,4.77H355.44a6.79,6.79,0,0,0,0,13.58H378c10.66,0,19-8.06,19-18.35A19,19,0,0,0,378,44.5Z"></path> <path class="cls-1" d="M118.88,82a30.75,30.75,0,0,0,30.71-30.48,6.41,6.41,0,0,0,.17-1.46V27a6.5,6.5,0,0,0-13-.64A30.71,30.71,0,1,0,118.88,82Zm0-48.44a17.73,17.73,0,1,1-17.73,17.72A17.75,17.75,0,0,1,118.88,33.51Z"></path> <path class="cls-2" d="M142.71,85.21a6.84,6.84,0,1,0,7.35,6.28A6.83,6.83,0,0,0,142.71,85.21Z"></path> <path class="cls-1" d="M124.29,91c-9.22,2.52-19.07,1.23-25.1-3.27a6.5,6.5,0,0,0-7.77,10.41c6.26,4.67,14.63,7.12,23.45,7.12a48.91,48.91,0,0,0,12.83-1.72A6.5,6.5,0,0,0,124.29,91Z"></path> <path class="cls-1" d="M186.05,20.41a30.75,30.75,0,0,0-30.71,30.71h0c0,17.64,15.75,30.12,30.46,30.7h.62a31.45,31.45,0,0,0,13.7-3.42,6.49,6.49,0,1,0-6-11.49,18.93,18.93,0,0,1-7.77,1.92c-5.75-.23-13.51-4.24-16.61-11.23h40.57a6.49,6.49,0,0,0,6.49-6.5h0A30.74,30.74,0,0,0,186.05,20.41Zm0,13a17.76,17.76,0,0,1,16.49,11.23h-33A17.76,17.76,0,0,1,186.05,33.4Z"></path> </g> </svg> </a> {% end_module_attribute %} {% end_module_block %} </div> </div> </div> </header> </div>

Thanks again!

Best,

Theresa