Designentwicklung
Aus ShopleiterWiki
Arbeitsablauf der Design-Entwicklung
Nachdem Sie inzwischen mit allen relevanten Wissensgebieten rund um das Design-Thema versorgt sind, können Sie sich selbst daran machen, ein Layout zu entwickeln. Den Entwurf eines Designs unterstützen die folgenden Tools und Dateien: Blöcke, Layouts (*.xml), Templates (*.phtml), Skins (*.css, *.gif, *.jpg, *.png und *.js). Jetzt starten wir mit den ersten Schritten zum Bau eines Designs. Folgende Arbeitspakete bestimmen den Arbeitsablauf:
- Duplizieren Sie das bestehende Standard-Thema!
- Aktualisieren Sie die Frontend-Anzeige durch einen Cache-Refresh!
- Bestimmen Sie die strukturellen Blöcke auf den einzelnen Seiten!
- Erstellen Sie für jeden einzelnen Block eine Template-Datei!
- Verändern Sie in der Layout-Datei die Modul-Ausgabe und Modul-Position!
Bevor Sie mit der Bearbeitung einzelner Dateien beginnen, benötigen Sie ein eigenes Thema, an dem Sie Änderungen vornehmen, ohne das Grundlayout zu überschreiben. Im Notfall haben Sie so die Möglichkeit, jederzeit im Backend auf das ursprüngliche unveränderte Standard-Layout umzuschalten. Sind Ihre Layout-Anpassungen in den neuen Dateien fehlerhaft, dann greifen Sie auf die Original-Dateien zu und kopieren den funktionsfähigen Quellcode heraus. Daher empfehlen wir Ihnen, gleich zu Beginn das Standard-Layout zu duplizieren. Wie Sie dazu vorgehen, zeigen wir Ihnen am Ende von Kapitel 3.
Erstellen und bearbeiten Sie viele kleine Design-Anpassungen, dann lohnt es sich, den Cache komplett abzuschalten. Wählen Sie dazu in der Cache-Verwaltung (Cache-Management) bei Alle Caches (All Caches) im Dropdown-Feld den Punkt Deaktivieren (Disable). Ihr Shop übernimmt die Konfiguration, sobald Sie auf Cache Einstellungen speichern (Save cache settings) klicken. Durch diese geänderte Einstellung schaltet das System alle Cache-Aktivitäten ab. Der Vorteil ist: Sobald Sie an irgendwelchen Layout- oder Template-Dateien Änderungen abspeichern, sehen Sie nach einem Refresh des Browsers mit (F5) sofort, ob die Änderungen korrekt arbeiten. Sie sparen sich dadurch jedesmal das manuelle Aktualisieren (Refresh) des Caches. Denken Sie daran nach getaner Arbeit den Cache zur Beschleunigung der Shop-Zugriffe wieder einschalten.
Bevor Sie mit dem neuen Design am Quellcode loslegen, erfassen Sie zunächst den Ist-Zustand. Machen Sie sich zunächst die Mühe und identifizieren Sie alle Seiten Ihres Shops. Das mag auf den ersten Blick ziemlich umfangreich sein, ist es aber nicht wirklich. Selbst ein Shop mit vielen Tausend Artikeln besteht zumeist aus weniger als 100 Seiten. Denn eine Produkt-Detailseite sieht im Normalfall (innerhalb einer Kategorie) immer gleich aus. Ein kleiner Shop kommt deshalb schon mit 10 bis 20 Seiten aus. Legen Sie sich einfach eine kleine Excel-Tabelle an. Dies ist eigentlich kein Vorschlag, sondern ein Muss, da es die Arbeit erheblich erleichtert. In Tabelle 3.3 sehen Sie einen Auszug, ohne die Blöcke, die auf den einzelnen Seiten zum Einsatz kommen. Notieren Sie darin den Seitennamen, die Template-Datei, die verwendeten Blöcke und vorbereitend für später die Keywords für die Suchmaschinen-Optimierung. Bei Artikeln und Kategorien arbeiten Sie bei den Keywords natürlich mit Variablen, wie $artikelname oder $kategoriebezeichnung. Das Gute an einer solchen Liste ist, dass Sie sofort wissen, auf welchen Seiten die Änderungen auftreten.
| Seitenname | Skeleton Template | Keywords |
|---|---|---|
| Homepage | 2columns-right.phtml | Electronics, Apparel, Furniture |
| Landing Page | 1column.phtml | Electronics Shop |
| Kategorie-Liste | 3columns.phtml | Digital Cameras, Cameras |
| Produkt-Detailseite | 2columns-right.phtml | Kodak EasyShare Digital Camera |
| Impressum | 3columns.phtml | Impressum Shop |
| Kundenservice | 3columns.phtml | Kundenservice Shop |
Tabelle 3.3: Seitenstruktur mit Templates und Keywords (ohne Blöcke)
Alle bereits vorhandenen Template-Dateien, die standardmäßig für die Seitenstrukturierung genutzt werden können, befinden sich im Verzeichnis /app/design/frontend/myInterface/myTheme/template/page/. Die Dateien die Sie dort finden, nennt man auch Skeleton Templates, da sie das Gerippe bzw. Grundgerüst einer Seite darstellen. Ihre Aufgabe liegt lediglich darin, die strukturellen Blöcke auf der Seite mittels
<body>
<div class="wrapper">
<div class="header">
<?php echo $this->getChildHtml('header') ?>
</div>
<div class="middle">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-left side-col">
<?php echo $this->getChildHtml('left') ?>
</div>
<div id="main" class="col-main">
<?php echo $this->getChildHtml('content') ?>
</div>
</div>
<div class="footer">
<?php echo $this->getChildHtml('footer') ?>
</div>
</div>
</body>
Listing 3.4: Stark vereinfachtes Beispiel eines Skeleton Templates
Das einzig auffällige an diesen speziellen Template-Dateien ist der mehrfach vorkommende PHP Methodenaufruf $this->getChildHtml(). Mit einem solchen Aufruf lädt und positioniert Magento die strukturellen Blöcke und stellt deren Inhalte auf der Seite dar, auf der dieses Grundgerüst eingesetzt wird. Der Name in Klammern bezeichnet jeden einzelnen Strukturblock innerhalb des Layouts, die Block-Identifier in Listing 3.4 lauten header, breadcrumbs, left, content und footer. Die Zuweisung der Skeleton Templates zum Store erfolgt über das Layout.
Praxis-Tipp: Layout-Entwurf mit Wireframes
Für einen ersten konzeptionellen Layout-Entwurf Ihres Shops können Wireframes eine gute Hilfe sein. Viele Designer entwerfen die Optik direkt mit Freehand, PhotoShop oder Dreamweaver (ehemals von Macromedia). Doch für einen ersten Entwurf reicht oftmals eine Skizze aus, so ähnlich wie in Abbildung 3.4. Anfangs geht es meist um banale Dinge, wie Reihenfolge der Boxen bzw. 2-spaltig oder 3-spaltig. Dafür brauchen Sie oft keinen teuren Webdesigner. Erst für die farbliche Gestaltung lohnt sich der Gang zum Profi. Versuchen Sie es einfach mal selber, in Kapitel 3.3 zeigen wir Ihnen, mit welchem Tool Sie so etwas umsetzen. Das Ergebnis ist dann gleichzeitig die Grundlage für die ersten Layout-Anpassungen Ihres Online-Shops. Zudem sind solche Wireframes eine wertvolle Unterstützung für jeden externen Programmierer.
Nachdem Sie die einzelnen sich wiederholenden Blöcke mittels Excel-Tabelle (in Textform) oder Wireframes (in Bildform) identifiziert haben, kommen die Template- Dateien an die Reihe. Jeden Block, den Sie optisch verändern oder neu erstellen, benötigt ein eigenes (Mini-)Template, welches das Aussehen, den Inhalt und die Formatierung festlegt. Bei neuen Dateien empfehlen wir Ihnen möglichst beschreibende und aussagekräftige Dateinamen. Wie Sie in Abbildung 3.9 sehen, kann eine einzige Seite locker aus 15 Blöcken bestehen. Für jeden Block, den Sie in Ihrem neuen Layout einbauen, benötigen Sie eine eigene Template-Datei. Zum Glück befindet sich im Standard-Thema bereits eine umfassende Sammlung von mehr als 30 Vorlagen für die wichtigsten Anforderungen. Sie brauchen das Rad also nicht neu erfinden, sondern nutzen für Ihren Design-Entwurf die vorhandenen Template- und CSS-Dateien.
Eine wesentliche Arbeitserleichterung für die Design-Entwicklung stellen die „Vorlagen Pfadhinweise“ (Template Path Hints) und „Blocknamen zu Hinweisen“ (Add Block Names to Hints) dar. Damit Sie diese Design-Hilfe aktivieren können, gehen Sie im Backend-Bereich zu „System › Konfiguration › Entwickleroptionen“ (System › Configuration › Developer). Wählen Sie zuerst im aktuellen Konfigurationsbereich (Current Configuration Scope) die gewünschte Store View aus, denn ansonsten ist es nicht möglich, die hilfreichen Hinweise einzublenden. Danach aktivieren Sie im Debug-Bereich die Anzeige der gewünschten Hinweise. Wenn Sie nach einem Refresh das Frontend betrachten, sehen Sie Pfad und Dateinamen für alle Template-Vorlagen, sowie die eingesetzten Block-Namen, z. B. /page/2columns-right.phtml und Mage_Page_Block_Html. So wissen Sie genau, welche Template-Dateien Sie bearbeiten müssen.
Praxis-Tipp: Mozilla Firefox Addon Firebug
Die Anzeige des Mozilla Firefox Addons Firebug ähnelt etwas der Anzeige der Design-Hilfe von Magento. Mit diesem Entwicklungswerkzeug steht Ihnen direkt im Webbrowser ein sehr nützliches Tool zur Verfügung. Damit editieren, debuggen oder untersuchen Sie live in der aktuell im Browser angezeigten Webseite CSS-, HTML- und JavaScript-Code. Mittels eines Klicks auf den Button „Untersuchen“ identifizieren Sie so ganz bequem die verwendeten Container, Klassen oder ID‘s für die CSS-Bearbeitung. In Abbildung 3.11 sehen Sie genau, welcher Code für die Formatierung der Breadcrumb verantwortlich ist. Gleichzeitig bekommen Sie in der rechten Spalte mitgeteilt, in welcher Datei sich der CSS-Code (z. B. boxes.css aus /skin/frontend/default/default/css) befindet.
Übrigens erreichen Sie im aktuellen Microsoft Internet Explorer 8 über die Taste (F12) oder alternativ über „Extras › Entwicklertools“ eine Konsole, die ähnlich wie Firebug funktioniert: HTML, JavaScript, CSS und einige Debugging Tools.
Opening PHTML Files in Dreamweaver
Nachdem Sie einige optische Änderungen und Textauszeichnungen per HTML und CSS vorgenommen haben, möchten Sie diese sicherlich genauer begutachten. Den letzten Feinschliffe und die Sortierung der Blöcke nehmen Sie zuvor noch in den Layout-Dateien vor. Wie die Template-Dateien, speichert das Shop-System die Layout-Dateien auf Modulbasis ab. Mit den Pfadhinweisen zur Template-Datei bekommen Sie daher ebenfalls die Pfadangabe zur Layout-Datei.
Möchten Sie beispielsweise den Mini-Warenkorb im Layout verschieben, dann betrachten Sie zuerst den Template-Pfadhinweis frontend/default/default/template/checkout/cart/sidebar.phtml. Darin finden Sie die erforderliche Information. Suchen Sie nach dem ersten Ordner-Namen, der nach dem Verzeichnis /template steht. Das ist der Name des Moduls, in unserem Beispiel lautet der Modulname checkout. Diesen Namen benötigen Sie, um die zugehörige Layout-Datei zu finden. Die Datei catalog.xml ist die Layout-Datei für das catalog-Modul (Katalog), während die Datei customer.xml zuständig ist für das customer-Modul (Kunden). Gehen Sie daher in den Layout-Ordner Ihres Themas, öffnen die Datei checkout.xml und verändern die Position des Warenkorbs. Jeder Bereich des Seitenlayouts ist deutlich mit Kommentaren gekennzeichnet, die Sie an den öffnenden und schließenden Klammern erkennen