hallo@webwilli.at
hallo@webwilli.at +43 676 9724611
Stefan Schoner
20.11.2024

Einfaches Sprachmenü in TYPO3 via dataProcessor

Zuerst müssen wir sicherstellen, dass die Sprache konfiguriert ist.

In den meisten Fällen unter: config/sites/main/config.yaml

languages:
   -
     title: Deutsch
     enabled: true
     languageId: 0
     base: /
     typo3Language: de
     locale: de_DE.UTF-8
     iso-639-1: de
     navigationTitle: Deutsch
     flag: de
  -
     title: English
     enabled: true
     locale: en_US
     base: /en/
     navigationTitle: English
     flag: en-us-gb
     languageId: 1

Wenn wir das geschafft haben, müssen wir im Typoscript Setup die Navigation generieren:page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        dataProcessing {
            70 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
            70 {
              languages = auto
              as = languageMenu
           }
        }
    }
}

Korrekt eingebunden ist das languageMenu jetzt im Fluid-Template verfügbar. Achtung: Die Seite sollte auch im Backend übersetzt sein, sonst ist {item.available} false und somit seht ihr nichts im dropdown (In diesem Beispiel ein Bootstrap5 Standard dropdown).

<div class="dropdown">
    <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <f:for each="{languageMenu}" as="item" iteration="i">
            <f:if condition="{item.active}">
                <f:then>{item.twoLetterIsoCode}</f:then>
            </f:if>
        </f:for>
    </a>
    <ul class="dropdown-menu">
        <f:for each="{languageMenu}" as="item" iteration="i">
            <f:if condition="{item.available} && !{item.active}">
                <f:then>
                    <li>
                        <a class="dropdown-item {f:if(condition: item.active, then: 'current')} {f:if(condition: item.available, else: 'text-muted')}"
                           href="{item.link}"
                           hreflang="{item.hreflang}"
                        >
                            {item.twoLetterIsoCode}
                        </a>
                    </li>
                </f:then>
            </f:if>
        </f:for>
    </ul>
</div>

Stolz bin ich auf die zwei aufeinanderfolgenden foreach Schleifen nicht, aber anders kann man die aktuell aktive Sprache allein nicht so einfach rausholen. Je nach HTML-Struktur kann natürlich ein einfaches foreach auch genug sein.
getestet in Version 12 LTS

Webwilli
Webwilli