Mein erster onlineshop
mit shopware 5
Shopware 5 Theme Entwicklung macht Spaß. Nicht nur das! Es verschönert Deinen Shopware 5 Shop. Oder Du verdienst ein bisschen Taschengeld Nebenher im Shopware Community Store bzw. baust Dir ein Shopware 5 Theme Imperium auf.
So wie im echten Leben macht es auf Dauer nur wirklich Spaß, wenn Du es richtig machst.
Nichts ist schlimmer als ein falsch entwickeltes Shopware 5 Theme, zumindest im Shopware 5 Universum.
Die Shopware AG hat sich sehr viel Mühe mit dem Responsive Theme geben und stellt uns einige coole Tools bereit um dieses Theme ganz nach unseren Wünschen anzupassen!
Im Idealfall benutzt Du diese auch!
Wir haben schon einige kaputte Themes retten müssen. Dabei tun uns nicht nur die Shopbetreiber leid. Sondern auch die Entwickler selbst.
Denn: Shopware 5 Theme Entwicklung kann wirklich eine tolle Erfahrung sein.
Was sind die größten Anfängerfehler und wie kannst du sie vermeiden?
Leider schon zu oft gesehen :(
Du möchtest etwas an deinem Shop verändern, z. B. die Höhe des Headers. Dazu öffnest Du die passende Less Datei im Responsive Theme und veränderst den Wert.
Beim nächsten Update ist diese Anpassung weg und der Header hat die ursprüngliche Höhe. Du musst die Änderung also erneut durchführen.
Die erste und wichtigste Regel: Niemals Anpassungen im Core Code machen!
Das ist absolut schlechter Programmierstil! Tu das bitte nicht!
Lösung Nr. 1: Plugin oder Theme entwickeln
Für jede Anpassung, gibt es eine Möglichkeit, dies über ein Plugin, ein Theme oder eigenen PHP Code durchzuführen. Daher niemals und unter keinen Umständen Anpassungen im Core Code machen.
Die Lösung ist simpel: Entwickle für die Anpassung ein Plugin oder ein eigenes Theme.
Du hast Dich also entschieden ein eigenes Theme zu erstellen und legst dieses auch an. (Wie das geht findest Du hier: Was Du über die Shopware 5 Theme Struktur wissen musst und wie Du ein eigenes Template erstellst oder als Video: Wie Du dein erstes Shopware 5 Theme anlegst und anpasst – Teil 1)
Wie Du weißt, setzt Shopware auf Less und empfiehlt auch Less statt CSS zu verwenden. Less hat einige coole Features die Du auch benutzen solltest. Durch den Less Compiler, werden die Dateien zu CSS übersetzt und entsprechend komprimiert.
Du findet Less also doof und entscheidest Dich, trotz Shopware's Empfehlung dagegen.
An sich ist das natürlich kein Fehler. Jedoch bindest Du diese Anpassungen selbst über den HTML Link Tag ein.
<link rel="stylesheet" type="text/css" href="dein/dateipfad/style.css">So landen die Anpassungen zwar in Deinem Theme. Leider ist dies nicht der richtige und sinnvolle Weg.
Das Problem hierbei ist, dass Shopware für das Kompilieren des Less Codes noch einen Komprimierungsprozess eingebaut hat. Diesen überspringst Du und arbeitest an den Optimierungen von Shopware vorbei.
Ein anderer Fehler ist, wenn die Anpassungen an der komprimierten CSS Datei gemacht werden. Die Datei ist nur schwer zu lesen und wird bei jedem Kompilierungsvorgang überschrieben.
Arbeite mit Less: Video: Wie du dein erstes Shopware 5 Theme anlegst und mit LESS anpasst – Teil 2
Meistens mag man etwas nicht, weil man es nicht gut kann oder es noch nicht verstanden hat. Nimm Dir etwas Zeit und schau dir ein paar Less Einführungen an.
Über Google findest Du tonnenweise Tutorials!
Ich würde mich sehr über Feedback in den Kommentaren bzgl. der Verwendung von Less freuen :)
Mit Less vermeidest Du auch das Arbeiten an der komprimierten Datei. Dein Code wird immer schön komprimiert und Du kannst den ganzen coolen Kram von Variablen bis hin Funktionen verwenden.
Vergiss nicht das Theme zu kompilieren, damit der Less Code in schönen komprimierten CSS Code umgewandelt wird.
Probier es einfach mal aus!
Nachdem Du jetzt weißt, dass Du ein Theme erstellen und dabei Less benutzt sollst, machst Du Dich an dein erstes Theme.
Hier lauert leider der dritte Fehler!
Falsch abgeleitet.
Abgeleitet bedeutet in diesem Fall, dass Du ein Child Theme zu einem Parent Theme erstellst. Du hast praktisch ein Haupt-Theme und erstellst ein eigenes Theme und veränderst nur wenige Dateien. Der Rest wird automatisch vom Haupt-Theme zur Verfügung gestellt und geladen.
Du willst die Höhe des Headers im Less Code anpassen. Dazu kopierst Du dir einfach den gesamten Less Ordner oder die gesamte header.less Datei und führst deine Anpassungen durch.
Das Problem ist, dass Du Code in der header.less Datei hast und fast den gesamten Code mit den selben Anpassungen überschreibst.
Das ist nicht richtig und auch nicht der Sinn der Theme Vererbung bei Shopware.
Die Lösung ist vereinfacht gesagt: Richtig Ableiten!
Wichtig ist hierbei, dass Du verstehst, wie das Ganze aufgebaut ist.
Da die Dateien des Haupt-Themes z. B. das Reponsive Theme und das Bare Theme bereits zur Verfügung stehen, solltest Du nicht alle Dateien in dein Theme rüberkopieren und anpassen.
Du musst wirklich nur die Anpassungen in Deinem Theme schreiben. Der Rest wird dann vom Haupt-Theme bereit gestellt.
In deinem Beispiel suchst Du dir also die passenden Klassen raus und veränderst nur die Höhe des Header. Alles andere bleibt unverändert und hat demnach nichts in deinem Theme zu tun.
Das selbe gilt für die Anpassungen bei dem Smarty Blocks. Wenn Du mit der extends Funktion den Code eines templates erbst, musst Du nur die Blöcke die Du auch veränderst aufführen und nicht alles kopieren.
Sonst ersetzt du wieder Gleiches mit Gleichem!
Früher stand in den Frontend Guides von Shopware, dass zum Erweitern eines Block append oder prepend verwendet werden sollte.
Shopware arbeitet mit der Template Engine Smarty. Smarty arbeitet mit Blöcken. Diese Blöcke können überschrieben oder erweitert werden.
Ein Beispiel zeigt wie ein Block erweitert werden würde:
{extends file="parent:frontend/index/index.tpl"}
{block name='frontend_index_navigation' append}
<h1>Hallo!</h1>
{/block}
In dem Beispiel wird ein großes Hallo! an die Navigation gehängt.
Genau so sollen die Blöcke nicht mehr erweitert werden, da es zu Problemen kommen kann in Verbindung mit Plugins, welche die selben Blöcke erweitern.
Die Lösung ist nicht komplizierter und gut umsetzbar. Statt die Blöcke mit append oder prepend zu erweitern, überschreiben wir die Blöcke komplett und benutzen $smarty.block.parent um den Inhalt des Eltern Blocks einzubinden.
Einfach gesagt: Das was im originalen Block (von dem wir ableiten) steht, wird in unseren Block kopiert.
Unser Beispiel würde dann so mit der neuen Methode aussehen:
{extends file="parent:frontend/index/index.tpl"}
{block name='frontend_index_navigation'}
{$smarty.block.parent}
<h1>Hallo!</h1>
{/block}
Das Ergebnis ist das selbe wie oben, nur ohne mögliche Probleme in der Zukunft. Mittlerweile empfiehlt Shopware selbst in den Frontend Guides, dass die block.parent-Methode verwendet werden sollte.
Das Responsive Theme von Shopware 5 wurde mit dem Mobile-first Ansatz entwickelt.
Mobile-first bedeutet, dass der Code für Smartphones geschrieben wird und über sogenannte Media Queries für die höheren Auflösungen überschrieben wird.
Desktop-first ist das Gegenteil von Mobile-first. Die Anpassungen für die kleineren Viewports werden entsprechend überschrieben.
Leider habe ich diesen Fehler von relativ häufig gesehen. Die beiden Ansätze werden vermischt, d. h. in einer Datei (oder Code Block) prüfe ich ob der Viewport eine Mindestgröße (Mobile-first) erreicht hat. Und in einer anderen Datei (oder einem anderen Code Block) prüfe ich, ob der Viewport eine Maximalgröße (Desktop-first) hat.
Der Code wird funktionieren. Das gewünschte Ergebnis kann damit auch erreicht werden. Jedoch ist es sehr unübersichtlich und wird spätestens wenn ein neuer Entwickler mitarbeiten wird zu Problemen führen.
Davon mal abgesehen ist es einfach nicht richtig.
Tu das Richtige!
Die Frage ist: Was ist das Richtige?
Nicht mischen. Da Shopware sich beim Responsive Theme für den Mobile-first Ansatz entschieden hat, solltest Du dich daran halten.
Also verwendet nicht Desktop-first
@media screen and(max-width: @desktopViewportWidth) {
//...
}
sondern immer Mobile-first
@media screen and(min-width: @desktopViewportWidth) {
//...
}
Der Unterschied liegt beim max-width und min-width.
Im Responsive Theme werden die einzelnen jQuery Plugins über den Statemanager verwaltet, d. h. einzelne Plugins können für verschiedene Viewports aktiviert bzw. deaktiviert werden.
Wenn Du ein jQuery Plugin baust, solltest Du diesen Statemanager verwenden und Deine jQuery Plugins darüber steuern.
So hast Du eine zentrale Stelle durch die alle Plugins integriert werden. Das erleichtert die Wartung sehr!
Damit lässt sich auch steuern, welche Funktionalität für welchen Viewport gelten soll.
Ein weiteres elementares Konzept sind die Textbausteine bei Shopware. Es ist natürlich immer einfacher irgendwo einen Text hardcodiert zu hinterlassen.
Probleme tauchen aber auf, sobald es an Subshops oder Sprachshops geht. Genau dafür gibt es die Textbausteine. Diese sind einfach aufgebaut und lassen sich auch gut für Icons oder Texte, die im Backend verändert werden sollen, verwenden.
Ähnlich wie bei den Textbausteinen, möchtest Du gewisse Teile Deines Themes im Backend anpassbar coden.
Dafür kannst Du wunderbar die Konfiguration im Theme selbst nutzen. Wenn Du z. B. Social Media Icons verlinken möchtest, macht es an der Stelle Sinn dies in die Theme Konfiguration auszulagern, da Du dort bequem Änderungen vornehmen kannst, ohne Programmierkenntnisse.
Die Dokumentation von Shopware ist gut! Am besten arbeitest Du alles durch. Dann hast Du nicht nur einen guten Überblick zum Nachschlagen, sondern auch die wichtigsten Konzepte bei Shopware gesehen.
Frontend Guide - Für alles was die Entwicklung im Frontend bzw. Deinem Theme angeht
Developer Guide - Wenn es an Plugins geht, solltest Du hier vorbei schauen
Udemy Theme Kurs - Ganz frisch rausgekommen und ein guter Einstieg die noch nicht viel mit Shopware gemacht haben.
Wir sind als Shopware Agentur natürlich auch fleißig am bloggen, Live streamen, Videos aufnehmen, eBooks schreiben und und und. Ich möchte an dieser Stelle noch nicht alles verraten, aber alle aktuellen Projekte sind:
Blog - Hier gibt es einige Tutorials und wichtige Infos für und über Shopware.
Videos - Neben den Live Streams gibt es auch andere Videos die den Blog prima ergänzen.
eBooks - Wenn Du noch gar nichts mit Shopware gemacht hast, ist unser eBook "Mein erster Onlineshop mit Shopware 5" perfekt!
Community - Solltest Du beim Live Stream nicht dabei sein können, kannst Du Dir das Archiv gerne in unserem Shopware Support Forum anschauen.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Ü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
Letzteres macht mir nach wie vor als Entwickler definitiv am wenigsten Spaß. Schon alleine, weil es von meinem regulären Workflow Gulp, SASS, etc. komplett abweicht. Ich kann dem "Grid system" so überhaupt nichts abgewinnen, ist ja nicht so, dass sich die Grid Systeme von Bootstrap oder Foundation schon lange, vielfach bewährt hätten und einfach sehr gut funktionieren, warum nicht mal ein völliges Randgruppensystem nutzen, welches keine Sau kennt -_-
Die Einkaufswelten sind als Konzept gut, die Umsetzung ist aber allenfalls mittelmäßig - ich hoffe da wird für Shopware 6 an einem anständigen Konzept gearbeitet, was für mich heißen würde: CSS Grid mit Fallback (klar, wärend der Shopware 5 Entwicklung war die Verbreitung noch ungenügend - keine Frage). Generell wird so viel mit absoluter Positionierung und Javascript Frickelei gearbeitet, ich kann es einfach nicht nachvollziehen.
Vom Backend fange ich erst garnicht an, eines der schlimmsten mir bekannten Backends. Man sieht die Ambitionen, aber gut gemeint ist eben noch lange nicht gut gemacht. Da hakt es an allen Ecken und Enden.
Dann noch diese wundervolle Eigenschaft, die sich Shopware mit Wordpress teilt: Für jeden Mist braucht es ein Plugin und die sind oft von so besch...eidender Qualität, dass es einem die Fußnägel hochklappt.
Die Ausrichtung von Shop und Responsive Theme sind halt ganz klar Enduser, das ist auch okay, spaß macht mir das als Entwickler aber nicht.
Wir setzen nun seit Kurzem immerhin das Conexco Bootstrap Template als Basis ein, das ist schon mal ein Fortschritt. Leider wird auch hier aus unerklärlichen Gründen der LESS Compiler genutzt, bei einem Template was sich doch ganz klar an Entwickler richtet. Leuchtet mir einfach nicht ein. Man ändert ja ständig die Shopfarben, Fonts, etc. da muss man das unbedingt als Einstellung im Backend haben. Genau. Nein, tut man nämlich in 95% der Fälle nicht.
danke für Deinen ausführlichen Kommentar. Sicherlich auch nachvollziehbar und ich denke es wurden viele solcher Erkenntnisse in der neuen Version berücksichtigt :-) dementsprechend: brace yourselves sw6 is coming :-P
Liebe Grüße
Marc
In Lösung #4 fehlt meiner Meinung nach ein " (und ein .tpl), es müsste {extends file="parent:frontend/index/index.tpl"} heißen.
Viele Grüße,
Lars
vielen Dank! Vollkommen richtig. Habe ich korrigiert :)
Gruß
Alexander
Gruß
Daniel
vielen Dank für deinen Kommentar!
Wenn ein komplett eigenes Theme erstellt wird, ist es tatsächlich nicht wichtig, welcher Ansatz verwendet wird bzw. ich würde es unter "Geschmackssache" verbuchen. Jedoch sollte aus meiner Sicht "mobile first" verwendet werden, wenn vom Responsive Theme abgeleitet wird, damit dies nicht vermischt wird und die Wartung nicht unnötig komplex macht.
Die Verwendung von Grunt ist hierbei nicht zwingend notwendig. Im Prinzip ist aber ein Gruntfile vorhanden. Aber Gulp kann da auch einfach verwendet werden, wenn der Entwickler sich entsprechend auskennt.
Bei Less würde ich wie oben wieder raten Less zu verwenden, sofern es sich um eine Ableitung des Responsive Themes handelt. Es ging bei dem Fehler eher darum, dass ein CSS Preprocessor verwendet werden sollte.
Gruß
Alexander
vielen Dank für den tollen Beitrag!
Nun bin ich schlauer, war mir immer unsicher, ob ich nun mit append und prepend oder eben mit {$smarty.block.parent} arbeiten soll.
Gruß Michel
das freut mich wirklich sehr :)
Manchmal ist es wirklich nicht ganz einfach herauszufinden was schon "alt" ist und was "neu". Wenn du dir unsicher bist, kannst du gerne einen Kommentar hinterlassen!
Gruß
Alexander
Was denkst du?