Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Alexander Wolf 14. November 2017 2

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?

Fehler Nr. 1: Anpassungen im Core Code

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. 

Fehler Nr. 2: Eigene CSS Einbindung

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.

Lösung Nr. 2: Less verwenden

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

Fehler Nr. 3: Theme falsch abgeleitet

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.

Lösung Nr. 3: Nur Anpassungen in das Child-Theme

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!

Fehler Nr. 4: Append / Prepend zum Erweitern benutzen

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}

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

Lösung Nr. 4: $smarty.block.parent stattdessen verwenden

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}

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

Fehler Nr. 5: Mobile-first und Desktop-first mischen

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!

Lösung Nr. 5: Mobile-first verwenden

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.

Weitere Tipps

Statemanager bei jQuery Plugins verwenden

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.

Textbausteine

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.

Theme Konfiguration

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

Lernmaterial

Shopware Dokumentation

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.

8mylez.com

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

Live Stream - 2x pro Woche zeigen wir jeweils 1 Std. wie wir den Hugo Boss Store als Shopware 5 entwickeln.

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.


Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

2 Kommentare

  • Moin,

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

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
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Staging Umgebung – Was ist das und warum brauchst du eine?
Plugin Theme anpassen
Social Media Icon mit Link im Footer
Shopware Logo aus dem Footer entfernen
Wie du jedes Icon in Shopware 5 anpassen kannst
© 2017 by 8mylez. Powered by Goltfisch GmbH.