Block
Aus ShopleiterWiki
3.1.3 Das erste eigene Design
Wer schon mit anderen Ecommerce-Lösungen gearbeitet hat, der muss zuerst einmal etwas umdenken bzw. umlernen. Keine Shop-Software arbeitet wie die andere. Das gilt genauso für Magento - es gibt zunächst viele neue Features und Techniken zu entdecken. Doch wenn Sie sich daran gewöhnt haben, dann kommen Sie künftig schneller und oft bequemer zum Ziel. Einige Arbeitsabläufe sind sicherlich anders als vorher. Scheuen Sie aber nicht die schwierige Lernphase, nebenbei stoßen Sie auf eine ganze Reihe neuer Tricks, die Ihnen den Betrieb Ihres Shops wesentlich erleichtern.
Bleiben Sie am Ball, beißen Sie sich durch. Sie werden belohnt mit zunehmenden Verkäufen. Beginnen Sie jetzt und hier die Arbeit an Ihrem ersten eigenen Layout. Schritt für Schritt entsteht das Design. Doch selbst zu dem Zeitpunkt, wo Sie den Shop online einstellen, sind Sie noch lange nicht fertig. Es gibt immer etwas zu tun oder zu verbessern. Nicht nur das Layout, sondern auch die enthaltenen Artikel und die eingebunden Funktionen werden sich verändern, genauso wie die Umsätze steigen.
Bevor Sie mit dem Design loslegen, nehmen Sie sich noch kurz Zeit für ein paar weitere hilfreiche Zusammenhänge. Bei der Design-Entwicklung für Magento ist es gut, die Kombination aus Blöcken und Layout zu verstehen. In der Abbildung 3.8 sehen Sie eine kleine Merkhilfe, wie sich aus einzelnen Blöcken ein langer Gesamtblock bildet:
- Bild 1: Stellen Sie sich ein leeres Grundgerüst ohne Inhalt vor.
- Bild 2: Füllen Sie das leere Grundgerüst mit dem ersten Block.
- Bild 3: Fügen Sie unter den ersten Block einen zweiten Block ein.
- Bild 4: Dehnen Sie das Grundgerüst mit einem dritten Block weiter aus.
- Bild 5: Sehen Sie wie das Grundgerüst mit dem vierten Block weiter wächst.
Betrachten Sie nun mal kurz die Landing Page von Shirts in Ihrem Shop mit den Testdaten. Danach schauen Sie sich die Aufteilung der beiden rechten Einzelbilder in Abbildung 3.9 an. Links sehen Sie den Original-Screenshot, im mittleren Bild die grobe Seitenstruktur und rechts außen die einzelnen Blöcke. Die obige Merkhilfe, verglichen mit den realen Bildern, symbolisiert das gesamte Layout von der Planung bis hin zur Umsetzung. Die grobe Seitenstruktur definiert die Grundstruktur Ihrer Webseite: Header-, Main-Content-, Footer-, linker und rechter Spaltenbereich. Diese Bereiche dienen als Grundgerüst für die Positionierung der Content-Blöcke innerhalb der Seite. Mit den einzelnen Content-Blöcken realisieren Sie die verschiedenen Funktionalitäten auf einer Seite, wie Kategorieliste, Callout, Mini-Warenkorb, Product Tags, etc.. Erstellen Sie dann den (X)HTML-Code mittels der Template-Dateien.
Mit dem Layout positionieren Sie die Content-Blöcke im Grundgerüst der Seitenstruktur. Das Layout existiert in Form von XML-Dateien, was auf den ersten Blick etwas ungewöhnlich erscheint. Im Verzeichnis /app/Design/frontend/default/default/Layout finden Sie diese Dateien. Mit diesen Layout-Dateien verschieben Sie die Blöcke auf einer Seite und weisen den kleineren Content-Blöcken mittels Action-Methoden (z.B. setTemplate) ein Template zu. Bereits mit wenigen Handgriffen an Layout- und Template-Dateien verändern Sie die visuelle Optik Ihres Webauftritts. Nähere Informationen über Layouts finden Sie am Ende dieses Kapitels.
