Wie Du in der Shopware Navigation den Home Button als Icon darstellst
Ich zeige Dir heute, wie Du in der Navigation von Shopware den Home Button mit einem Icon ersetzt.
Vorher:
Nachher:
-> 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/frontendDie 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...
{block name='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 && $Controller == 'index'} active{/if}" href="{url controller='index'}" title="{s name='Index LinkHome' namespace="frontend/index/categories_top"}{/s}" itemprop="url">
<i class="icon--house"></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.
Du möchtest wissen, wie Du die Shopware Navigation zentrierst? Schau doch mal hier vorbei: Shopware Navigation zentrieren
Wenn Du Dich für ein komplett neues Design Deiner Navigation interessiert, könnte das vielleicht etwas für Dich sein: Shopware Navigation anpassen
Sicher Dir die besten Shopware 6 Tipps & Tricks
Neueste Beiträge
12 Kommentare
Shopware 5 ist zwar nicht mehr aktuell. Aber manche nutzen es noch.
Es wäre schön, wenn Du mal die ganzen Fehler die im Anfangsscript drin sind korrigieren und dann den korrekten und fertigen Script schreiben würdest.
LG
Ralf
{*CHANGE HOME BUTTON TO A HOME ICON*}
{extends file='parent:frontend/index/main-navigation.tpl'}
{block name='frontend_index_navigation_categories_top_home'}
{/block}
vielen Dank für deinen Input.
Wir werden den Blogpost für die neueste Shopware Version nochmal prüfen und Feedback geben!
Gruß
Alexander
gibt es eine Möglichkeit vor die Kategorienamen in den Reitern ein Logo einzufügen?
Ich habe 5 Kategoriereiter welche jedes ein eigenes Logo bekommen sollen vor dem Kategorienamen. Mir fehlt etwas der Ansatz...
Im Moment sind diese Reiter noch nicht aktiv, bzw auf deaktiviert gesetzt
du könntest bei den Kategorien ein neues Freitextfeld erstellen mit einem Logo als Inhalt und und in der Template Datei vor dem Namen der Kategorie anzeigen lassen.
Ich hoffe das hilft dir deine Idee umzusetzen :)
Viele Grüße
Ewald
Sorry for writing in English but although I understand German pretty good I can express myself better in English.
First of all thanks for the great tutorials, I am making my own Shopware shop using tutorials from all over the place with zero developer background, but it's going to be pretty good, and it's a great feeling to be able to build your own stuff with a little help from here and there. The internet is a nice place :)
This tutorial doesn't seem to work for me. I create the main-navigation.tpl and I copy the codes in it but when I compile the theme, empty the cache and want to go to the website I get a totally blank page all the time. If I delete the main-navigation.tpl then everything works as before, but without the house icon of course... :/
Oh and in the last code the row " " should be " " guessing from the comments :) I corrected it in my *.tpl but I still get a blank page.
Could you check if you missed something or somewhere there is an other error in the code? Thank you. And keep up the good work.
Regards,
Balazs
Never mind, I have solved the issue by going through the steps you have written down, I have found the code segment in the bare template main-navigation.tpl and copied it from there added the extends file to the beginning and the i class instead of the span and it's working like a charm.
The problem here on this site in the code is that there are some unnecessary spaces which mess up the code and also the "use" is missing from the "house" in the i class row.
Just thought I would share so that you can fix the issue here on the site.
Thanks again for the nice tutorials.
Regards,
Balazs
first thanks for the nice words. It's great to see that we're also getting known in more countries over the world than just germany :)
You're right, it seems to be a problem with our new cms. I told the developer to check this code blocks. I'm going to try out some new styles to publish the code better.
Thanks for your input!
Best regards,
Ewald
"icon--house" und nicht "icon-home".
besten Dank für die Aufmerksamkeit. Habe das angepasst :)
Viele Grüße
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.
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?