Magento Theming Ein Einstieg Rainer Wollthan

Überblick Vorbereitung Datei Struktur Adminbereich Layout XML Block Template

Magento Theming macht Spaß!

Vorbereitung Produkte Marketingmaßnahmen Design Länder / Übersetzungen Entwicklungsumgebung Texteditor

Datei Struktur

Datei Struktur 2 wichtige Verzeichnisse Layout, Templates und Translations: app/design/frontend/ base/default app/design/frontend/default/default Bilder, CSS und Javascripts: skin/frontend/ base/default skin/frontend/default/default

Mein Paket/Theme Layout, Templates und Translations: app/design/frontend/mein_paket/default app/design/frontend/mein_paket/mein_theme Bilder, CSS und Javascripts: skin/frontend/mein_paket/default skin/frontend/mein_paket/mein_theme

Fall-Back Hierarchie Suche nach einer Template Datei: app/design/frontend/mein_paket/mein_theme skin/frontend/mein_paket/mein_theme wenn nicht gefunden, dann: app/design/frontend/mein_paket/default skin/frontend/mein_paket/default wenn nicht gefunden, dann: app/design/frontend/base/default skin/frontend/base/default wenn nicht gefunden, wird ein Rendering Error angezeigt.

Hinweise 1. In den /base/ oder /default/ Paketen sollte man nichts ändern kein eigenes Theme anlegen 2. Benötigte Templates aus app/design/base/default kopieren 3. CSS Dateien aus skin/frontend/default/blank kopieren

Adminbereich

Design Einstellung

Design Einstellung app/design/frontend/mein_paket/mein_theme/template

Design Einstellung app/design/frontend/mein_paket/default/locale/de_de app/design/frontend/mein_paket/de_de/locale/de_de skin/frontend/mein_paket/de_de

Design Exception Kopieren von default/iphone nach mein_paket/ mein_iphone jeweils in app/design/frontend und skin/ frontend anlegen. Eine Matched Expression für eine Mobilvariante ist: iphone ipod BlackBerry Palm Googlebot-Mobile Mobile mobile mobi Windows Mobile Safari Mobile Android Opera Mini

Design Einstellungen

System Design app/design/frontend/mein_paket/wsv_2011 skin/frontend/mein_paket/wsv_2010

Layout XML / Block / Templates

Layout XML

Layout XML Im allgemeinen kann man die Layout XML nutzt um: <block> s zu verändern Weitere JS und CSS einzubinden Den Aufbau der Seite anzupassen Action innerhalb eines Blocks auführen

Layout XML app/design/frontend/mein_paket/ default/layout Pro Modul gibt es eine XML Datei z.b. page.xml Das XML ist unterteilt in Handels z.b. <default>, <catalog_category_default> Aufbau eines Handels ist modul_controller_action Die Handels werden aus XML Dateien zusammengeführt

Layout XML Eigene Layout XML app/design/frontend/mein_paket/ default/layout/local.xml Wird zum Schluss eingelesen Alles an einem Platz

Layout XML <reference> beziehen sich auf einen anderen Block der im name Attribut referenziert wird Damit kann man Änderungen an dem referenzierten Block vornehmen

Layout XML Mit Blocks wird die Struktur der Seite festgelegt Innerhalb eines <block> werden Templates definiert Methode ausgeführt

Blocks

Blocks 2 verschieden Block Typen Structural Block Content Block Die Block Typen sind eher Konzeptioneller Art

Structural Blocks <Structural Block> erkannt man am type= core/text_list Mit der Methode getchildhtml() werden innerhalb eines Templates die Unterblöcke ausgegeben Bekannte <Structural Block> sind zb: header, left, content, right, (footer)

Content Blocks <Content Blocks> werden innerhalb des Eltern Structural Blocks angezeigt Diese Blocks nutzen Template Dateien um (X)HTML zu erzeugen Es gibt diese für fast jede Funktionalität auf der Seite

Blocks Die <block> Attribute: type: enthält die Klasse name: ist der Name as: ist ein Alias template: Pfad zum Template before/after: Position Child Tag: <action>: Methoden ausführen

Templates

Templates liegen in app/design/frontend/mein_paket/default/templates In den Layout XML Dateien findet man die Templates für die Blocks

Templates System -> Configuration -> Development kann man die Template Path Hints aktivieren Oder die DeveloperToolbar installieren

Im Template $this-> ('Shopping Card'); = Translation $this->getchildhtml('crosssell'); = Include von Blocks $this->geturl(''); oder $this->getskinurl(''); = Links bauen Mage::helper('helpername'); oder $this->helper('helpername'); = Helper nutzen Weitere Methoden werden von der jeweiligen Klasse bereitgestellt die über das type Attribute in der Layout XML gesetzt wird.

Template Adminhtml Für Template Änderungen im Adminbereich die app/etc/ local.xml ergänzen <config>... <stores> <admin> <design> <theme> <default>mein_theme</default> </theme> </design> </admin> </stores> </config> app/design/adminhtml/default/mein_theme

Hinweise JavaScript Framework: Prototype Eigenes XHTML Gerüst aufsetzen ID/ClassName nur entfernen/ändern wenn man dies auch in den JavaScript Dateien bearbeitet Nur die Templates kopieren die man wirklich braucht CSS des Blank Theme als Vorlage nehmen Erst planen, dann anfangen!

Magento Theming macht Spaß!

Danke Rainer Wollthan / rocuments.de / rw@rocuments.de