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 11

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... 

{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

11 Kommentare

  • Naja, wer sich seine Navigation abschießen möchte, soll das nur so probieren! Ihr habt dann zwar ein Haus als Icon, aber das wars auch schon. Die restlichen Links im Menü sind dann jedoch verschwunden! Leute, wennn schon denn schon, das geht das Ganze so:

    {*CHANGE HOME BUTTON TO A HOME ICON*}

    {extends file='parent:frontend/index/main-navigation.tpl'}
    {block name='frontend_index_navigation_categories_top_home'}





    {/block}

  • Hey Joschi,

    vielen Dank für deinen Input.

    Wir werden den Blogpost für die neueste Shopware Version nochmal prüfen und Feedback geben!

    Gruß
    Alexander
  • Hallo,

    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
  • Hey Marko,

    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
  • Hello 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
  • Hey Ewald,

    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
  • Hey 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
  • 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz