Language Menu rendering

Community Newcomer's Corner
1

I am trying to get my language menu to work on the front-end but I am having issues, here is a screenshot of a prototype I would like it to look like , and here is what is actually happening

Here is the code for the prototype

<!-- Main Nav -->
                <div id="main-nav-wrapper">
                    <div class="container">
                        <ul class="nav navbar-nav main-nav pull-right" id="main-nav">
                           <li class="dropdown dropdown-accordion"><a class="dropdown-toggle dropdown-small" data-toggle="dropdown" aria-expanded="false" href="#">DE <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
                                    <ul class="dropdown-menu main-menu dropdown-select" role="menu">
                                        <li><a href="">DE</a></li>
                                        <li><a href="">EN</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown dropdown-accordion"><a class="dropdown-toggle dropdown-small" data-toggle="dropdown" aria-expanded="false" href="#">Deutschland <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
                                    <ul class="dropdown-menu main-menu dropdown-select" role="menu">
                                        <li><a href="">Deutschland</a></li>
                                        <li><a href="">Österreich</a></li>
                                    </ul>
                                </li>
		           </ul>
		      </div>
		</div>

and here is the languageMenu.html template

namespace neos=TYPO3\Neos\ViewHelpers}
{namespace ts=TYPO3\TypoScript\ViewHelpers}
<div>
	<f:for each="{items}" as="item">
		<f:if condition="{item.state} == 'current'"><span class="dropdown-toggle dropdown-small" data-toggle="dropdown" aria-expanded="false">{item.label}</span><span class="glyphicon glyphicon-menu-down" aria-hidden="true" title="{item.label}">{item.preset.uriSegment}</span></f:if>
	</f:for>
</div>
<ul{attributes -> f:format.raw()} class="dropdown-menu main-menu dropdown-select" role="menu">
	<f:for each="{items}" as="item">
		<li{ts:render(path:'{item.state}.attributes', context: {item: item}) -> f:format.raw()}>
			<f:if condition="{item.node}">
				<f:then>
					<neos:link.node node="item.node}"><span class="dropdown-toggle dropdown-small" data-toggle="dropdown" aria-expanded="false">{item.label}</span><span class="glyphicon glyphicon-menu-down" title="{item.label}">{item.preset.uriSegment}</span></neos:link.node>
				</f:then>
				<f:else>
					<span class="dropdown-toggle dropdown-small" data-toggle="dropdown" aria-expanded="false" >{item.label}</span><span title="{item.label}" class="glyphicon glyphicon-menu-down" aria-hidden="true">{item.preset.uriSegment}</span>
				</f:else>
			</f:if>
		</li>
	</f:for>
</ul>

any ideas?

2

I see a syntax error on node="item.node}" that should read node="{item.node}" but aside from that i would need more details about the problem and also the fusion/ts2 code that is involved.

1 Like
3

Hey martin, thanks for your reply. I fixed that script but still not menu.

here is the ts2 code involved. All it does is render the menu through the templatePath property.

languageMenu = TYPO3.Neos:DimensionsMenu {
                		dimension = 'language'
				templatePath = 'resource://Country.Germany/Private/Templates/Page/LanguageMenu.html'
            		}
			
```
And I reference it in my default.html as so

<f:section name=“body”>







    {parts.mainMenu -> f:format.raw()}
    {parts.languageMenu -> f:format.raw()}



{content.header -> f:format.raw()}

4

What exactly does not work? To debug this i would have to setup a site with a similar dimension setup to see what happens.

The template looks pretty unfinished to me and has not much in common with your intended markup, for instance the main div wrapper misses the classes from your expected markup.

I would suggest to go one step at a time. Start with pasting your expected markup into the template and then try to fill one place at a time with values from fusion/ts2.

Is is possible that you want to create a menu for two dimensions since you have Country and Language in your Markup. I doubt that default dimension menu can handle this.

5

Well the language menu isn’t being rendered, so that’s what doesn’t work. So Let’s start with the language menu and ignore the country selection for now, I am trying to render the language menu like this

Screen Shot 2016-09-13 at 5.19.21 PM.png1276×155 24.5 KB

with the current markup it is being rendered like this

Screen Shot 2016-09-13 at 5.22.05 PM.png1275×185 104 KB

I am not sure what you mean by “try to fill one place at a time with values from fusion/ts2.” I am only using ts2 here to render a template.

6

Fusion is just the new name for TS2 i write both to ease the transition.

Regarding your Problem … i just guess that you have two dimensions and thus you will also have to create two separate menus. (If you have a locale dimension for both with fallback things are different)

The TS/Fusion will create a list of items for each dimension and pass that to the fluid where you can use it like:

{namespace neos=TYPO3\Neos\ViewHelpers}
<ul>
  <f:for each="{items}" as="item">
    <li><neos:link.node node="{item.node}">{item.label}</li>
  </f:for>
</ul>

The classes

see also:

7

So after much trial and Error, I figured out that there is an error in the documentation, which was causing my error.

on http://neos.readthedocs.io/en/stable/References/NeosTypoScriptReference.html#dimensionsmenu

the documentation states

Note

The DimensionMenu is an alias to DimensionsMenu, available for compatibility reasons only.
```
But it turns out using DimensionsMenu will cause your menu not to render. Perhaps I misunderstood what was meant by alias but this ambiguity cause some unnecessary headache for me.