Hi guys,
I’m trying to add the language switcher as the last item of my navigation menu.
I’m a developer but I’m not familiar with HubL so I’m struggling to get it done.
Here’s where I’d like to have the switcher:
Here’s how I’m proceeding:
I created a copy of the language switcher module and grabbed the snipped generated:
{% module "module_161590389007024" path="/theme/language_switcher_1", label="language_switcher_1" %}
From here I tried to add it in different files to see where I should put it to render it in the place I’d like it to be.
Here is my custom theme’s folder structure:
Going into templates > partials > header.html
and adding it as follows (jump to “adding language switcher here” comment):
<!--
templateType: global_partial
label: Website header
-->
<header class="header">
<div class="header__container content-wrapper">
{# Header logo column #}
<div class="header__logo header__logo--main">
{% module 'site_logo' path='@hubspot/logo' %}
</div>
{# End header logo column #}
{# Header navigation column #}
<div class="header__column">
{# Header navigation row two #}
<div class="header__row-2">
<div class="header--toggle header__navigation--toggle"></div>
{% if content.translated_content|length %}
<div class="header--toggle header__language-switcher--toggle"></div>
{% endif %}
<div class="header--toggle header__search--toggle"></div>
<div class="header__close--toggle"></div>
<div class="header__navigation header--element">
{# adding the language switcher here #}
{% module "module_161590389007024" path="/theme/language_switcher_1", label="language_switcher_1" %}
{% module 'navigation-primary' path='../../modules/menu-section',
label='Primary navigation'
%}
{# and here #}
{% module "module_161590389007024" path="/theme/language_switcher_1", label="language_switcher_1" %}
</div>
</div>
{# End header navigation row two #}
</div>
{# End header navigation column #}
</div>
</header>
I get this result:
Meaning that to add it inside the actual menu I have to add it in theme > modules > menu-section,
which looks as follows, and where adding the module in any line, for example in the last <nav> element at the end of the file (jump to “adding language switcher here” comment):
{# Default menu item classes #}
{% macro defaultItemClasses() %}
{{
{
'class': 'no-submenu menu-item'
}|xmlattr
}}
{% endmacro %}
{# Menu item classes if a menu item has a child menu #}
{% macro childClasses() %}
{{
{
'class': 'has-submenu menu-item'
}|xmlattr
}}
{% endmacro %}
{# Menu item link attributes if the menu item is the current active page #}
{% macro activeNode() %}
{{
{
'class': 'menu-link active-item',
'aria-current': 'page'
}|xmlattr
}}
{% endmacro %}
{# Menu item link classes if menu item is the parent of the current active page #}
{% macro activeBranch() %}
{{
{
'class': 'menu-link active-branch'
}|xmlattr
}}
{% endmacro %}
{# Menu item link attribute if the menu item is set to open in a new window #}
{% macro linkTarget() %}
{{
{
'target': '_blank'
}|xmlattr
}}
{% endmacro %}
{# Navigation menu item macro #}
{% macro link(node) %}
<li {{ childClasses() if node.children else defaultItemClasses() }}>
<a href="{{ node.url if node.url else 'javascript:;' }}" class="menu-link" {{ activeBranch() if node.activeBranch }} {{ activeNode() if node.activeNode }} {{ linkTarget() if node.linkTarget }}>{{ node.label }}</a>
{% if node.children %}
<input type="checkbox" id="{{ node.label }}" class="submenu-toggle">
<label class="menu-arrow" for="{{ node.label }}">
<span class="menu-arrow-bg"></span>
</label>
{{ renderNavigation(node) }}
{% endif %}
</li>
{% endmacro %}
{# Navigation submenu macro #}
{% macro renderNavigation(menuTree) %}
{% set level = level + 1 %}
<ul class="submenu level-{{ level }}" aria-hidden="{{ level != 1 }}">
<div class="level-{{ level }}"><div class="level-{{ level }}"></div></div>
{% for node in menuTree.children %}
{{ link(node) }}
{% endfor %}
</ul>
{% endmacro %}
{# Main navigation wrapper #}
<nav aria-label="Main menu" class="navigation-primary">
{{ renderNavigation(menu(module.primary_menu_field)) }}
{# Adding language switcher here #}
{% module "module_161590767184329" path="/theme/language_switcher_1", label="language_switcher_1" %}
</nav>
Returns these two errors:
This makes me think that I’m in the right file but I just don’t know how to repurpose the module snippet into the right syntax.
Any help on how to solve this would be extremely appreciated! 
)