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 7

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.

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

7 Kommentare

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

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

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
Theme: Eigenes Listing Layout erstellen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Social Media Icon mit Link im Footer
© 2017 by 8mylez. Powered by Goltfisch GmbH.