Wie du in der Shopware Navigation den Home Button als Icon darstellst

Wie du in der Shopware Navigation den Home Button als Icon darstellst

Ewald Gering 13. Mai 2017 4

Ich zeige dir heute, wie du in der Navigation von Shopware den Home Button mit einem Icon ersetzt.

Vorher:

shopware navigation home


Nachher:

shopware navigation icon


-> Erst einmal müssen wir herausfinden in welcher Datei wir die Navigation finden.


Block für Navigation im Shopware Code finden

Dafür öffne ich die Chrome Developer Tools und schaue in welcher Klasse der Home Text steht. Dabei fällt mir auf, dass die Kategorien in der Navigation in einer Liste stehen. Also schaue ich noch nach ein paar Klassen, die auf höherer Ebene liegen.

Wir werden fündig

Und Da haben wir auch schon folgende Klasse '<nav class="navigation-main">'

-> Ab ins Bare Theme und auf die Suche machen. 

/themes/Frontend/Bare/frontend


Die Navigation wird auf jeder Seite geladen, daher gehen wir in den 'index' Ordner. Hier sollte die 'main-navigation.tpl' auffallen.

Also öffnen wie die Template Datei und sehen den Block... 

frontend_index_navigation_categories_top_link_home

...indem der Home Button geladen wird. Und genau den müssen wir in unserem Theme überschreiben.


Block überschreiben

Nun legen wir erst einmal die Template Datei main-navigation.tpl unter folgendem Pfad an:

/themes/Frontend/DEINTHEME/frontend/index/main-navigation.tpl

Dort leiten wir wie gewohnt die originale Datei ab:

{extends file="parent:frontend/index/main-navigation.tpl"}

Statt dem Text laden wir einfach das Shopware House Icon:

{block name='frontend_index_navigation_categories_top_link_home'}

<a class="navigation--link is--first{if $sCategoryCurrent == $sCategoryStart && $Cont roller == 'index'} active{/if}" href="{url controller='index'}" title="{s name='Index LinkHome' namespace="frontend/index/categories_top"}{/s}" itemprop="url">

<i class="icon--ho"></i>

</a>

/block}


Zu guter letzt noch den Cache leeren und schon ist das Home Icon statt dem Text 'Home' in der Navigation zu sehen.

Und wieder einmal ist unser Shop ein bisschen individueller als zuvor.

Wenn dir das Tutorial geholfen hat und du mehr solcher Tipps lesen möchtest, dann lass es uns gerne in den Kommentaren wissen.

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

4 Kommentare

  • Ach ja, nochwas, laut Shopware-IconSet handelt es sich um das icon:
    "icon--house" und nicht "icon-home".
  • Hey Ilona,

    besten Dank für die Aufmerksamkeit. Habe das angepasst :)

    Viele Grüße
    Ewald
  • Hallo Ewald,
    kleine Änderung große Wirkung!. Top
    Allerdings, ist mir schon öfters aufgefallen, dass beim copy/paste in meinem PhpStorm Errors angezeigt werden. da es sich hierbei nur um den Austausch der i class handelte, habe ich einfach die Änderung händig eingegeben.

    Probierts mal selber aus. Irgendwas stimmt mit dem Codefenster nicht vielleicht an den Umbrüchen.
  • Hey Ilona,

    wir haben das System gewechselt und hier scheint es wohl Probleme mit den Anführungszeichen zu geben. Ich leite das weiter, damit man weiterhin den Code per Copy&Paste nutzen kann.

    Viele Grüße
    Ewald

Was denkst du?

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Social Media Icon mit Link im Footer
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Theme: Eigenes Listing Layout erstellen
© 2017 by 8mylez. Powered by Goltfisch GmbH.