Türchen 16: Templating in Magento mit PhpStorm

Was brauchen wir

Magento
- Modul Fabrizio Brancas Magento Advanced Template Hints (http://www.fabrizio-branca.de/magento-modules.html)
- Minify CSS & JS (http://store.fooman.co.nz/magento-extension-speedster.html)
PhpStorm
- CSS X-Fire
Firefox (andere Browser gehen bei meinem Tutorial leider nicht, dazu später mehr)
- Firebug für Firefox
- HTML-Tidy
Fireworks
GIT

Grundinstallation Magento / PhpStorm / GIT

Auf die Grundinstallation Magento gehe ich hier nicht ein, das sollte jedem von der Hand gehen. Alternativ kann natürlich via GIT aus einem bestehenden Projekt ausgecheckt werden und dies dann als Basis für das Tutorial genommen werden. Ich nehme als Beispiel eine frische 1.6.1.0 Magento CE. Danach unbedingt die beiden Extensions installieren. Sollte der Magento Connect nicht funktionieren kann ich nur das Projekt http://connect.icyapp.de/ von Damian Luszczymak empfehlen. Sehr schnelle und übersichtliche Suche nach Extensions mit der Möglichkeit des direkten Downloades der jeweiligen Extension. Sehr gut für Code-Previews, wir wollen ja schließlich wissen was wir installieren. Eine ausführliche Beschreibung mit den Möglichkeiten von Fabrizio Brancas Extension findet Ihr hier http://www.fabrizio-branca.de/magento-advanced-template-hints.html. Nur ein kleiner Hinweis, wenn Ihr die Template-Hints damit einschaltet zerhaut es Euch nicht das komplette Layout wie bei der Magento eigenen Version. Minify CSS & JS brauchen wir für das eigentliche Templating nicht, aber danach für den Live-Gang. Hier werden die CSS & JS in jeweils eine Datei gemerged und alle Kommentare entfernt, sehr praktisch! Man hat lokal in seiner Kopie die Kommentare und durch die Extension werden diese beim Ausliefern an den Browser entfernt. PhpStorm könnt Ihr Euch unter http://www.jetbrains.com/phpstorm/ als 30 Tage Testversion, die keine Einschränkungen hat, herunterladen. PhpStorm gibt es für WIN, MAC und NIX. PS: Falls Ihr Euch PhpStorm kaufen wollt, immer mal nach Promo-Codes Ausschau halten, das macht es dann günstiger. GIT für den MAC installieren (falls nicht vorhanden), unter WIN habe ich von Problemen gehört, sollte aber machbar sein. Heutiger Ausgang ist ein MAC. Der nächste und wichtigste Step vor dem ersten GIT commit ist die .gitignore. Nehmen wir uns eine auf Magento optimierte, zu finden hier http://inchoo.net/ecommerce/magento/programming-magento/git-ignore-gitignore-file-for-magento-project/ Hier fügen wir unbedingt noch .idea hinzu, das sind die Ordner und Files die PhpStorm innerhalb des Projektes anlegt und nicht ins GIT gehören. Spezielle .gitignore Files werden hier mal ausgelassen, ist ja nur ein Beispiel. Dann wären wir bereit für den ersten COMMIT. Auf der Shell in das Verzeichnis wechseln und folgendes ausführen.

cd webguys
git init
git add .
git commit -m “first commit“

danach prüfen wir mit

git status

ob alles ok ist, es sollte da stehen

On branch master
nothing to commit (working directory clean)

Nun richten wir das Projekt in PhpStorm ein. Wir nehmen den kurzen Weg :-) PhpStorm starten … Unter Files / New Project den Namen vergeben und die Directory auswählen und los. Wir bestätigen das das Projekt mit den existierenden Files angelegt werden soll, weiter. Der erste Scan im Projektverzeichnis kann etwas dauern, je nach Rechner. Sobald die Indizierung fertig ist wechseln wir unter PhpStorm -> Preferences in den Tab Directorys. Dort wählen wir alle Ordner die in unserem Templating-Projekt nix zu suchen haben.

Unser Beispiel Template liegt unter htdocs\webguys\app\designrontend\default\webguys und unter htdocs\webguys\skinrontend\default\webguys. Danach löschen wir aus dem Magento-Root die Dateien die wir auch nicht brauchen um etwas mehr Übersicht zu haben (.htaccess.sample, index.php.sample usw ). Jetzt installieren wir CSS X-Fire. Den langen Text sparen wir uns hier und schauen uns das Video unter http://www.youtube.com/watch?v=DpjzC_yvTJs an. Nun wisst Ihr ungefähr schon wo die Reise hingeht :-) Im Magento Backend unter System - Configuration - General - Design tragen wir unter Themes

Templates
Skin
Layout
Default

den Wert unseres neuen Templates, webguys ein. Wir wechseln ins Frontend und sehen nun die Ausgangssituation unseres Templating-Projektes. Anmerkung Ausgangsbasis: Ich habe im Design und Skin Ordner das Blank-Theme kopiert und umbenannt in webguys. Alternativ könnt Ihr auch Eure gekauften Templates hier verwenden.

Es kann losgehen, endlich. Was brauchen wir noch? Das Template als PNG. Auf die Feinheiten des Templatings mit Fireworks gehe ich jetzt hier nicht ein, das bitte selber anlesen (siehe Link) und seine eigene Meinung bilden. Ich habe durch jahrelange Agenturarbeit immer wieder Templater fluchen hören die schlechte PSD-Templates bekommen haben und dann nacharbeiten mussten. Das genau eben muss nicht sein wenn Ihr Eure Auftragsarbeiten als PNG aus Fireworks heraus als Zuarbeit bekommt. Es mag sein das Ihr Euch umgewöhnen müsst, aber glaubt mir es lohnt sich! Nun ein kleines Beispiel wie man eben ganz schnell CSS-Formatierungen ändern kann ohne hin und her zu switchen zwischen 1000.ten Fenstern: Wir wollen die Farbe und Schriftart der H2 der Startseite ändern. Element anklicken, rechte Maustaste, Element untersuchen.

Im Fenster Styles vom Firebug ändern wir den Farbwert von Schwarz auf den gewünschten Wert. Danach wechseln wir zu PhpStorm und schauen uns unter dem Tab CSS-X-Fire mal an was wir sehen , tata, unsere Änderungen im Firefox. Nun müssen wir nur noch auf Apply All Changes klicken und PhpStorm trägt die Änderungen in die lokale CSS ein.

Was bedeutet das für uns:

Wenn alle Angaben zum Template vorhanden sind, das Maximum wäre ein perfekt ausgearbeiteter Styleguide vom Auftraggeber inkl. fertigem Template, dann kann man mit einem Rutsch eine Seite im Frontend durchstylen und dann einfach im PhpStorm alle Änderungen übernehmen. Man spart sich das mühsame übertragen der Werte aus dem Firebug in den CSS-Editor, das genau macht CSS-X-Fire für uns. Genial. Es gibt noch 2 weitere Beispiele auf die ich hier eingehen will.

Beispiel 1:

PhpStorm erkennt alle verwendeten IDs und Klassen die in Eurem HTML-Templates verwendet werden und schlägt diese auch mit Code-Completition vor wenn ihr direkt im CSS arbeitet. Perfekt wenn man gerade nicht mehr weiß wie man wo was benannt hat.

Beispiel 2:

Wenn ihr direkt im CSS-File arbeitet und ein Bild als Hintergrund verwenden wollt zeigt Euch PhpStorm an ob dieses Bild vorhanden ist oder nicht. In unserem Fall wollen wir den Header mit einem Background-Image versehen. Das Bild ist aber nicht vorhanden, PhpStorm zeigt Euch das der zu verwendendete Bildname nicht vorhanden ist (rot markiert). Eine sehr schöne optische Kontrolle, man spart sich die Fehlersuche schon vor dem Preview im Browser.

GIT-Integration

Nun haben wir ja Dateien geändert bzw. hinzugefügt. PhpStorm zeigt Euch welche Dateien noch nicht im GIT sind bzw. welche geänderten noch nicht commited. Diese werden entweder blau (geändert) oder rot (neu hinzugefügt) im Directory-Listing angezeigt. Dazu nun einfach auf den oberen Tab der jeweiligen Datei klicken, Git - Commit File, einen Kommentar dazu schreiben und ab damit ins GIT. Thats It! Somit seit Ihr immer schön sauber und könnt auch schnell mal eine Datei zurückholen wenn was schiefgegangen ist.

Fazit:

Alleine beim Templating mit PhpStorm gewinnt Ihr eine Menge Zeit und Eure Projekte sind schneller fertig. Die Einarbeitungszeit ist sehr gering. Gute bis sehr gute Kenntnisse im Aufbau des Magento-Layouts sind aber zwingende Vorraussetzung. Nicht behandelt haben wir heute das Debugging mit PhpStorm, das würde den Rahmen sprengen.