Welche Tools für die Entwicklung eines Shopware Themes?

Welche Tools für die Entwicklung eines Shopware Themes?

Alexander Wolf 10. Oktober 2017 8

Ein eigenes Theme zu Entwickeln ist nicht immer einfach. Die richtigen Tools unterstützen Dich dabei und vereinfachen das Ganze etwas.

Allerdings gibt es sehr viele Tools, die benutzt werden können und auch sicherlich von verschiedenen Entwicklern benutzt werden.

Da wir täglich an eigenen Themes sowie Themes unserer Kunden arbeiten, möchte ich Dir unsere verwendeten Tools vorstellen. Vielleicht ist auch ein neues hilfreiches Tool für Dich dabei.

Dabei stellen wir nicht nur unseren Code Editor vor, sondern Tools für den gesamten Prozess von dem grafischen Entwurf bis zum Upload in den Live Shop.

Unsere verwendeten Tools:

  • Adobe Photoshop CC 2017
  • Docker
  • Atom
  • Google Chrome & Chrome Developer Tools
  • Git
  • Sourcetree
  • GitLab.com
  • Transmit
  • Hyper

Adobe Photoshop CC 2017

Adobe Photoshop CC 2017 Logo

Link zum Tool

Unsere Grafiker arbeiten ausschließlich mit Photoshop, daher ist es wichtig, dass ich als Entwickler das Programm ebenso installiert habe. 

Als Entwickler muss ich nämlich nicht nur den Entwurf genau einsehen können, sondern auch die einzelnen Komponenten abmessen, ausblenden, einblenden usw. können müssen um das Layout / Design auch verstehen zu können.

Dabei arbeiten unserer Grafiker pixelgenau, sodass ich mich als Entwickler beim Schreiben des Frontend Codes auf die genauen Angaben in dem Entwurf konzentrieren kann. Unsere Grafiker haben bereits Erfahrung mit Shopware und wissen daher auch beim Designen worauf sie zu achten haben.

Neben den exakten Größen der einzelnen Elemente, finde ich noch Farben, Schattierungen, Hover Effekte und andere grafische Finessen in der PSD (Photoshop Dokument).

Auch zum Ausschneiden verschiedenster Grafiken eignet sich Photoshop sehr, da ich mit wenigen Klicks die isolierte Ebene exportieren, sauber zuschneiden und in meinem Theme verwenden kann.

Docker

Docker Logo

Link zum Tool

Früher war es XAMPP oder MAMP. Heutzutage arbeiten wir ausschließlich mit Docker. Docker ist eine Containersoftware, mit der sich virtuelle Maschinen ganz einfach erstellen und verwalten lassen. So erstellen wir pro Plugin bzw. Theme einen eigenen Container und haben eine isolierte Umgebung mit den nötigen Tools um Shopware zum Laufen zu bekommen. 

Wir benutzen eine fertige Konfiguration von DNH Soft (einer Shopware Agentur aus Bulgarien)

Die Plugins bzw. Themes beeinflussen sich nicht gegenseitig. So ist sichergestellt, dass die entstehenden Probleme keine Seiteneffekte anderer Plugins sind oder noch anderer Datenmüll irgendwo in den Tiefen der Shopware Installation rumlungert.

Eine neue Entwicklungsumgebung ist innerhalb weniger Minuten eingerichtet, installiert und bereit bearbeitet zu werden.

Bei mir funktioniert alles ohne Probleme!

Solche Ausreden einiger Arbeitskollegen gehören mit Docker der Vergangenheit an 😄

Sogar mehrere Shopware Versionen lassen sich damit problemlos betreiben, damit das Plugin auch in älteren Versionen ordentlich getestet werden kann.

Mit Docker lässt sich natürlich noch sehr viel mehr machen. Wir arbeiten an unseren Prozessen und versuchen in Zukunft Docker optimal zu nutzen und alle vorteilhaften Features zu integrieren.

Diese Scripte helfen Dir dabei Shopware lokal mit Docker zu verwenden

Atom

Atom Logo

Link zum Tool

Mein persönlicher Lieblingseditor! Der Codeeditor ist kostenlos, open source, leichtgewichtig und erweiterbar. Bevor Du Dir hier von mir was einreden lässt, schlage ich vor Du testest das Ganze selbst und gibst Feedback in den Kommentaren!

Der Editor basiert auf Webtechnologien und ist mit HTML5, CSS3 und JS entwickelt worden.

Mit Atom arbeite in an allen möglichen Codedateien: .php, .tpl, .less und .js. So kann ich alle Shopware Code Arbeiten mit einem Editor erledigen.

Im Grunde genommen funktioniert es mit jedem einfachen Text Editor. Da sollte Euer persönlicher Geschmack entscheiden. 

Aufgrund unzähliger kostenloser Plugins für Atom, lässt sich der Editor einfach erweitern und anpassen.

Google Chrome & Chrome Developer Tools

Google Chrome Logo

Link zum Tool

Zum Entwickeln verwende ich Chrome von Google. Shopware selbst empfiehlt diesen Browser. 

Besonders gut gefallen mir die Chrome Developer Tools. Damit lässt sich der Code im Frontend untersuchen, sodass auch der passende Code gefunden und bearbeitet wird.

Die Developer Tools benutzen wir um den Code im Frontend untersuchen zu können. Außerdem lassen sich damit prima Ajax Aufrufe (immer wenn die Seite nicht neu geladen wird) analysieren.

Auch hier arbeiten wir ständig an der Optimierung unserer Prozesse, sodass wir immer mehr Features einsetzen können.

Git

Git SCM Logo

Link zum Tool

Jedes Plugin bzw. Theme, welches wir entwickeln, wird bei uns mit Git versioniert. Da wir als Team an den Projekten arbeiten, ist Git für uns unverzichtbar. Ich möchte mir das Chaos nicht einmal vorstellen, was herrschen würde, wenn wir ohne Versionierungverwaltungssystem arbeiten würden.

Git vereinfacht die Teamarbeit ungemein und sorgt dafür, dass der Code nachvollziehbar und überschaubar bleibt! Gerade wenn etwas schiefgeht, bin ich froh, dass mit Git schnell ein alter Codestand geladen werden kann und ich nicht von vorne oder vom letzten Backup neu anfangen muss.

Je nach Serversetup lässt sich mit Git auch sehr einfach der aktuellste Stand auf den Server laden (Deployment).

Sourcetree

Sourcetree Logo

Link zum Tool

Passend zu Git nutzen wir Sourcetree als Client. Mit Sourcetree lässt sich Git wunderbar auch über eine grafische Oberfläche verwenden. 

Dies erleichtert den Einstieg und bringt auch die Terminal Muffel dazu mit Git zu arbeiten.

Empfehlen würde ich Dir dennoch beides. Schau Dir ruhig die Terminal Befehle für Git an. Meist kann man damit schneller arbeiten. 

Letztendlich kommt es auch hier auf den persönlichen Geschmack an.

GitLab.com

GitLab.com Logo

Link zum Tool

Unsere Git Repositories hosten wir bei GitLab.com. Alternativ auf GitHub.com. Sind beides sehr gute Hoster. Letztendlich sind wir zu GitLab gewechselt, weil uns der Open Source Gedanke sehr angesprochen hat.

Dabei sind die Plugins unserer Kunden natürlich in privaten Repositories untergebracht. Kostenlose Plugins oder Code, den wir selbst auch offen halten wollen, packen wir auf GitHub.

Unser GitHub Profil: 8mylez Organization

Transmit

Panic Transmit

Link zum Tool

Unschlagbarer FTP Client für Mac. Kann einiges mehr als nur FTP, jedoch verwenden wir diesen meist nur dafür. Selbstverständlich nicht um neue Shops einzurichten. 

Das ist so 1990!

Eher um Bugs besser debuggen zu können, da es oft sehr viele Plugins und starke Theme Anpassungen gibt, müssen wir uns den Code direkt auf dem Server des Kunden anschauen.

Aber kleinere Uploads, z. B. Plugins oder Themes werden damit auch schnell erledigt.

Deployments funktionieren damit auch. Dabei kommt es aber auf die Datenmenge an, da die Übertragung oft sehr langsam ist.

Hyper

Hyper Logo

Link zum Tool

Ein Terminal, welches komplett in HTML/CSS/JavaScript geschrieben ist und alle nötigen Funktionen mitbringt. 

Damit kommen wir sicher und einfach per SSH auf den Server des Kunden um z.B. neue Shops zu installieren. Cache leeren und Staging Umgebungen einrichten lassen sich damit auch sehr gut.

Und zu guter Letzt natürlich auch sehr hilfreich bei der Bugsuche. Mit dem FTP Client ist es manchmal sehr langsam, daher lassen sich viele Arbeiten mit Hyper effizienter erledigen.

Als Shell benutze ich zsh in Verbindung mit Oh My Zsh.

Abschluss

Mit diesen Tools arbeiten wir tagtäglich an Shopware Plugins und Themes. 

Welche Erfahrungen hast Du gemacht? 

Welche Tools benutzt Du für Deine Entwicklung von Plugins und Themes?

8 Kommentare

  • Hi Alexander,

    wenn Ihr im Team mit GIT arbeitet, teilt Ihr Euch dann lokal eine Datenbank zum Entwickeln, wenn Ihr an einem Projekt gemeinsam arbeitet oder hat jeder ein vollkommen eigenständiges Projekt und Ihr teilt nur die Sourcen?

    Wie macht Ihr das z.B., wenn ein User lokal Artikel anlegt?

    Gruß
    David
  • Hey David,

    jeder entwickelt vollständig getrennt und lokal bei sich auf dem Rechner. Die wenigsten Anpassungen erfordern es, dass die User bei allen gleich sein müssen, daher stellt das kein Problem dar.

    Im Prinzip entwickeln wir immer mit Demodaten, da der Code mit allen Daten funktionieren muss unabhängig davon wie der Benutzer heißt oder die Artikelbilder ausschauen.

    Gruß
    Alexander
  • Hallo Alexander,
    da ich mir auch eine Entwicklungsumgebung mit Atom für shopware erstellen möchte - wäre ich wirklich froh, wenn Du ggf. einmal beschreiben könntest - welche Atom-Plugins Ihr so verwendet. ggf. wäre hierzu vielleicht auch ein eigener Beitrag zu empfehlen....
    Ich bitte um Rückmeldung.
  • Hey n8lauscher,

    vielen Dank für deinen Kommentar!

    Ich schreibe es auf unsere Feedback Liste und gebe dir Bescheid, sofern dies umgesetzt wird!

    Gruß
    Alexander
  • Welche Tools nutzt Ihr um eure Seiten auf verschiedenen Geräten zu testen?
    Wir sind derzeit auf der Suche nach Tools für Linux, mit denen wir diverse Browser emulieren oder auch abbilden können. Firefox und Chrome ist bei uns bereits installeirt, aber damit koenenn wir nru bedingt Mobile Geräte oder auch Mobile Viewports abdecken. Blisk um simultan Desktop und Mobile Viewports in einer Side by Side ansicht zu testen ist leider noch nicht für Linux verfügbar.
  • Hey Christoph,

    im Prinzip schauen wir nur mit den Chrome Developer Tools die einzelnen Viewports durch. Wir haben aber noch einige Testgeraete bei uns im Unternehmen und testen im letzten Schritt dann noch mit echten Geraeten.

    Wenn der Code gut strukturiert ist und nichts exotisches verwendet wird, funktioniert alles auch.

    Ansonsten waere evtl. auch https://www.browserstack.com/ was fuer dich.

    Gruß
    Alexander
  • Docker hört sich sehr überzeugend an. Sourcetree hab ich auch durch euch kennengelernt und verwende es seitdem auch standardmäßig. Als Editor kann ich phpstorm empfehlen, insbesondere aufgrund des Shopware Plugins. Kennt ihr das? Bietet Atom eine ähnliche Funktion?

    Beste Grüße,
    Atilla
  • Hey Atilla,

    PHPStorm kennen wir auch! Ich persönlich mag es eher mit "lightweight" IDEs zu arbeiten. PHPStorm ist sehr cool und hat viele Funktionen, aber ich arbeite einfach gerne mit solchen eher kleineren Editoren. Ist Geschmackssache. Für Atom gibt es soweit ich weiß noch kein Shopware Plugin.

    Gruß
    Alexander

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Ü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


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz