Aus diesem Grund möchte ich hier eine Anleitung zur Verfügung stellen, die von Grund auf die erstellung von Plugins für Magento klärt. Diese Anleitung soll durch die erstellung eines simpelen Plugins, dass ein Produktbild in der Comparesidebar anzeigt plastischer dargestellt werden.

Teil 1: Die Ordnerstruktur

Bevor es daran geht unser Plugin zu schreiben müssen wir erst ein paar Ordner anlegen, die uns als Grundgerüst dienen. Als erstes navigieren wir in den Ordner "app/code/local/".

( Falls ihr euch fragt was die anderen Ordner in "App/code/" bedeuten: Magento basiert auf Modulen, die im grunde nichts anderes sind als Plugins. Diese Module sind in verschiedene Kategorien aufgeteilt. Zum einen gibt es den Ordner "core" in dem alle Module liegen die Magento von Haus aus mitbringt. Im ordner "community" befinden sich alle Module die per Magento connect installiert wurden. Im Ordner "local" sind alle Module die selbst auf den FTP hochgeladen wurden, wie zum Beispiel gekaufte oder selbstgeschriebene Erweiterungen. )

Dort legen wir zunächst einen Ordner an, in den wir nun alle von geschriebenen Plugins plazieren werden. Dieser Ordner bekommt normalerweise entweder den Firmennamen oder auch seinen Nachnamen, damit es nicht zu Kollisionen mit anderen Programmierern kommt. Wir nennen unseren Ordner Testweise "Schrottcode".

Nun legen wir im Ordner "Schrottcode" den Ordner "CompareSidebarImages" an. Dieser Ordner beinhaltet den größten Teil unseres Plugins. Da wir ein Plugin schreiben, dass Bilder in der Compare Sidebar anzeigt ist der name ganz treffend gewählt.

Ist auch das erledigt, legen wir im Ordner "CompareSidebarImages" weitere 2 Ordner an. Diese lauten "etc" und  "Helper". Bis jetzt sollte eure Ordnerstruktur aussehen wie im rechten Bild.
Nun haben wir die Ordner Struktur für die Logik unseres Plugins. Das heißt in diesen Ordnern wird sich später unser code befinden. Nun brauchen wir aber noch Ordner in dem wir unsere Ausgaben präsentieren können.

Zunächst navigieren wir in den Template Ordner  "app/design/frontend/default/default/template". Dort legen wir nun den Ordner "comparesidebarimages" an. Darin werden wir später unsere Views platzieren. Ich habe hier das Standardtheme ausgewählt, solltet Ihr jedoch ein anderes Layout verwenden, müsst ihr natürlich einen anderen Pfad verwenden.

Nun sind alle Ordner erstellt um mit unserem ersten Plugin zu beginnen.

Teil 2: Konfiguration

Da wir jetzt alle für unser Plugin benötigten Ordner erstellt haben, können wir mit dem nächsten Schritt beginnen, der Konfiguration. Das heißt wir zeigen Magento wo es unser Plugin finden kann, welche Ressourcen unser Plugin nutzen wird, sowie einige Grundeinstellungen.

Beginnen wir damit im Ordner "app/code/local/Schrottcode/CompareSidebarImages/etc/". Dort legen wir nun eine Datei mit dem Namen "config.xml" an. Wer zu diesem Zeitpunkt noch nicht mit XML vertraut ist sollte vorher mal hier vorbeischauen.

Ich poste zunächst einmal den Inhalt der Datei, bevor wir diesen Schritt für Schritt durchgehen.

app/code/local/Schrottcode/CompareSidebarImages/etc/config.xml

<?xml version="1.0"?>
<config>
	<modules>
		<Schrottcode_CompareSidebarImages>
			<version>1.0</version>
		</Schrottcode_CompareSidebarImages>
	</modules>
	<global>
		<helpers>
			<comparesidebarimages>
				<class>Schrottcode_CompareSidebarImages_Helper</class>
			</comparesidebarimages>
		</helpers>
	</global>
	<frontend>
		<layout>
			<updates>
				<comparesidebarimages>
					<file>comparesidebarimages.xml</file>
				</comparesidebarimages>
			</updates>
		</layout>
	</frontend>
</config>

Mit der ersten Zeile wird das XML Dokument deklariert. Darauf folgt der config tag, in dem die Konfiguration des Plugins stattfindet.

	<modules>
		<Schrottcode_CompareSidebarImages>
			<version>1.0</version>
		</Schrottcode_CompareSidebarImages>
	</modules>

Im Modules Tag definieren wir unser Plugin. Das Schrottcode_CompareSidebarImages sagt Magento, dass es sich um das Plugin im Ordner Schrottcode/CompareSidebarImages handelt.

( Magento setzt auf dem Zend Framework auf, dieses verwendet eine besondere art der Klassen und Ordnerverwaltung. Der Unterstrich steht für ein /. Zum Beispiel liegt die PHP Klasse "Mage_Catalog_Block_Product" im Ordner "Mage/Catalog/Block/Product.php". )

Mit der Angabe des Versions Tags, kann der User im Adminbereich sehen welche Version er besitzt wenn er nach möglichen Updates sucht.

	<global>
		<helpers>
			<comparesidebarimages>
				<class>Schrottcode_CompareSidebarImages_Helper</class>
			</comparesidebarimages>
		</helpers>
	</global>

Im Global Tag wird definiert wo das Plugin seine Dateien findet. Zum Beispiel liegen die Helper im Ordner
"Schrottcode_CompareSidebarImages_Helper" ( "Schrottcode/CompareSidebarImages/Helper" ).
In komplexeren Plugins werden auch Controller und Installationsdateien benötigt. Auch diese Ordner würden dann hier angegeben werden.

	<frontend>
		<layout>
			<updates>
				<comparesidebarimages>
					<file>comparesidebarimages.xml</file>
				</comparesidebarimages>
			</updates>
		</layout>
	</frontend>

Im Frontend Tag definieren wir in welcher Datei Magento suchen soll um die benötigten Informationen für die Präsentation zu finden. Dazu aber später mehr.

Und das wars auch schon für unsere erste Konfigurationsdatei. Nun müssen wir Magento noch sagen das unser Plugin existiert und wo es liegt. Dazu navigieren wir in den Ordner "app/etc/modules". Dort legen wir die Datei "Schrottcode_CompareSidebarImages.xml" an. Folgendes kommt in die Datei:

<?xml version="1.0"?>
<config>
	<modules>
		<Schrottcode_CompareSidebarImages>
			<active>true</active>
			<codePool>local</codePool>
		</Schrottcode_CompareSidebarImages>
	</modules>
</config>

Hier werden 2 dinge definiert. Zum einen wird das Plugin aktiviert und zum anderen wird der codePool bestimmt. Der CodePool ist nichts anderes als der Ordner in dem wir unser Plugin speichern. Zur Auswahl steht local und community. der core Ordner ist für Magentoeigene Module bestimmt. Der wird genutzt um unser Plugin per Magento connect zu verbreiten.

Das war es auch schon, wenn wir uns nun in unserem Magento Backend einloggen und zu "System/Konfiguration/Erweitert" navigieren und etwas herunterscrollen sehen wir unser Plugin.

Jetzt wo Magento unser Plugin kennt, und unser Plugin weiß wo seine Dateien liegen, können wir anfangen unser Plugin zu schreiben.

Teil 3: Das Plugin schreiben

Noch ein kleines Vorwort zu unserem Plugin. Wir wollen, dass ein Artikel der der Compare Sidebar hinzugefügt wurde zusätzlich zur Produktbeschreibung auch ein Produktbild zeigt. Am elegantesten erreichen wir das in dem wir die Grundfunktionalität des existierenden Compare Sidebar Modules erweitern. Das Originale Modul holt nur den Produktnamen aus der Datenbank, wir werden dies dahingehend ändern, dass wir auch das Produktbild laden um es darstellen zu können.

Die Originale Funktion "getItemCollection" steht in der "Compare.php" im Ordner "app/code/core/Mage/Catalog/Helper/Product". Diese müssen wir nun mit unserem eigenen Plugin überschreiben. Dazu legen wir im Ordner "Helper" unseres Plugins die Datei "Compare.php" an. Folgendes schreiben wir in die Datei:

class Schrottcode_CompareSidebarImages_Helper_Compare extends Mage_Catalog_Helper_Product_Compare
{

	public function getItemCollection()
    {
        if (!$this->_itemCollection) {
            $this->_itemCollection =
				Mage::getResourceModel('catalog/product_compare_item_collection')
					->useProductItem(true)
					->setStoreId(Mage::app()->getStore()->getId());

            if (Mage::getSingleton('customer/session')->isLoggedIn()) {
                $this->_itemCollection
					->setCustomerId(Mage::getSingleton('customer/session')
						->getCustomerId());
            }
            else {
                $this->_itemCollection
					->setVisitorId(Mage::getSingleton('log/visitor')
						->getId());
            }

            Mage::getSingleton('catalog/product_visibility')
                ->addVisibleInSiteFilterToCollection($this->_itemCollection);

            $this->_itemCollection->addAttributeToSelect('name')
                ->addUrlRewrite()
                ->load();
        }
        return $this->_itemCollection;
    }
}

Gehen wir das mal durch. Unsere Klasse heißt "Schrottcode_CompareSidebarImages_Helper_Compare". Wie wir wissen bestimmen wir damit den aufenthaltsort der Klasse ( "Schrottcode/CompareSidebarImages/Helper/Compare.php" ). Unsere Klasse erweitert die bestehende Klasse "Mage_Catalog_Helper_Product_Compare". Das bedeutet, uns stehen alle Funktionen der alten Compare Klasse zur verfügung mit dem unterschied, dass wir nun gezielt Methoden hinzufügen und überschreiben können ohne die Originaldatei anrühren zu müssen.

Als nächstes wurde die Funktion "getItemCollection()" erstellt. Diese habe ich einfach aus der Originalklasse herauskopiert und in unsere Datei eingefügt. Nun können wir diese Funktion so verändern, dass Sie auch Bilder mit aus der Datenbank ausließt.

Dazu müssen wir Zeile 26 etwas ändern. Dort werden die Produkte ausgelesen die in der Compare Sidebar sind. Unser Bild wird geladen in dem wir den Aufruf von "->addAttributeToSelect('image')" ergänzen. Danach sollte es dann so aussehen

    $this->_itemCollection->addAttributeToSelect('name')
                ->addAttributeToSelect('image')
                ->addUrlRewrite()
                ->load();

Das wars jetzt auch schon, jetzt müssen wir uns nurnoch um die Ausgabe kümmern.

Teil 4: Die Ausgabe

Ich fasse nocheinmal schnell zusammen; Wir haben jetzt die Funktionalität des Compare Sidebar Modules erweitert, indem wir es in unserem Plugin die Funktion angepasst haben, die nun das Bild ausließt. Nun müssen wir Magento noch sagen das er unser Plugin verwenden soll anstatt das Original.

Dazu haben wir 2 Möglichkeiten, entweder wir ändern die Original Template Datei und erweitern diese so das Sie das Bild anzeigt, oder wir machen unsere eigene Ausgabe Datei die das Original unberührt lässt. Wir besprechen hier die 2te Variante.

Dazu erstellen wir im Ordner "app/design/frontend/default/[Euer Theme]/template/comparesidebarimages" den wir am anfang angelegt haben die Datei "sidebar.phtml". Diese Datei soll unsere Version der Compare Sidebar erhalten. Dazu kopieren wir den Inhalt der Original "sidebar.phtml" in unsere Datei um diese zu ändern. Die Originaldatei befindet sich im Ordner "app/design/frontend/default/[Euer Theme]/template/catalog/product/compare".

Nachdem wir das erledigt haben, können wir die Datei anpassen. In Zeile 39 - 45 befindet sich die Ausgabe der Produkte die momentan in der Compare Sidebar sind. Und dort wollen wir auch unsere Änderung vornehmen. Hier einmal der Originalausschnitt.

        <?php foreach($this->helper('catalog/product_compare')->getItemCollection() as $_index=>$_item): ?>
            <li class="item">
                <input type="hidden" class="compare-item-id" value="<?php echo $_item->getId() ?>" />
                <a href="<?php echo $this->helper('catalog/product_compare')->getRemoveUrl($_item) ?>" title="<?php echo $this->__('Remove This Item') ?>" class="btn-remove" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the compare products?') ?>');"><?php echo $this->__('Remove This Item') ?></a>
                <p class="product-name"><a href="<?php echo $this->getProductUrl($_item) ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a></p>
            </li>
        <?php endforeach; ?>

Leider sieht der Code hier ein wenig chaotisch aus, aber es sollte trotzdem klar sein was da passiert. Mit der foreach Schleife wird die Produktzusammenstellung abgerufen und anschließend ausgegeben. Jedes Produkt besteht aus 3 Punkten. Einem hidden Feld, dass die Id des Produktes enthält, einen Link um das Produkt von der Liste zu entfernen und einen Link zum Produkt. Ich habe mich dazu entschieden das Bild zwischen dem löschen link und dem Link zum Produkt zu plazieren.

Nun müssen wir dafür sorgen, dass unser Helper verwendet wird anstatt der Originale Helper der das Bild nicht mit ausließt. Dazu ändern wir den Kopf der foreach Schleife folgendermaßen ab. Aus

$this->helper('catalog/product_compare')

machen wir

$this->helper('comparesidebarimages/compare')

Damit wird nun unser Plugin Helper verwendet was es uns ermöglicht das Bild auszulesen.

Um das Bild auszulesen verwenden wir folgenden Befehl:

<img src="<?php echo $this->helper('catalog/image')->init($_item, 'image')->resize( 100, 100 ); ?>" />

Dieses Snippet verwendet den Image Helper von Magento um den Pfad des Bildes zu holen und es anschließend noch zu verkleinern ( sofern dies notwendig ist ). Ich habe hier 100px Höhe und Breite festgelegt. Dieses Snippet kann nun überall innerhalb der foreach Schleife eingebaut werden. Ich habe mich dazu entschieden es zwischen den Löschen Link und dem Link zum Produkt anzeigen zu lassen.
Unsere fertige foreach Schleife sieht dann so aus

        <?php foreach($this->helper('comparesidebarimages/compare')->getItemCollection() as $_index=>$_item): ?>
            <li class="item">
                <input type="hidden" class="compare-item-id" value="<?php echo $_item->getId() ?>" />
                <a href="<?php echo $this->helper('catalog/product_compare')->getRemoveUrl($_item) ?>" title="<?php echo $this->__('Remove This Item') ?>" class="btn-remove" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the compare products?') ?>');"><?php echo $this->__('Remove This Item') ?></a>
               <img src="<?php echo $this->helper('catalog/image')->init($_item, 'image')->resize( 100, 100 ); ?>" />
			   <p class="product-name"><a href="<?php echo $this->getProductUrl($_item) ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a></p>
            </li>
        <?php endforeach; ?>

Kommen wir zu unserer letzten Aufgabe. Wir müssen nun dafür sorgen, dass Magento unsere "sidebar.phtml" läd anstatt dem Original. Dazu bringen wir jetzt die Layout Dateien ins Spiel, diese finden sich im Ordner "app/design/frontend/default/[Euer Theme]/layout/".

Die Layoutdateien sind ebenso wie die Konfigurationsdateien in XML geschrieben. Mit Ihnen wird der komplette aufbau des Shops gesteuert. In Teil 1 dieses Posts haben wir bereits unsere "layout update" Datei definiert, nun legen die "comparesidebarimages.xml" im layout Ordner an und füllen Sie mit folgendem Inhalt:

<?xml version="1.0"?>
<layout version="0.1.0">
	<default>
		<reference name="catalog.compare.sidebar">
			<action method="setTemplate">
				<template>comparesidebarimages/sidebar.phtml</template>
			</action>
		</reference>
	</default>
</layout>

Da die Syntax der Layoutdateien sehr viele Befehle umfasst und nicht immer ganz leicht zu verstehen ist, möchte ich an dieser Stelle nicht weiter darauf eingehen und die Layout Dateien lieber in einem separaten Beitrag behandeln. Für den Moment ist es nur wichtig zu verstehen, dass wir mit diesem Code das Original durch unsere "sidebar.phtml" ersetzen.

So, das wars! Nun können wir unser Plugin testen. Wir wählen einen Artikel aus und fügen diesen der Compare Sidebar hinzu. Wenn alles Stimmt wird das Ergebnis ähnlich dem sein, dass ihr im rechten Bild seht.