Wer die optische Erscheinung seines Shopware-Shops eine eigene Handschrift geben möchte, kommt nicht um ein eigenes Template oder Theme herum. Im heutigen Blogpost geht es um die Struktur, die Shopware für seine Themes nutzt und warum wir in unseren Projekten nicht von dieser abweichen.
1. Wo findet man Frontend Themes auf dem Server?
Im Administrationspanel von Shopware kann man über den Theme Manager (Einstellungen -> Theme Manager) auf seine Themes zugreifen. Hier kann, zu einem gewissen Grad, auch Einfluss auf die Erscheinung des Themes genommen werden. So können bspw. das Logo getauscht und die Grundfarben des Shopware Frontends angepasst werden.
Wer jedoch über diese Möglichkeiten hinaus gehen möchte, der muss sich auf seinem Server durch den Wald von verschiedenen Dateien und Ordnern wühlen.
Um auf Frontend-Themes zugreifen zu können, muss hierfür in den Pfad „themes/Frontend“ navigiert werden. In jedem Verzeichnis liegen die Dateien zu je einem Theme.
Bsp.: Im Ordner Bare („themes/Frontend/Bare“) liegen alle Dateien des Bare-Themes.
2. Was befindet sich im Theme-Root?
Im Root-Verzeichnis des Themes sind im Allgemeinen erstmal zwei Dateien interessant. Dies sind zum einen das Vorschaubild für den Theme-Manager (preview.png) und die Theme.php, welche für grundlegende Informationen des Themes genutzt wird.
3. Wo finden sich Styling-Definitionen?
Shopware nutzt LESS (http://lesscss.org), einen CSS-Preprozessor. Dies hindert niemanden daran CSS zu nutzen, bietet aber einige Vorteile auf die hier nicht eingegangen werden sollen.
Die entsprechende Datenstruktur findet sich im Verzeichnis „themes/Frontend/THEMENAME/frontend/_public/src/less“. Die Zusammenführung der einzelnen Less-Files erfolgt über eine Referenzierung in all.less und weiteren Dateien.
Die eigentlichen Quelldateien werden aufgeteilt in die Ordner „_components“, „_mixins“,“_ modules“ und „_variables“. Auf nicht benötigte Ordner kann aus Gründen der Übersicht verzichtet werden.
Im „_components“ Ordner werden Definitionen für wiederkehrende Komponenten definiert. Dies können zum Beispiel Buttons oder Formularfelder sein.
Der Ordner „_mixins“ beinhaltet sogenannte Mixins. Dies sind kleine LESS-Snippets, welche zu Hilfsfunktionen zusammengefasst werden und das Leben für den Entwickler vereinfachen sollen.
„_modules“: Modulare Einheiten wie Header, Suche etc, welche durchaus von MarkUp-Seite auch Komponenten beinhalten können.
„_variables“: Variablen die über die Einstellungen im Backend hinaus gehen.
4. Wo befinden sich JS-Files
Im Responsive Theme arbeitet Shopware mit JQuery. Die entsprechenden Quelldateien werden in „themes/Frontend/THEMENAME/frontend/_public/js“ abgelegt.
Generell ist hier keine weitere Ordner-Struktur vorgesehen, allerdings kann es je nach Komplexität des Themes durchaus Sinn machen, diese zu erweitern. Die Entscheidung, ob es für ein Projekt Übersichtlichkeit bring, obliegt dem entsprechenden Entwickler. Wir als Shopware Agentur setzen zwar teils hochkomplexe und extrem individuelle Themes um, machen von dieser Möglichkeit auf Grund der schon sehr durchdachten Grundstruktur nur selten Gebrauch.
5. Wo finden sich Bilder
Bilder, die sich nicht ändern werden, wie zum Beispiel ein Stock-Image, das eine freundliche Support-Agentin zeigt, können im Theme abgelegt werden. Shopware bietet in seinen Themes hierfür das Verzeichnis „themes/Frontend/THEMENAME/frontend/_public/img“.
Hier abgelegte Bilder lassen sich nur über den Pfad zum Ablageort referenzieren. Dies bedeutet auch, dass diese nicht durch den Medien-Manager gepflegt werden können.
6. Wo finden sich Template-Files
In „themes/Frontend/THEMENAME/frontend“ findet sich neben dem „_public“ Ordner auch die Ordnerstruktur für die Templates. Diese sind dabei nach logischen Einheiten aufgeteilt. So befinden sich im Ordner „Detail“ zum Beispiel die Dateien, welche für die Produktdetailseite relevant sind.
7. Warum wir als Agentur uns an den Shopware Standard halten
Die Shopware AG selbst empfiehlt sich an dieser Struktur zu orientieren und schult entsprechend in Ihren Fortbildungen. Entsprechend kennen zertifizierte Entwickler bereits den Aufbau eines Themes. Jede Abweichung davon erfordert, dass sich der Entwickler mit dieser auseinandersetzt und sie verinnerlicht. In jedem Entwicklungsprozess ist es jedoch effizienter, wenn bekannte Strukturen genutzt und Standards eingehalten werden. So entstehen keine Konzeptions- und Einarbeitungsphase für diesen Bereich und es fällt auch neu hinzukommenden Entwicklern leicht, sich zurecht zu finden. Auch bei der Übergabe an andere Shopware Agenturen verringert sich auf diese Weise die Einarbeitungszeit in das Theme.
Weiterhin stellen wir auf diese Weise sicher, dass Drittanbietererweiterungen wie Shopware Plugins mit unseren Entwicklungen kompatibel sind.
