Wir alle entwickeln Themes. Tolle Themes. Die besten Themes. Irgendwie müssen wir den anderen unsere Themes präsentieren. Natürlich können wir lokal mit MAMP ( Wie geht das? ) einen Shopware 5 Shop aufsetzen und Screenshots machen. Das sollten wir auch tun, damit es was zu sehen gibt im Store. Aber eine Live Demo ist besser. Die Besucher können unser Theme wirklich erleben und anfassen. Alles klar!
Wie kann eure Theme Entwicklung noch professioneller werden? Ein großer Punkt ist: Git. Git ist ein Tool für Versionsverwaltung, d.h. wir verwalten damit verschiedene Versionen unserer Software. In diesem Fall von unseren Themes. Kurzes Beispiel: Wir haben ein super tolles Theme. Arbeiten fleißig an diesem Theme und merken irgendwann, dass wir etwas kaputt gemacht haben. Ja, auch Profis machen mal was kaputt.
Unser erstes Theme ist fertig gestellt. Erinnert ihr euch? In dem Beitrag http://8mylez.com/blog/shopware-5-theme-erstellen/ , ging es um genau dieses Theme. Das Responsive Theme von Shopware gefällt uns sehr, daher wollten wir es einfach darstellen. Nicht zu viel, deswegen nur mit LESS. Wie sieht es denn jetzt aus?
Wochenlange Arbeit, Blut und Schweiß, eure ganze Energie. Alles gegeben für eine einzige Sache: Das erste Theme im Community Store! So viel Energie und Leidenschaft reingepumpt. Wochenlang an eurem Theme gearbeitet. Es wird Zeit sich zu verabschieden. Ganz so dramatisch ist es nicht. Wir sollten uns sogar freuen. Das Theme erblickt sozusagen das erste Mal das Licht der Welt oder in diesem Fall den Community Store. Wie läuft das nun ab? Schwer ist es nicht. Ihr merkt schon: Shopware ist ein geniales und super einfaches System. Es sind nur 4 Schritte: 1. Theme erstellen 2. Vertrag mit Shopware 3. Plugin erstellen 4. Hochladen Lasset die Spiele beginnen.
Ihr seid schlau und guckt euch den Code mit "Element untersuchen" bzw. mit den Chrome Dev Tools an. Das ist auf jeden Fall schon der erste richtige Schritt in einfache Theme Entwicklung. Jetzt habt ihr ein Element gefunden und wollt es anpassen. In den Chrome Developer Tools habt ihr es schnell gefunden.
Ihr habt euer Logo ausgetauscht aber irgendwie ist es für euch einfach zu klein? Kein Problem! Heute zeige ich euch, wie ihr ganz einfach und in nur 5 Schritten die Größe eures Logos anpassen könnt. Vorab schonmal die Schritte, weiter unten mit Erklärung: Eigenes Theme erstellen und Logo einbinden Datei all.less anlegen Datei header.less anlegen Größe verändern Cache leeren und das Theme kompilieren Gar nicht so schwer oder? Los geht's!
UPDATE: Falls ihr Grunt nutzt um eure Themes zu entwicklen, braucht ihr die Einstellung nicht, da dies Grunt für euch übernimmt und die CSS Sourcemap erstellt. Wie ihr das anstellt: Shopware 5 Theme Entwicklung mit Grunt Heute einen kurzen Beitrag und zwar einen Pro Tipp! Für die Pro's unter uns. Problem: Wir wollen ein Theme entwickeln / anpassen. An sich kein Problem. Die Preisfrage nun: Was ist aber immer etwas nervig? Genau! Wenn wir in den Chrome Developer Tools das richtige Element gefunden haben, welches wir anpassen wollen, wissen wir nicht in welcher LESS Datei sich der Code dafür befindet.
Im letzten Beitrag haben wir uns angeschaut wie wir unser Theme mit LESS anpassen können. Wie ihr bereits gemerkt habt, muss LESS jedenfalls kompiliert werden. Es wird einfach in CSS übersetzt. Dieses Kompilieren können wir automatisieren. Wie? Mit Grunt . Was genau das ist und wie es funktioniert, findet ihr auf deren Website. Ich zeige euch nur wie ihr eure Themes damit zum Laufen bekommt um euch etliche Klicks zum Kompilieren zu ersparen.
Den Designer's Guide gibt es hier als eBook (.epub) zum Download. Was würdet ihr verbessern? Schreibt es in die Kommentare und wir bauen es in der nächsten Version ein.
Heute schauen wir uns die Shopware 5 Theme / Template Entwicklung genauer an. Zuerst die Theme Struktur und den Aufbau , danach was wir beachten müssen. Zum Schluss legen wir unser erstes eigenes Theme an und passen es mit LESS nach unseren Wünschen an. Viel Spaß wünscht dir deine Shopware Agentur 8mylez . PS: kennst Du schon unseren Shopware SEO Guide ?
