TYPO3 Language Switch with FLUID - menu

Question

I've made a language menu (switch) for TYPO3 7.6 with Fluid only, no TypoScript. Just a Dropdown, see screenshot below. I also used the Ext:vhs, here's my code example:
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<ul id="languageMenu" class="dropdown menu" data-dropdown-menu>
<!-- german L:0 -->
<f:if condition="{v:page.language()}==0">
<li class="de">
<f:link.page pageUid="{page.uid}" additionalParams="{L:0}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/de.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.de" />
</f:link.page>
<ul class="menu languageSubMenu">
<li class="en">
<f:link.page pageUid="{page.uid}" additionalParams="{L:1}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/gb.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.en" />
</f:link.page>
</li>
</ul>
</li>
</f:if>
<!-- english L:1 -->
<f:if condition="{v:page.language()}==1">
<li class="en">
<f:link.page pageUid="{page.uid}" additionalParams="{L:1}">
<f:image src="EXT:hellocode/Resources/Public/Icons/Flags/gb.svg" width="18" height="14"
alt="{f:translate(key: 'LLL:EXT:hellocode/Resources/Private/Language/locallang.xlf:language.en')}" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.en" />
</f:link.page>
<ul class="menu languageSubMenu">
<li class="de">
<f:link.page pageUid="{page.uid}" additionalParams="{L:0}">
<f:image src="EXT:myext/Resources/Public/Icons/Flags/de.svg" width="18" height="14" alt="" />
<f:translate key="LLL:EXT:myext/Resources/Private/Language/locallang.xlf:language.de" />
</f:link.page>
</li>
</ul>
</li>
</f:if>
</ul>
At the moment the language switch is always shown. If there's no page translation, I'll get an 404 Error. Of course, the missing page aren't exist. How can I hide my language switch, if there's no translation?
In past I used USERDEF1 with TypoScript, but I need a solution with Fluid. I also see there's a viewhelper v:condition.page.isLanguage but this isn't working for me or I don't know how?! Is it possible to do this with Fluid or vhs?
I would be grateful for any advice. Otherwise I have to write typoscript again ...

Answer 1

You don't need extension for that. The viewhelpers languageMenu is enough.
Here the code I use, ok for accessibility, working with bootstrap 4 :
<div class="navbar-nav mr-auto dropdown show">
<v:page.languageMenu
hideNotTranslated="1"
order="0,1,2,3"
layout="name"
defaultLanguageLabel="Français"
defaultIsoFlag="fr"
labelOverwrite="FR,EN,NL,ES"
as="menu">
<ul class="navbar-nav mr-auto">
<f:for each="{menu}" as="langMenu">
<li class="nav-item>
<f:if condition="{langMenu.current}=1">
<f:link.page pageUid="{page.uid}"
id="dropdownMenuLink"
class="dropdown-toggle nav-link lang px-3 flag-nav--{langMenu.flag}"
additionalAttributes="{data-toggle:'dropdown', aria-haspopup:'true', aria-expanded:'false'}"
lang="{f:if(condition: '{langMenu.current}=1', then: '{langMenu.flag}')}"
title="<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>français actif, changer de langue</f:case>
<f:case value='gb'>english activate, modify language</f:case>
<f:case value='nl'>Engels activeren, taal wijzigen</f:case>
<f:case value='es'>Español activo, cambio de idioma</f:case>
</f:switch>"
>
{langMenu.label}
</f:link.page>
</f:if>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" aria-expended="false">
<f:for each="{menu}" as="langMenu">
<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>{v:variable.set(value: '0', name: 'langparam')}</f:case>
<f:case value='gb'>{v:variable.set(value: '1', name: 'langparam')}</f:case>
<f:case value='nl'>{v:variable.set(value: '2', name: 'langparam')}</f:case>
<f:case value='nl'>{v:variable.set(value: '3', name: 'langparam')}</f:case>
</f:switch>
<li>
<f:link.page pageUid="{page.uid}"
class="dropdown-item"
lang="{langMenu.flag}"
title="<f:switch expression='{langMenu.flag}'>
<f:case value='fr'>Passer le site en français</f:case>
<f:case value='gb'>Go to english version</f:case>
<f:case value='nl'>Ga naar de nederlandse versie</f:case>
<f:case value='es'>Salta el sitio en español</f:case>
</f:switch>"
additionalParams="{L:'{langparam}'}"
>
{langMenu.label}
</f:link.page>
</li>
</f:for>
</ul>
</li>
</f:for>
</ul>
</v:page.languageMenu>
</div>

Answer 2

I can only propose to use https://typo3.org/extensions/repository/view/sr_language_menu
You can simply use it like that: https://bitbucket.org/reelworx/rx-typo3-sitesetup/src/e34b675a223f02580838fe7d5d118d7f07fd8a68/Resources/Private/Layouts/Default.html?at=master&fileviewer=file-view-default#Default.html-48
Of course it is fully Fluid based, so you can override all templates to your needs.

Answer 3

You can use vhs and the ViewHelpers LanguageMenu
[https://fluidtypo3.org/viewhelpers/vhs/master/Page/LanguageMenuViewHelper.html][1]