Layout
Aus ShopleiterWiki
Aufbau des Layouts besser verstehen und ändern
Im oberen Abschnitt dieses Kapitels haben wir Ihnen schon einige Hilfsmittel gezeigt, mit denen Sie die relevanten Stellen in den Dateien identifizieren: Template, Blöcke, CSS-Layout, PHP-Quellcode. Am Ende dieses Kapitels zeigen wir Ihnen noch ein paar Tools, die Sie für die Bearbeitung von Dateien einsetzen können. Es handelt sich dabei zwar um Profi-Entwicklungswerkzeuge, aber selbst ein Programmiereinsteiger kommt damit auf Dauer besser zurecht. Jetzt widmen wir uns dem Layoutaufbau und den damit verbundenen Dateien.
Das Layout ist die virtuelle Komponente der Shop-Applikation. Das Template und die darin enthaltenen Layout-Dateien sind für das Aussehen Ihres Shop-Frontends zuständig. Ändern Sie nichts am Core-Quellcode, sonst kann es möglicherweise zu Problemen kommen, wenn diese Dateien durch ein Update verändert werden. Die Trennung von Quellcode und Layout ist ein wichtiges Grundprinzip für die saubere Entwicklungsarbeit mit Webapplikationen. Sie sind in der Lage, über das Template alle gewünschten Layout-Änderungen flexibel vorzunehmen, brauchen dennoch keine Angst haben, denn der Quellcode-Kern (Core) des Magento-Systems bleibt davon unberührt. Die Layout-Dateien bestehen aus unkomplizierten XML-Tags, die als Layout-Kommandos dienen. Das geht nicht sehr tief in die Programmierung hinein und ist mit etwas Eigeninitiative leicht erlernbar. Mit den einzelnen XML-Tags können Sie die Beziehung zwischen den strukturellen Content Blöcke modifizieren oder zuweisen. Damit steuern Sie die Frontend-Funktionalität durch laden oder nicht laden block-spezifischer Inhalte auf der Seite.
Der Aufbau einer Layout-Datei besteht aus einer kleinen Anzahl an XML-Tags, die dem Shop-System als genaue Anweisung dienen, wie eine Seite aufgebaut werden soll. Der einfachste Weg sich damit besser zu Recht zu finden, ist Learning-by-Doing, also einfach ausprobieren. Die wichtigsten Dinge, die Sie dazu näher betrachten müssen sind: XML-Handles, reference-Verweise, sowie strukturelle und inhaltliche Blöcke.
Die Shop-Anwendung selbst trennt in der Layout-Ausgabe die einzelnen Blöcke voneinander mit so genannten XML-Handles. Das ist eine Art Kennung (Identifier), mit deren Hilfe die Anwendung entscheidet, was zu tun ist. Diese Handles verwenden üblicherweise die Namenskonvention: modul_controller_action. In der Datei checkout.xml befinden sich die Handles: <checkout_multishipping_login> und <checkout_multishipping_register>.
<checkout_multishipping_login> <update handle="customer_account_login"/> </checkout_multishipping_login> <checkout_multishipping_register> <update handle="customer_account_create"/> </checkout_multishipping_register>
Listing 3.5: Auszug mit Handles in der Layout-Datei checkout.xml
Die Shop-Applikation unterscheidet zwei Arten von Layouts, nämlich das Default-Layout und das Update-Layout. Das Default-Layout (z. B. page.xml) wird nahezu auf jeder Seite im Shop-Store angewendet, mit Ausnahme weniger Spezial-Seiten (Bilder-Popup). Alle anderen Update-Anweisungen in Layout-Dateien gehören zum zweiten Layout-Typ, die das geladene Default-Layout auf Seitenbasis überschreiben, also quasi wie ein Update drüber gestülpt werden.
Das Default-Layout legt ein spezieller Identifier fest, dieser Handle trägt den Namen <default>. In diesem Fall werden die eingebauten Anweisungen dieses Handles auf jeder Seite geladen, erst im Anschluss daran sind die seitenspezifischen Änderungen dran. Alle Handles mit einem anderen Namen kommen nur auf der Seite zum Einsatz, die für diese Layout-Datei verantwortlich ist. So verändert der Inhalt des seitenspezifischen Handles (page-specific layout) <catalog_product_view> mit seinen Layout-Updates nur die Seite der Produktanzeige (Product View Page), während der Update-Inhalt des Handles <catalog_product_compare_index> nur beim Produktvergleich (Compare Product page) aktiv ist. An den Namen der verschiedenen Handles brauchen Sie normalerweise nichts zu verändern.
Als weiteres Beispiel soll wieder die Produktseite dienen. Das normale Layout dieser Seite verwendet die dreispaltige Skeleton-Datei 3columns.phtml (Template). Auf der Produktseite ist diese Darstellung jedoch eher ungeeignet, und Sie möchten das Layout auf die zweispaltige Darstellung abändern. Dies bewerkstelligen Sie, indem Sie in der Layout-Datei catalog.xml mit der Action-Methode setTemplate das Skeleton-Template 2columns-right.phtml einbinden. Dieser Vorgang nennt sich im Allgemeinen Update. Mit der Action-Methode unsetChild ist es stattdessen möglich, einen Block auszublenden. Dadurch wird nur auf dieser einen Seite der Block entfernt, bleibt aber auf allen anderen Seiten weiterhin sichtbar. Eine andere Variante bietet in den XML-Dateien die Befehlszeile <remove name="[Blockname]" />. Noch eine andere Möglichkeit, wie Sie die Modulausgabe komplett auf allen Seiten entfernen, finden Sie unter „System › Konfiguration › Erweitert“ (System › Configuration › Advanced). Damit schalten Sie unter anderem die Anzeige des Umfrage-Moduls (Mage_Poll) oder des Newsletters (Mage_Newsletter) ab. Abschließend publizieren Sie alle Änderungen und aktivieren wieder die Cache-Verwaltung im Backend.
Magento bestimmt das Verhalten und die optische Darstellung einer Seite mittels Block-Tags. Wie bereits beschrieben, gibt es die beiden Typen: strukturelle und Content-Blöcke. Über die zugewiesenen Tag-Attribute lassen sich die Blöcke einfach unterscheiden. Ein struktureller Block beinhaltet für gewöhnlich immer das as-Attribut. Im default-Layout finden Sie jede Menge solcher Attribute. Der Grund dafür ist relativ einleuchtend: das default-Layout bildet die Basis, auf dem dann die einzelnen seiten-spezifischen Layouts aufsetzen. Im Standard-Layout befinden sich beispielsweise die strukturellen Blöcke: left, right, content und footer. Weitere Block-Attribute sind:
- type: Identifier der Modul-Klasse, die die Funktion des Blocks bestimmt
- name: Für die Block-Referenzierung erforderlicher Name
- before / after: Zwei Wege, die die Position eines Content-Blocks festlegen
- template: Die Funktionalität des Blocks wird durch das Template bestimmt
- action: Methoden kontrollieren die mannigfache Store-Front Funktionalität
Einen reference-Verweis benutzen Sie, wenn Sie sich auf einen anderen Block beziehen möchten. Indem Sie eine Referenz zu einem anderen Block herstellen, werden alle Updates innerhalb der reference auf den entsprechenden Block angewendet. Mittels dem name-Attribut beziehen Sie sich per reference-Verweis auf einen anderen Block. Die Verbindung erfolgt über den Namen. Erstellen Sie den Verweis mit <reference name="right">, dann zielen Sie auf den Block <block name="right">.
Übrigens finden Sie online am Ende des Designer's Guide für den ersten Einstieg in die Layout-Bearbeitung noch zwei kleine praktische Übungsaufgaben. In der ersten Aufgabe verschieben Sie die Box „Mein Warenkorb“ (My Cart) von der rechten in die linke Spalte. Bei der zweiten Übung isolieren Sie die „Erweiterte Suche“ (Advanced Search) von den Footer Links, um den Link dann im Header-Bereich zu platzieren.
