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