Top-Bar oder Service-Navigation fehlen nach einem Update

Nach einem Update kann es passieren, dass die Top-Bar im Header fehlt oder dort die Service-Navigation verschwunden ist. Wie sich das zeigt, hängt von deinem Shop ab:

• Führt dein Shop mehrere Sprachen oder Währungen, bleiben Sprach- und Währungsumschalter sichtbar. Es fehlen die Service-Navigation und die Hotline.
• Führt dein Shop nur eine Sprache und eine Währung, bleibt nichts übrig. Die Leiste fällt in sich zusammen und wirkt, als sei sie verschwunden.
• Hast du die Inhalte der Top-Bar in die USP-Bar verlagert, erscheinen die Umschalter doppelt im Header, einmal in der USP-Bar und einmal an der regulären Position.

---

Was sich geändert hat

In Version 7.13 bringt Shopware Commercial eine eigene Fassung der Datei storefront/layout/header/top-bar.html.twig mit. Darin wird der Template-Block layout_header_top_bar_inner vollständig ersetzt, ohne den ursprünglichen Inhalt über {{ parent() }} wieder einzubinden:

SwagCommercial: top-bar.html.twig

{% block layout_header_top_bar_inner %}
    ...
    {% if header.languages.count > 1 or header.currencies.count > 1 or b2bHasSwitcher %}
        <nav class="top-bar-nav d-flex justify-content-end align-items-center gap-3" ...>
            ...
        </nav>
    {% endif %}
{% endblock %}

Alles, was ein Theme an dieser Stelle ergänzt, entfällt dadurch ersatzlos: bei ThemeWare® also die Service-Navigation, die Hotline und die Gestaltung der Leiste. In Version 7.11 war diese Datei noch nicht enthalten, der Effekt tritt also erst nach dem Update auf.

Betroffen ist im Übrigen nicht nur ThemeWare®, sondern jede Erweiterung, welche die Top-Bar an dieser Stelle erweitert.

Prüfen, ob es dich betrifft

Öffne den Seitenquelltext deiner Storefront (Strg + U) und suche nach top-bar-nav. Die beiden Fassungen unterscheiden sich in der Klassenliste:

Quelle	Markup
ThemeWare®	<nav class="top-bar-nav d-flex justify-content-end gap-3">, darin ein <div class="... twt-top-bar">
Shopware Commercial	<nav class="top-bar-nav d-flex justify-content-end align-items-center gap-3">, darin nur die Umschalter

Steht dort align-items-center und fehlt twt-top-bar, liegt der beschriebene Fall vor.

---

Die Lösung: ThemeWare® 5.2.0

Seit ThemeWare® 5.2.0 gibt es für diesen Fall einen eigenen Kompatibilitätsmodus. Er bleibt bewusst abgeschaltet, bis du ihn einschaltest - Shops ohne Shopware Commercial sind davon nicht betroffen.

1. Aktualisiere ThemeWare® auf Version 5.2.0 oder höher
2. Öffne die Theme-Konfiguration und stelle folgende Konfiguration auf ThemeWare® (Plugin-kompatibel):

Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Top-Bar"

3. Speichere die Theme-Konfiguration und leere den Browser-Cache (Strg + F5)

Hotline, Service-Menü, Farben und Ausrichtung von ThemeWare® sind damit wieder da. Die Inhalte von Shopware Commercial - also der B2B-Kontextwechsel für Organisationseinheiten - bleiben sichtbar und werden an der Stelle von Sprach- und Währungsauswahl eingebettet.

---

Workaround, falls du noch nicht aktualisieren kannst

Kannst du das Update noch nicht einspielen, lässt sich die Top-Bar über eine eigene Template-Datei im "ThemeWare® Customizing Plugin" wiederherstellen.

1. Priorität der Erweiterung anheben

Damit deine Template-Datei nach der Datei von Shopware Commercial greift, muss die Erweiterung eine höhere Priorität haben. Ergänze dafür in der TcinnCustomizing.php folgende Methode:

TcinnCustomizing.php

public function getTemplatePriority(): int
{
    return 100; // hohe Priorität
}

2. Template-Datei anlegen

Lege im Customizing Plugin die folgende Datei an:

src/Resources/views/storefront/layout/header/top-bar.html.twig

top-bar.html.twig

{% sw_extends '@Storefront/storefront/layout/header/top-bar.html.twig' %}

{% block layout_header_top_bar_inner %}
    <nav class="top-bar-nav d-flex justify-content-end gap-3"
         aria-label="{{ 'header.topBarAriaLabel'|trans|striptags }}"
    >
        <div class="row align-items-center twt-top-bar">
            {% if theme_config('twt-header-top-bar-hotline-show') == 2 %}
                <div class="col-auto">
                    <div class="twt-top-bar-hotline">
                        <div class="top-bar-hotline">
                            <span class="twt-top-bar-hotline-label">{{ 'twt.header.serviceHotline'|trans|sw_sanitize }}</span>
                            {{ 'twt.header.serviceHotlineText'|trans|sw_sanitize }}
                        </div>
                    </div>
                </div>
            {% endif %}

            <div class="col-auto{% if theme_config('twt-header-top-bar-hotline-show') == 2 %} ps-0{% endif %}">
                <div class="twt-top-bar-dropdowns d-flex justify-content-end gap-3">
                    {% if theme_config('twt-header-top-bar-languages-menu-show') == 2 and header.languages.count > 1 %}
                        {% sw_include '@Storefront/storefront/layout/header/actions/language-widget.html.twig' %}
                    {% endif %}

                    {% if theme_config('twt-header-top-bar-currencies-menu-show') == 2 and header.currencies.count > 1 %}
                        {% sw_include '@Storefront/storefront/layout/header/actions/currency-widget.html.twig' %}
                    {% endif %}

                    {% sw_include '@Storefront/storefront/themeware/twt-service-menu.html.twig' ignore missing %}
                </div>
            </div>
        </div>
    </nav>
{% endblock %}

3. Erweiterung aktualisieren und Cache leeren

1. Zippe den Ordner TcinnCustomizing und lade ihn in deinen Shop
2. Leere den Shopware Cache ("Einstellungen" => "System" => "Caches & Indizes" => "Caches leeren")
3. Leere den Browser-Cache (Strg + F5)

---