//Update:

Das Wiener Presswerk hat mein Tutorial aufgefasst und noch ein wenig erweitert.

Den Artikel findet Ihr hier:

Shopware 5 Merkzettel, Warenkorb und Konto in die TopBar verschieben

Vielen Dank für die Erwähnung btw! 😉


 

Heute morgen wurde ich von einem netten Herren aus Hamburg über unseren Online-Chat angeschrieben.

Die Fragestellung war einfach – allerdings weiß ich selbst, wie verloren man sich gerade Anfangs vor dem großen Haufen Informationen, die man im Netz findet, fühlt aber doch nirgends die gewünschte Lösung findet.

Deshalb hab ich mich kurzerhand dazu entschlossen, hierzu ein kleines Tutorial zu schreiben und eine „Shopware Praxisbeispiel-Sektion“ zu öffnen.

Anfrage: Merkzettel, Mein Konto und Warenkorb in die Top-Navigation (neben Service/Hilfe) verschieben.

Wie geht man hier ganz grundsätzlich vor?

Wichtig ist: Immer zuerst ein eigenes Shopware-Theme erstellen! Arbeitet man im Bare/Responsive Theme, sind die Änderungen beim nächsten großen Update futsch.

Hat man sich jetzt ein eigenes Theme erstellt, ist die große Frage: Wo finde ich die Elemente, die ich verschieben/ausblenden/umbauen möchte?
Da hat sicher jeder seine eigene Methode. Mir persönlich fällt es am leichtesten, die entsprechenden Elemente im Firebug zu untersuchen, die Klassennamen/ID’s o.ä. (es sollte natürlich entsprechend eindeutig sein) zu kopieren und die Theme-Dateien (z.b. direkt lokal im Finder) nach der entsprechenden Klasse zu durchsuchen.

Das ganze mal hier direkt an unserem Praxisbeispiel:

Wir suchen die Klasse des „Mein-Konto„, also selektiere ich den Button mit Firebug:

shopware-mein-konto Button

Im Firefox offenbart sich dadurch der Code und die Klasse „entry–account„.

shopware-code-mein-konto-klasse

Die klingt für mich relativ eindeutig! Suchen wir mal danach. Gefunden wird die Klasse in:

suche-nach-klasse-shopware

Und schon wissen wir, wo wir ansetzen müssen.

Wie gesagt, es gibt sicher 50 Möglichkeiten, eine entsprechende Code-Passage in Shopware schnell zu finden. Für mich ist das die effizienteste.

Weiter im Programm!
Was möchten wir tun? Wir möchten diese Buttons aus diesem Bereich zu Text-Links machen und nach oben verschieben.
Also erstellen wir uns eine leere info.tpl in unserem eigenen Theme, in dem wir arbeiten.
Die Datei liegt jetzt unter:

themes > Frontend > DeinTheme > widgets > checkout > info.tpl

In diese Datei fügen wir den Code aus der Originaldatei ( themes > Frontend > BARE > widgets > checkout > info.tpl ) ein:

Alle Elemente haben die Klasse „btn„.
Wenn wir diese Klasse hier nun entfernen, dann haben wir schonmal den ersten Schritt getan und reine Text-Links aus den Elementen gemacht:

mein-konto-shopware-textlinks

Randnotiz: Wenn die Änderungen nicht sofort sichtbar sind, muss der Shopware Cache geleert werden. Manchmal ist es auch nötig, das Theme neu zu kompilieren. Das könnt Ihr ganz einfach, in dem Ihr in der Shopware Theme Verwaltung euer Theme dem Shop noch einmal zuweist.

Das ist aber nur die halbe Miete. Wir möchten diese Links ja oben in die Top-Navigation schieben. Neben Service/Hilfe.

Aktuell liegt dieses Widget in der Datei „shop-navigation.tpl“ im Ordner „frontend/index“ des Bare Themes.
Wir erstellen uns wieder eine eigene Datei, die jetzt unter

themes > Frontend > DeinTheme > frontend > index > shop-navigation.tpl

zu finden ist.

Das Widget, das wir ein Stück weiter oben schon etwas bearbeitet hatten, liegt in folgendem Block:

Um diesen Block jetzt zu leeren, müssen wir in unserer eigenen .tpl Datei einfach das Widget herausnehmen und einen leeren Block erstellen:

WICHTIG:

Die erste Zeile (extends file…..) unserer Datei, definiert, dass alles andere von der ursprünglichen Datei übernommen (geerbt) wird.
Lassen wir diese Zeile weg, werden die restlichen Blöcke, die wir unverändert lassen möchten, nicht übernommen und nur der Inhalt unserer Datei geladen. Das möchten wir aber in diesem Fall nicht, da das Suchfeld usw. ja unberührt bleiben soll und wir nur unseren eigenen Block leeren möchten.

Wir speichern unsere neue Datei und das Ergebnis sieht wie folgt aus:

shopware-head-ohne-merkzettel

Die entsprechenden Links sind verschwunden.

 

Jetzt möchten wir diese Links allerdings noch in die Top Navigation einbinden.

Wie der Name der .tpl schon vermuten lässt, findet sich dieser Bereich in der Datei „topbar-navigation.tpl“ im Ordner „frontend/index“ des Bare Themes.

Wir erstellen also wieder – wie oben beschrieben – eine eigene „topbar-navigation.tpl“ in unserem Theme. Diese liegt nun unter:

themes > Frontend > DeinTheme > frontend > index > topbar-navigation.tpl

Das Menü in dieser Datei liegt in folgendem Block:

Hier können wir jetzt das entsprechende Widget, das wir ganz zu Anfang schon verändert hatten, wieder einbinden. Der Block sieht jetzt so aus:

Auch hier müssen wir wieder von der Ursprünglichen Datei ableiten, da wir die anderen Elemente nicht verändern möchten. Dazu wieder folgende Codezeile an den Anfang:

Das Ergebnis ist jetzt so gut wie fertig:

shopware-header-mit-merkzettel-in-topnavigation

Alles was jetzt noch fehlt, ist ein wenig CSS/Styling. Das überlasse ich allerdings jedem selbst 🙂

 


Shopware-Tipp:

Ich habe bei Amazon ein Buch entdeckt, das ab Dezember in den Handel kommt. Ein absolutes muss für jeden Shopware-Nutzer. Viele hilfreiche Tipps & Tricks, Praxisbeispiele und hilfreiche Informationen für Shopware-Neulinge und Profis:

Shopware: Das Handbuch für Entwickler


Oliver Kasper

About the author - Oliver Kasper

Vor einigen Jahren habe ich mich - nach 10 Jahren bei der Nürnberger Web-Agentur GL Consult design & development GmbH - selbstständig gemacht und betreue seitdem kleine und große Unternehmen im Bereich eCommerce, Marketing und SEO. Besonders das Thema Shopware hat es mir seit langem angetan. 80% meiner täglichen Arbeit dreht sich um eCommerce - insbesondere um Shopware. Benötigen Sie Unterstützung beim Aufbau Ihres Online-Business? Kontaktieren Sie mich!

10 Comments

  • Matthias

    7. Dezember 2015 at 21:05

    Ein toller Artikel!
    Ich habe es gerade im Testsystem umgesetzt und der header wirkt dadurch deutlich „cleaner“.

    Ich habe jetzt allerdings das Problem, dass in der Smartphoneansicht kein Warenkorb mehr angezeigt wird, da die Topbar ausgeblendet ist.

    Gibt es hier einen Tipp, wie der Warenkorb dennoch angezeigt wird?

    Antworten
    • Cindy

      26. Januar 2016 at 14:34

      Das würde mich auch echt interessieren, habe das auch dank des Artikel umgesetzt und steh an dem gleichen Punkt :/

      Antworten
    • Oliver Kasper

      26. Januar 2016 at 14:48

      Wenn der Warenkorb eingeblendet bleiben soll, muss man das Ganze etwas umstrukturieren.
      Entweder, man legt einen weiteren Container an, der den Warenkorb enthält und nur bei Mobile angezeigt wird (mittels media-querys), oder man blendet nicht die ganze top-bar aus, sondern nur die Elemente, die bei Mobile nicht angezeigt werden sollen. Das ließe sich dann komplett über LESS/CSS lösen.

      Antworten
  • Johannes Berr

    3. Februar 2016 at 17:31

    Hallo,

    die Anleitung hat super geklappt. Jetzt würde mich noch interessieren, wie man das Herz entfernt und dafür einfach klassisch Merkzettel hingeschrieben bekommt.

    Vielleicht könnt Ihr das noch etwas erläutern.

    Grüße
    Johannes

    Antworten
  • Shopware 5 Merkzettel, Warenkorb und Konto in die Top-Bar verschieben - Wiener Presswerk

    27. März 2016 at 19:09

    […] man jetzt die o.a. Punkte in die Topbar verschiebt ist bereits sehr gut hier beschrieben (Danke an Oliver Kasper an dieser […]

    Antworten
  • Cholo

    12. August 2016 at 16:11

    Ich habe die Anleitung exakt befolgt. Nun ist die Seite allerdings komplett weiß. Es erscheint folgende Fehlermeldung. Weiß jemand woran es liegen könnte?
    Danke im Voraus!

    [2016-08-12 15:36:16] core.ERROR: exception ‚SmartyCompilerException‘ with message ‚Syntax Error in template "/var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/themes/Frontend/EBlocal/frontend/index/topbar-navigation.tpl" on line 22 "{* Service / Support drop down *}" unmatched {block} {/block} pairs‘ in /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php:657 Stack trace: #0 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_compile_extends.php(88): Smarty_Internal_TemplateCompilerBase->trigger_template_error(‚unmatched {bloc…‘) #1 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(475): Smarty_Internal_Compile_Extends->compile(Array, Object(Smarty_Internal_SmartyTemplateCompiler), Array, NULL, NULL) #2 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(249): Smarty_Internal_TemplateCompilerBase->callTagCompiler(‚extends‘, Array, Array) #3 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templateparser.php(2388): Smarty_Internal_TemplateCompilerBase->compileTag(‚extends‘, Array) #4 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templateparser.php(3101): Smarty_Internal_Templateparser->yy_r36() #5 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templateparser.php(3201): Smarty_Internal_Templateparser->yy_reduce(36) #6 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_smartytemplatecompiler.php(105): Smarty_Internal_Templateparser->doParse(10, ‚\n\t\t\t\t‘) #7 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(192): Smarty_Internal_SmartyTemplateCompiler->doCompile(‚compileTemplate(Object(Enlight_Template_Default)) #9 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(475): Smarty_Internal_Compile_Include->compile(Array, Object(Smarty_Internal_SmartyTemplateCompiler), Array, NULL, NULL) #10 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(249): Smarty_Internal_TemplateCompilerBase->callTagCompiler(‚include‘, Array, Array) #11 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templateparser.php(2388): Smarty_Internal_TemplateCompilerBase->compileTag(‚include‘, Array) #12 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templateparser.php(3101): Smarty_Internal_Templateparser->yy_r36() #13 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templateparser.php(3201): Smarty_Internal_Templateparser->yy_reduce(36) #14 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_smartytemplatecompiler.php(105): Smarty_Internal_Templateparser->doParse(10, ‚\n …‘) #15 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatecompilerbase.php(192): Smarty_Internal_SmartyTemplateCompiler->doCompile(‚{block name=“fr…‘) #16 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_template.php(187): Smarty_Internal_TemplateCompilerBase->compileTemplate(Object(Enlight_Template_Default)) #17 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Smarty/sysplugins/smarty_internal_templatebase.php(155): Smarty_Internal_Template->compileTemplateSource() #18 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/View/Default.php(274): Smarty_Internal_TemplateBase->fetch() #19 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Controller/Plugins/ViewRenderer/Bootstrap.php(216): Enlight_View_Default->render(Object(Enlight_Template_Default)) #20 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Controller/Plugins/ViewRenderer/Bootstrap.php(242): Enlight_Controller_Plugins_ViewRenderer_Bootstrap->renderTemplate(Object(Enlight_Template_Default)) #21 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Controller/Plugins/ViewRenderer/Bootstrap.php(136): Enlight_Controller_Plugins_ViewRenderer_Bootstrap->render() #22 [internal function]: Enlight_Controller_Plugins_ViewRenderer_Bootstrap->onPostDispatch(Object(Enlight_Controller_ActionEventArgs)) #23 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Event/Handler/Default.php(91): call_user_func(Array, Object(Enlight_Controller_ActionEventArgs)) #24 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Event/EventManager.php(214): Enlight_Event_Handler_Default->execute(Object(Enlight_Controller_ActionEventArgs)) #25 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Controller/Action.php(202): Enlight_Event_EventManager->notify(‚Enlight_Control…‘, Object(Enlight_Controller_ActionEventArgs)) #26 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Controller/Dispatcher/Default.php(523): Enlight_Controller_Action->dispatch(‚genericErrorAct…‘) #27 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Library/Enlight/Controller/Front.php(226): Enlight_Controller_Dispatcher_Default->dispatch(Object(Enlight_Controller_Request_RequestHttp), Object(Enlight_Controller_Response_ResponseHttp)) #28 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Shopware/Kernel.php(176): Enlight_Controller_Front->dispatch() #29 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/vendor/symfony/http-kernel/HttpCache/HttpCache.php(487): Shopware\Kernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #30 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Shopware/Components/HttpCache/AppCache.php(255): Symfony\Component\HttpKernel\HttpCache\HttpCache->forward(Object(Symfony\Component\HttpFoundation\Request), true, NULL) #31 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/vendor/symfony/http-kernel/HttpCache/HttpCache.php(444): Shopware\Components\HttpCache\AppCache->forward(Object(Symfony\Component\HttpFoundation\Request), true) #32 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/vendor/symfony/http-kernel/HttpCache/HttpCache.php(344): Symfony\Component\HttpKernel\HttpCache\HttpCache->fetch(Object(Symfony\Component\HttpFoundation\Request), true) #33 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Shopware/Components/HttpCache/AppCache.php(178): Symfony\Component\HttpKernel\HttpCache\HttpCache->lookup(Object(Symfony\Component\HttpFoundation\Request), true) #34 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/vendor/symfony/http-kernel/HttpCache/HttpCache.php(210): Shopware\Components\HttpCache\AppCache->lookup(Object(Symfony\Component\HttpFoundation\Request), true) #35 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/engine/Shopware/Components/HttpCache/AppCache.php(114): Symfony\Component\HttpKernel\HttpCache\HttpCache->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #36 /var/www/vhosts/web13.s58-fal-r01.gn-s.net/httpdocs/shop/shopware.php(101): Shopware\Components\HttpCache\AppCache->handle(Object(Symfony\Component\HttpFoundation\Request)) #37 {main} [] {„uid“:“55e129c“}

    Antworten
    • Oliver Kasper

      2. September 2016 at 11:23

      Die Fehlermeldung besagt „unmatched {block} {/block} pairs“
      Das heißt, das irgendwo im Shopware Template ein block nicht geschlossen ist 😉

      Antworten
  • Edwin

    17. September 2016 at 20:14

    Hallo Leute ich danke für diese super Anleitung hat alles perfekt funktioniert jedoch habe ich auch probiert die Anzeige auf die mobilen Geräte zu bringen jedoch ohne Erfolg.
    Warenkorb,Merkzettel,Mein Konto sobald ich diese Anpassung im Header.less eintrage verändert sich nichts.
    Ich bitte um eure Hilfe da ich schon am Verzweifeln bin

    Mit freundlichen Grüßen

    Antworten
  • Jörg

    14. August 2017 at 4:17

    Hallo,

    eine Frage, ich würde den Warenkorb gerne neben dem Suchfeld belassen. Wie mach ich das am Besten. Hätte eine neue Widget tpl angelegt und den Code für den korb hineinkopiert. Nur kommt dann eine leere Seite.

    Danke für eine Antwort,

    Antworten
  • Ralf

    25. November 2017 at 21:55

    Hallo,
    danke für die Super Anleitung.
    Ich bekomm aber die css nicht angepasst.
    Ich habe die Buttons rausgenommen das man nur Text sieht.
    Jetzt überlagert sich der Anmelden Button mit dem dem Text Übersicht.
    Kann mir jemand helfen?
    Danke

    Antworten
Shopware 5 Einkaufswelten: HTML-Elemente mit automatischer Höhe Hilfreiche Links und Empfehlungen für Shopware