Ein Magento Theme erstellen (Update)

09.08.2010   //   von Tobias Vogt   //   Entwicklung, Magento, Themes  //  12 Kommentare

Heute möchte ich gerne einmal erläutern wie wir Webguys ein Magento-Theme erstellen. Wichtig ist es uns dabei  die Updatefähigkeit des Magento-Systems möglichst beizubehalten. Zudem ist es wichtig Übersicht über seine Änderungen am Magento-System zu behalten. Hier gibt es zwei Grundregeln:

  1. Niemals etwas am Kern oder Base-Theme ändern
  2. Alle Änderungen über Versionsverwaltung (z.B. Subversion) protokollieren.

Hält man sich an diese Regeln hat man zumindest die Chance Fehler bei Updates oder im Live-Betrieb einigermaßen zeitnah zu finden. Muss man sich erst durch tausende Zeilen Magento-Code wühlen weil man irgendwo mal etwas geändert hatte kommt das eher der Suche der Nadel im Heuhaufen gleich als einem konzentrieren Debugging.

Voraussetzung für den Beitrag ist das man den Unterschied zwischen Blöcken, Templates und der Layout-XML-Dateien einigermaßen kennt und verstanden hat.

Interface erstellen

Ein Interface kümmert sich in Magento, neben dem Skin, um die Darstellung des Shops. Das Interface baut dabei die HTML-Konstrukte auf – der Skin formatiert sie dann im Anschluss hübsch. Das schöne am Interface in Magento ist das es eine Fallback-Routine gibt. Diese sorgt dafür das, falls eine Datei im gewählten Interface nicht gefunden wurde, diese automatisch aus dem Base-Interface geladen wird. Das Base-Theme wird im übrigen immer mit Magento mitgeliefert und enthält prinzipiell alles was ein Webshop benötigt – nur eben ohne echte Formatierungen.

Zudem kann ein Interface eigene Layout-XML-Dateien enthalten bzw. andere überschreiben.  Dadurch ist es möglich Abweichungen vom Standard zu definieren um z.B. die zuletzt angesehenen Produkte anstatt auf der rechten Seite auf der linken anzuzeigen usw. Die Layout-XML-Dateien sind dabei ein sehr sehr mächtiges Werkzeug das beinahe alle Darstellungen möglich macht.

Zu Anfang brauchen wir, um eben Ordnung zu bewahren, ein eigenes Modul das eigene Layout-XML-Dateien beinhaltet. Diese Layout-XML-Dateien überschreiben in unserem Fall die Standarddarstellungen. Dazu legen wir zuerst die Datei app/etc/modules/Webguys_Layout.xml mit folgendem Inhalt an:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Webguys_Layout>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Mage_Page />
                <Mage_Catalog />
                <Mage_Widget />
            </depends>
        </Webguys_Layout>
    </modules>
</config>

Durch die Attribute im Block-Depends legen wir fest das unser Modul möglichst spät geladen wird da es von Mage_Page/ Mage_Catalog und Mage_Widget abhängt. In der Praxis verhält sich das mit den Layout-XML-Dateien wie folgt: Zuerst sammeln Magento alle XML-Dateien und baut dann, über einen internen Parser, ein großes XML. Über die Depends-Regeln wird festgelegt in welcher Reihenfolge die XML-Dateien zusammengefasst werden. Damit wir mit unserer XML-Datei die Standard überschreiben können muss diese natürlich möglichst spät geladen und verarbeitet werden – sonst macht uns nachher das Originalmodul einen Strich durch die Rechnung.

Nun müssen wir das Modul noch mitteilen das es XML-Dateien besitzt die für die Verarbeitung von Layouts eine Rolle spielen. Dazu erstellen wir die Datei app/code/local/Webguys/Layout/etc/config.xml und befüllen sie wie folgt:

<config>
    <frontend>
        <layout>
            <updates>
                <webguysreset>
                    <file>webguys_reset.xml</file>
                </webguysreset>
                <webguyscustom>
                    <file>webguys_custom.xml</file>
                </webguyscustom>
            </updates>
        </layout>
    </frontend>
</config>

Nun weiß Magento das es zwei neue Layout-Dateien gibt die es zu Verarbeiten gilt. Wir können uns also endlich um unser eigentlich Interface kümmern.

Dazu erstellen wir unter app/design/frontend/ einen Ordner mit den Namen unseres Interfaces. In unserem Fall heißt das Ding natürlich “webguys” – wie sollte es auch anders sein! In dem Interface erstellen wir erst einmal die übliche Ordnerstruktur:

webguys/default/
webguys/default/etc
webguys/default/layout
webguys/default/template

Im Layout-Ordner erstellen wir die zwei Layout-Dateien webguys_reset.xml und webguys_custom.xml. webguys_reset.xml sorgt dabei dafür erst mal alles was an Magento so nervt zu entfernen. Dazu gehören z.B. Umfrage-Blöcke oder die Infobox mit der Hotline. Genauso entfernen wir per Default der Multishipping von der Darstellung erst einmal komplett. Die webguys_reset.xml sieht dabei z.Z. wie folgt aus:

<?xml version="1.0"?>
<layout version="0.1.0">
	<default>

	        <reference name="right">

	       		<!-- Mage_Poll -->
	       		<remove name="right.poll" />

	       		<!--  Paypal Werbung -->
	       		<remove name="paypal.partner.right.logo" />

	       		<!-- Newsletter -->
	       		<remove name="left.newsletter" />

	       		<!-- Callouts -->
	       		<remove name="right.permanent.callout" />

	        </reference>

	        <reference name="left">

	        	<!-- Callouts -->
	        	<remove name="left.permanent.callout" />

	        	<!--  Tags -->
	        	<remove name="tags_popular"/>

	        </reference>

    </default>

    <customer_account>
        <!-- Mage_Tag -->
        <remove name="customer_account_navigation" />
    </customer_account>

    <customer_account_index>
        <!-- Mage_Tag -->
        <remove name="customer_account_dashboard" />
    </customer_account_index>

    <catalog_product_view>
         <!-- Mage_Tag -->
        <remove name="product.info.additional" />
    </catalog_product_view>

    <checkout_cart_index>

        <remove name="checkout.cart.shipping" />

        <remove name="checkout.cart.methods.multishipping" />

    </checkout_cart_index>

</layout>

Nachdem unser Magento so auch von der Paypal-Werbung befreit ist können wir mit der webguys_custom.xml richtig loslegen. Diese Datei ist im Anfang leer und wir von uns Stück für Stück, je nach Designwunsch, gefüllt. Dabei strukturieren wir die Datei in logische Blöcke z.B. nach Katalog oder CMS. So findet man schnell mal etwas wieder wenn etwas gesucht wird.

Über die übliche Strukturen der Layout-XML-Dateien lässt sich auf diesem Wege quasi alles überschreiben. Zu beachten ist dabei das, wenn ein innerer Block geändert werden soll, nur der Name des Blockes angegeben wird. Keines Falls noch der Type oder das Template – sollte sich hier dann mal etwas ändert verwendet Magento wieder die Basiseinstellungen und die Chancen das das Shop weiterhin funktioniert stehen gut.

Nicht alles lässt sich natürlich per Layout-XML lösen. In vielen Fällen muss das Template auch direkt angefasst werden. In diesem Fall wird das Original-Template einfach vom Base-Ordner in unser Interface webguys/template/ kopiert. Zu beachten ist dabei das die Ordner-Struktur natürlich genauso aufgebaut sein muss wie im Original.

Interface aktivieren

Wenn das Interface soweit vorbereitet ist muss es natürlich in Magento noch aktiviert werden. Dazu meldet man sich im Admin an und setzt unter System/ Konfiguration/ Gestaltung/ Paket (Interface)/ “Aktueller Paketname” den Namen des eigenen Interfaces an: in unserem Fall webguys.

Noch einmal die Vorteile des Vorgehens auf einen Blick:

  • Es erfolgen keine Änderungen am Kern, das System kann aktualisiert werden
  • Das Interface enthält nur Dateien die vom Kern abweichen
  • Alle Änderungen der Layout-XML-Dateien sind an einer Stelle gebündelt, man kann sich schnell einen Überblick verschaffen was vom Standard abweicht
  • Es ist nicht nötig ewig lange Layout-XMLs mit dem Original zu vergleichen
  • Andere Entwickler können schnell ins Boot geholt werden
  • Das Interface kann einfach über die Administration deaktiviert werden

Das war es soweit. Ich denke das es, bei genügend Resonanz zu dem Thema, natürlich noch einige Folgebeiträge geben kann.

Update

Layout-Updates lassen sich im eigenen Interface auch bequem über die local.xml ändern. Mehr dazu erfährst du hier.

Der Autor

Tobias Vogt arbeitet seit 2008 mit Magento und ist seit 2011 durch Magento zertifizierter Entwickler. Beschäftigt ist er bei der code-x GmbH, einer Agentur für Internet und Marketing aus Paderborn. Er gehört zum Gründer-Team der Webguys und ist seit November 2011 Bachelor of Science (Wirtschaftsinformatik). Sie erreichen Ihn per E-Mail unter tobi@webguys.de.

12 Kommentare

  • Wieder mal ein sehr guter Beitrag! Die Art der Anpassungen an den Layout XML finde ich sehr interessant und werden sicher in die kommenden Projekte einfließen.

  • Aber natürlich wollen wir Folgebeiträge ;)

    die Layout-Änderungen in ein extra XML auszulagern ist echt ein super Tip.

  • Super einfach erklärt. Hat mir bis jetzt am meisten geholfen. Danke

  • Das Interface habe ich über System -> Design aktiviert. Der hier beschriebene Weg klappte bei mir nicht. Nutze Magento 1.4.1.1. Ein Video-Tut. zum Thema Templates http://www.youtube.com/watch?v=RxZKNisYiUQ

    P.S.: Großartige Seite, hilft mir sehr!

  • Ein simples Beispiel was in webguys_custom.xml stehen könnte, fänd ich hilfreich. Ist der Aufbau ähnlich von page.xml? Wie können die Jeweiligen “Felder” wie bspw. ‘topMenu’ eigens angepasst und aufgerufen werden?

  • In der webguys_custom.xml stehen dann die Layout-Updates gebündelt. Dazu werde ich vermutlich in der Zukunft noch einen genaueren Beitrag verfassen. So lange beschäftigt sich das Magento Entwicklerhandbuch aber auch ganz gut mit dem Thema :) Du brauchst die Datei aber nicht unbedingt – statt dessen kannst du auch die local.xml in app/design/…. anlegen und verwenden.

  • Ein kurzer beispielhafter Auszug deiner webguys_custom.xml würde mir echt weiterhelfen!

    Zur Sache mit ‘topMenu’
    http://www.magentocommerce.com/boards/viewthread/205219/

  • [...] soll eine Hilfe sein, natürlich kann man ein Theme auch eigenständig entwickeln. Einen Anfang dazu vermittelt dieser Artikel, sowie dieser Artikel, der etwas tiefer eingreift. Um [...]

  • Hallo und vielen Dank für dieses Beitrag.

    Ich habe leider ein Problem mit der CSS Datei und den Bildern. Leider werden diese nicht geladen. Frage woran kann das liegen?

    Bitte um Hilfe es ist sehr wichtig.

    VG Baxter

  • Hey Baxter,

    das kann an vielen Punkten liegen. Du könntest die CSS/Bilder im falschen Verzeichnis liegen haben oder vlt. hast du vergessen das Theme im Admin zu aktivieren? Arbeitest du auf der richtigen Entwicklungsumgebung? Ist der Pfad zu den Bildern den “grob richtig” oder linken sie alle z.B. in das Base-Theme? Wenn ja: Aktiviere im Admin mal dein Theme :) Ansonsten empfehle ich dir in aller Ruhe Stück für Stück zu gucken an welcher Stelle es falsch läuft und auf dieser Basis das Problem zu lösen.

    schönen Gruß

    Tobi

  • [...] Zu Anfang brauchen wir, um eben Ordnung zu bewahren, ein eigenes Modul das eigene Layout-XML-Dateien beinhaltet. Diese Layout-XML-Dateien überschreiben in unserem Fall die Standarddarstellungen. Dazu legen wir zuerst die Datei app/etc/modules/Webguys_Layout.xml mit folgendem Inhalt an: ? [...]

  • Hey Tobi,
    das killt ein wenig mehr als die Tags, ich glaube nicht, dass das gewollt ist :-)

        <customer_account>
            <!-- Mage_Tag -->
            <remove name="customer_account_navigation" />
        </customer_account>
     
        <customer_account_index>
            <!-- Mage_Tag -->
            <remove name="customer_account_dashboard" />
        </customer_account_index>

Kommentar schreiben

eMail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.