Shopware 5 Merkzettel, Warenkorb und Konto in die Top-Bar verschieben

Es stellte sich bei einem Projekt die Aufgabe, den Merkzettel, Warenkorb und Konto in die Topbar zu verschieben.

Wie so oft ist das keine große Kunst, wenn man weiß, wie es geht ;-). Leider ist die Dokumentation von Shopware noch … sagen wir „im Aufbau“ und für den Einsteiger ist die Struktur nicht so schnell zu durchschauen. Es mag manches in Version 4 einfacher umzusetzen gewesen sein, da man schneller mit CSS zum Ziel kommen konnte. Seit Version 5 und der konsequenten Umstellung auf „Responsive“ und Less muss man unter Umständen viel suchen.

Grundsätzlich:

Bevor wir irgendetwas im Template (Theme) umbauen legen wir dazu ein neues Template an, in dem alle bearbeiteten Dateien laden, um nicht beim nächsten Update überschrieben zu werden. Das mitgelieferte Response Template bietet bereits dafür einen hervorragenden Ausgangspunkt. Wichtig hierbei ist, dass Ihr als Abhängigkeit das Responsive Template auswählt, nicht das Bare Template.

Bare Template ist das Master Template, besitzt allerdings kein CSS Styling & Responsive Fähigkeit.

Das Bare Template ist in Shopware das neue Master Template, zu vergleichen mit dem default Template aus Shopware 4. Das Bare Template enthält alle nötigen Template Dateien, allerdings kein CSS Styling. Es ist also ein komplettes Blanko Template.

Das Responsive Template dagegen hat alle nötigen CSS bzw. LESS als auch Javascript Dateien, welche nötig sind um das Template darzustellen, als auch die Responsive Fähigkeit zu gewährleisten. Das ist hier auch der Grund, warum das Responsive Template keinerlei Template Dateien hat. Es hat lediglich die nötigen CSS & Javascript Dateien um das Bare Template zu gestalten.

Möchten wir nun unser eigenes Responsive Template erstellen, müssen wir hier entsprechend auch vom Responsive Template ableiten und nicht vom Bare Template.

Wenn wir unser wirklich komplett eigenes Template erstellen ohne jegliche Vorgaben und Styling, dann können wir das Bare Template auswählen. Tutorials zum Anlegen eines eigenen Templates können wir hier springen – das gibt es massenweise im Netz.

Wie man jetzt die o.a. Punkte in die Topbar verschiebt ist bereits sehr gut hier beschrieben (Danke an Oliver Kasper an dieser Stelle)

Allerdings ist das nicht die ganze Wahrheit, denn auf mobiles ist die Topbar nicht sichtbar und damit auch nicht der Warenkorb etc. in unserem Fall.

Die notwendige Ergänzung sieht wie folgt aus:

Im Gegensatz zum o.a. Beitrag die shop-navigation.tpl unangetastet lassen

dafür in der header.less folgenden Code einfügen:

@media screen and (min-width: @tabletViewportWidth) { // View für Tablets und Desktops

.header-main {
    .navigation--list {
            display: none;
            }           
        }
    }
}    

Fertig!

Viel Spaß beim Coden ;-)