Language Switcher Code

[Ingentis]

Hi all,

I still have a problem adding a language switcher to our landing pages. One example would be this page: https://lp.ingentis.com/events?hs_preview=WDGJxiqF-113672377023

What I have already found out:

• It is about the "header-no-navigation.html" module. The complete code for this is the following:

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

• It seems like the right code to include a language switcher is the following: 

      {# Header navigation row one #}
      <div class="header__row-1">
        {% if content.translated_content.values()|selectattr('published')|length || is_listing_view && 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 %}
        <div class="header__search header--element">
          {% module 'site_search' path='@hubspot/search_input',
            label='Search',
            field_label='Search',
            placeholder=''
          %}
        </div>
      </div>
      {# End header navigation row one #}

My problem: I don't know where in the code I need to insert the language switcher code. I would like to have it in the upper right corner of the landing page. Can someone help me with that?

Thanks,

Theresa

[GRajput · Accepted solution]

Hi @Ingentis 

If you have found the module then I assume you know which theme is being used for your site. Now you can add the language switcher in the header partial template. You will find that in You Theme > templates > partials > header ( this can little different but it will contain a header ). You will have to use some CSS to style and align it properly. This will add a language switcher to your site.

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


 {# Header navigation row one #}
      <div class="header__row-1">
        {% if content.translated_content.values()|selectattr('published')|length || is_listing_view && 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 %}
        <div class="header__search header--element">
          {% module 'site_search' path='@hubspot/search_input',
            label='Search',
            field_label='Search',
            placeholder=''
          %}
        </div>
      </div>
      {# End header navigation row one #}
                                        {% end_module_block %}
                                </div>
                        </div>
                </div>
        </header>
</div>

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[Ingentis]

I copied the code you provided as a whole into the header partial but unfortunately, the language switcher still does not appear. I checked multiple times if the translation is properly connected and it is but apparently I am doing something wrong here. 

[GRajput]

Hi @Ingentis 

Have you created a multi-language variation for your page? If not then please create one and then try.

Thanks!

[Ingentis]

I have:

It still doesn't show the language switcher though. For reference, I am still talking about this page here: https://lp.ingentis.com/events

[GRajput]

Hi @Ingentis 

Okay try to add like this:

<div class="custom-header lp-header">
        <header class="site-header">
                <div class="header-inner">
			{% module "language_switcher" path="@hubspot/language_switcher", label="language_switcher" %}
                        <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>

[Ingentis]

Okay, so with that I now can see the "language switcher" in the Global Content Editor, however it is not visible. I also tried changing the color of the font.

But maybe that is something HubSpot Support could also help with. 

[GRajput]

Hi @Ingentis 

I just checked and it's visible on the page. 

https://prnt.sc/BqYtA-DwTF0p

Now all you need to do is align it with CSS.

Thanks!

[Ingentis]

Thank you!

Unfortunately, I don't know how to do CSS.

I would like to have it displayed in the upper right corner. 

Is this something you could help with as well or should I try to google this?

[GRajput]

Hi @Ingentis 

Yes, you can book a meeting as per the slot available.

Thanks!