Bilder und Icons in der Shopware 6 Flyout Navigation: Schritt für Schritt Anleitung

Einführung: Die Bedeutung visueller Hinweise

Visuelle Hinweise sind ein wichtiges Element in Online-Shops. Kunden erkennen Kategorien schneller und navigieren intuitiver, wenn visuelle Elemente wie Bilder und Icons verwendet werden. In diesem Beitrag zeige ich dir Schritt für Schritt, wie du Bilder und Icons in die Flyout Navigation von Shopware 6 integrieren kannst. Zunächst besprechen wir die Vor- und Nachteile, um herauszufinden, ob diese Anpassung für euren Shopware-Shop sinnvoll ist.

Vorteile: Warum Bilder oder Icons in der Navigation?

• Schnellere Erkennung von Kategorien: Menschen erkennen Kategorien schneller durch visuelle Hinweise.
• Emotionale Bindung: Bilder können emotionale Reaktionen hervorrufen, die die Bindung zu eurer Marke stärken.
• Verbesserte Nutzererfahrung: Bilder machen die Navigation einfacher und übersichtlicher.
• Erhöhte Conversion-Rate: Eine verbesserte Nutzererfahrung kann die Conversion-Rate steigern.

Nachteile: Warum du vielleicht doch auf Bilder oder Icons in der Navigation verzichten solltest?

• Performance-Probleme: Große oder zu viele Bilder können die Performance beeinträchtigen.
• Inkonsistenz im Design: Unterschiedliche oder minderwertige Bilder oder Icons können den Stil und das Design des Shops stören.
• Zusätzlicher Aufwand: Die Pflege und Aktualisierung der Bilder/Icons erfordert zusätzlichen Aufwand.

Zusatz-Tipp: Performance im Blick behalten

Bevor es losgeht, mache einen PageSpeed-Test vor den Änderungen und nach den Änderungen, damit du sehen kannst, ob du durch die Änderungen große Nachteile erleidest. Hier geht's zu Google PageSpeed Insights

Vorbereitung vor dem Start

Bevor du loslegst, stelle sicher, dass du folgende Ressourcen und die entsprechende Einrichtung hast:

• Einen Shopware 6 Shop.
• Eine Testumgebung.
• Ein Child-Theme.
• Zugang zu deinen Template-Dateien.
• Die Kategorien sollten ähnlich angeordnet sein wie auf dem Screenshot.


Kategorie Ansicht (Quelle: Shopware 6.5.7.3 Admin-Bereich)

Wenn du an diesem Punkt schon verzweifelst, kontaktiere mich, dann helfe ich dir gerne. Denn ohne diese Voraussetzungen brauchst du hier gar nicht weiterlesen, das wäre tatsächlich in dem Fall Zeitverschwendung.

Du hast alles und bist ready? Nice! Dann ab an die Arbeit.

3-Schritte-Anleitung

Schritt 1: Zusatzfeld anlegen

1. Logge dich in deinen Admin-Bereich ein, meistens “/admin”, also z.B. www.beispiel-shop.de/admin.
2. Gehe links auf “Einstellungen”, dort unter “System” auf “Zusatzfelder”.
   

   Zusatzfelder Einstellung (Quelle: Shopware 6.5.7.3 Admin-Bereich)

3. Klicke oben rechts auf “Set anlegen”.
4. Vergib einen technischen Namen: “categorydata_menu” → In allen Administrationssprachen pflegen → Label z.B. “Kategorie Icon” (DE) und “Category Icon” (EN) → Verwenden für “Kategorien” (wichtig, damit wir das Zusatzfeld im Admin-Bereich an der richtigen Stelle sehen) → Dann auf “Speichern”.
   
   

   Set Anlegen (Quelle: Shopware 6.5.7.3 Admin-Bereich)

5. Jetzt nach unten scrollen und auf “Neues Zusatzfeld” klicken → Typ → “Medienfeld” → Technischer Name “categorydata_menu_image” (wichtig, das muss genauso heißen, da wir diesen Namen dann im späteren Code verwenden) → Position → Kann auf 1 gesetzt werden → Label beschriften z.B. “Icon wählen” (DE) “Select icon” (EN) → “Hinzufügen” → Dann auf “Speichern”.
   

   Zusatzfelder Anlegen (Quelle: Shopware 6.5.7.3 Admin-Bereich)

6. Cache leeren: “Einstellungen” → “System” → Cache & Indizes → “Caches leeren”.
7. Admin-Bereich neu laden und überprüfen, es sollte in den Kategorien unten das Zusatzfeld erscheinen.
   

   Zusatzfeld im Admin-Bereich (Quelle: Shopware 6.5.7.3 Admin-Bereich)

Schritt 2: Twig-Datei bearbeiten

1. Öffne deine Template-Dateien über deine IDE oder im Editor in deinem Child-Theme (ShopwareVerzeichnis/custom/plugins/DeinTheme/). “DeinTheme” sollte dann der Child-Theme Name sein, den du auch im Admin-Bereich unter “Inhalte” → “Themes” findest.
   

   Child Theme Template (Quelle: PhpStorm 2022.3.2)

2. Bearbeite oder erstelle die Datei: custom/plugin/DeinTheme/layout/navigation/flyout.html.twig (Wenn bei dir die Datei schon bearbeitet wurde, überschreibe nur den Block "{% block layout_navigation_flyout_categories %}")
3. Speichern natürlich nicht vergessen.

So sollte die Datei dann aussehen:

{% sw_extends '@Storefront/storefront/layout/navigation/flyout.html.twig' %}

{% block layout_navigation_flyout_categories %}
    {% set mediaIds = [] %}
    {% for child in navigationTree.children %}
        {% for grandchild in child.children %}
            {% if grandchild.category.customFields.categorydata_menu_image is not empty %}
                {% set mediaIds = mediaIds | merge([grandchild.category.customFields.categorydata_menu_image]) %}
            {% endif %}
        {% endfor %}
    {% endfor %}
    {% set mediaCollection = mediaIds is not empty ? searchMedia(mediaIds, context.context) : {} %}

    <div class="{{ category.media ? 'col-8 col-xl-9' : 'col' }}">
        <div class="navigation-flyout-categories row">
            {% for child in navigationTree.children %}
                <div class="col">
                    <ul class="list-unstyled">
                        <li class="navigation-flyout-item">
                            <strong>{{ child.category.translated.name }}</strong>
                        </li>
                        <ul class="list-unstyled">
                            {% for grandchild in child.children %}
                                {% set mediaId = grandchild.category.customFields.categorydata_menu_image %}
                                {% set media = mediaId ? mediaCollection.get(mediaId) : grandchild.category.media %}
                                <li class="navigation-flyout-item">
                                    <a itemprop="url" href="{{ grandchild.category.type == 'link'
                                    ? (grandchild.category.internalLink
                                    ? seoUrl('frontend.navigation.page', { navigationId: grandchild.category.internalLink })
                                    : grandchild.category.externalLink)
                                    : seoUrl('frontend.navigation.page', { navigationId: grandchild.category.id }) }}"
                                       title="{{ grandchild.category.translated.name }}" class="nav-link navigation-flyout-link">
                                        {% if media %}
                                            {% sw_thumbnails 'navigation-flyout-teaser-image-thumbnails' with {
                                                media: media,
                                                sizes: { 'default': '50px' },
                                                attributes: {
                                                    'class': 'navigation-flyout-category-image img-fluid me-3',
                                                    'alt': (media.translated.alt ?: grandchild.category.translated.name),
                                                    'title': (media.translated.title ?: grandchild.category.translated.name),
                                                    'data-object-fit': 'cover',
                                                    'loading': 'eager'
                                                }
                                            } %}
                                        {% endif %}
                                        <span itemprop="name" class="navigation-flyout-category-name">{{ grandchild.category.translated.name }}</span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </ul>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

Was passiert hier?

• Vererbung: Wir erweitern das originale Template von Shopware und überschreibe den Block "layout_navigation_flyout_categories", um die Grundstruktur beizubehalten.
• Bildlogik: Wir prüfen, ob die Kategorie oder das Zusatzfeld ein Bild hat, und wenn ja, wird es angezeigt. Wenn die Kategorie bereits ein Bild hat und ihr das weiter verwenden wollt, aber für das Flyout ein anderes Bild nutzen möchtet, könnt ihr das Zusatzfeld verwenden. Easy peasy!

Schritt 3: Cache leeren und Theme kompilieren

1. Cache leeren: “Einstellungen” → “System” → Cache & Indizes → “Caches leeren”.
2. Theme kompilieren: “Inhalte” → “Themes” → Dein Theme hier auswählen → “Speichern” klicken und anschließend mit “Speichern” bestätigen.

Fazit

Zusammengefasst: Mit dieser Anleitung kannst du ganz einfach Bilder und Icons in die Shopware 6 Flyout Navigation einfügen. Dies verbessert die Nutzererfahrung und kann eure Conversion-Rate steigern. Denke daran, die Performance deines Shops im Auge zu behalten und regelmäßig zu überprüfen. Wenn du Fragen hast oder Unterstützung benötigst, kontaktiere mich gerne. Viel Erfolg!

Links zum Thema

• Google PageSpeed Insights
• Shopware Dokumentation
• Twig Dokumentation
• Bootstrap Cheatsheet