Ziel dieses Tutorials ist es, ein einfaches Backend-Modul zu erstellen, welches Sie als Grundlage für eigene Erweiterungen verwenden können.

Um das Beispiel einfach zu halten, greifen wir an dieser Stelle noch nicht auf das ExtJS Framework von Shopware zurück - dieses werden wir in einem späteren Tutorial nachholen.

Aber was soll unser Plugin genau machen?

• Wir wollen, dass das Plugin einen neuen Menüpunkt im Backend erzeugt. Dieser soll die Bezeichnung "HelloWindow" tragen und unterhalb von "Marketing" erscheinen
• Diesen Menüpunkt wollen wir mit einem neuen Backend-Controller verknüpfen, der automatisch aufgerufen werden soll, wenn man den Link anklickt
• Der Backend-Controller soll ein Template laden und es in einem Standard-Shopware-Fenster anzeigen
• In diesem Template soll man per Klick auf eine andere Action des Controllers springen können, die das Haupttemplate erbt und die Hintergrundfarbe ändert

Das Endresultat sieht wie folgt aus:

• Erstellen Sie unterhalb von engine\Shopware\Plugins\Local\ ein neues Verzeichnis mit dem Namen Hello Window
• Legen Sie eine neue Datei Bootstrap.php in diesem Verzeichnis an.

Während der Installation muss das Plugin zwei Dinge erledigen, zum einen wollen wir im Backend-Menü unterhalb des Menüpunkts "Marketing" einen neuen Menüpunk tmit der Bezeichnung "HelloWindow" anlegen. Zum anderen müssen wir definieren, dass wir mit diesem Plugin einen neuen Backend-Controller liefern, den es im Standardumfang von Shopware nicht gibt.

Kümmern wir uns zunächst um die Registrierung des Controllers und erstellen eine erste lauffähige Variante des Beispiels:

Fügen Sie folgenden Code in die Bootstrap.php ein.

 
<?php
class Shopware_Plugins_Backend_HelloWindow_Bootstrap extends Shopware_Components_Plugin_Bootstrap
{
	public function install()
 	{  
 		/*Wenn der Backend-Controller "HelloWindow" angesteuert wird, lokale
 		  Methode: onGetControllerPathBackend aufrufen*/
	  	$event = $this->createEvent(
 		'Enlight_Controller_Dispatcher_ControllerPath_Backend_HelloWindow',
 		'onGetControllerPathBackend'
	 	);
	 	$this->subscribeEvent($event);
	 	return true;
	 }
	 public static function onGetControllerPathBackend(Enlight_Event_EventArgs $args)
    	 {
    	 	die("Der Controller existiert nicht ;)");
    	 }
}
 

Speichern Sie die Datei und führen Sie die folgenden Schritte durch:

• Loggen Sie sich in das Backend ein
• Wechseln Sie über Einstellungen > Plugins in den Plugin-Manager
• Wechseln Sie Links auf Local > Backend
• Installieren & Aktivieren Sie das Plugin "HelloWindow"

Nun testen wir, ob das Plugin korrekt arbeitet.

Hierzu rufen wir die URL www.ihrshop.de/backend/HelloWindow auf. Wie erwartet erhalten wir die Meldung "Der Controller existiert nicht" - diese haben wir ja oben in der Methode "onGetControllerPathBackend" definiert - somit wissen wir, dass Shopware die Route zu unserem Controller korrekt erkennt. Nun können wir mit der eigentlichen Implementierung des Controllers fortfahren.

Zuerst legen wir einige neue Dateien an, die wir gleich benötigen werden.

Erstellen Sie im Verzeichnis "HelloWindow" die Datei "HelloWindow.php" und fügen Sie folgenden Code ein:

 
<?php
class Shopware_Controllers_Backend_HelloWindow extends Enlight_Controller_Action
{
	public function init(){
		$this->View()->addTemplateDir(dirname(__FILE__)."/templates/");
	}
	public function indexAction(){
		$this->View()->loadTemplate("backend/plugins/HelloWindow/index.tpl");
	}
	public function skeletonAction(){
		$this->View()->loadTemplate("backend/plugins/HelloWindow/skeleton.tpl");
	}
	public function changeColorsAction(){
		$this->View()->loadTemplate("backend/plugins/HelloWindow/colors.tpl");
	}
}
?>
 

Erstellen Sie das neue Verzeichnis templates/backend/plugins/HelloWindow unterhalb Ihres Plugin-Verzeichnisses.

Erstellen Sie in diesem Verzeichnis die nachfolgenden Dateien:

skeleton.tpl

 
{
	"init": {
		"title": "{s name='WindowTitle' force}Hello Window{/s}",
		"width": 900,
		"height": 650,
		"id": "coupon",
		"minwidth": 800,
		"minheight": 650,
		"content": "",
		"loader": "action",
		"url": "{url action='index'|escape:'javascript'}",
		"help": ""
	}
}
 

index.tpl

 
{extends file="backend/index/parent.tpl"}
{block name="backend_index_css" append}
	<!-- Common CSS -->
	<link href="{link file='engine/backend/css/icons4.css'}"  rel="stylesheet" type="text/css" />
	<link href="{link file='engine/backend/css/modules.css'}" rel="stylesheet" type="text/css" />
{/block}
{block name="backend_index_body_inline"}
	<fieldset>
	<legend>Hello Window</legend>
	<a href="{url action=changeColors}">Ich sehe Rot!</a>
	</fieldset>
{/block}
 

colors.tpl

 
{extends file="backend/plugins/HelloWindow/index.tpl"}
{block name="backend_index_body_attributes"}style="background-color:#F00"{/block}
 

Um nun den Controller zu laden, ändern wir folgenden Teil unserer Bootstrap.php ab:

Alter Code:

 
public static function onGetControllerPathBackend(Enlight_Event_EventArgs $args)
{
	die("Der Controller existiert nicht ;)");
}
 

Neuer Code:

 
public static function onGetControllerPathBackend(Enlight_Event_EventArgs $args)
{
	return dirname(__FILE__).'/HelloWindow.php';
}
 

Zum Schluss fehlt uns noch die eigentliche Integration in das Backend-Menü:

Ändern Sie hierzu die install Methode des Plugins wie folgt ab:

Fügen Sie unter "$this->subscribeEvent($event);" folgenden Code ein:

 
$parent = $this->Menu()->findOneBy('label', 'Marketing');
$item = $this->createMenuItem(array(
	'label' => 'HelloWindow',
	'onclick' => 'openAction(\'HelloWindow\');',
	'class' => 'ico2 layout',
	'active' => 1,
	'parent' => $parent,
	'style' => 'background-position: 5px 5px;'
));
$this->Menu()->addItem($item);
$this->Menu()->save();
 

Hiermit erzeugen wir unterhalb von Marketing den neuen Menüpunkt "Hello Window" und verknüpfen diesen mit unserem neu angelegten Controller.

Da wir die Installationsmethode des Plugins geändert haben, müssen wir dieses kurz erneut registrieren. Dazu führen wir über den Plugin-Manager die Deinstallation des Plugins durch und installieren es anschließend neu.

Wenn wir nun das Backend neu laden, sollte der Menüpunkt "Hello Window" unterhalb von Marketing auftauchen.

Doch wie funktioniert das Zusammenspiel der Komponenten nun im Detail?

Im Menü-Eintrag haben wir die onclick-Action des Eintrags mit unserem HelloWindow Controller verknüpft, dazu steht die Javascript-Funktion openAction bereit. Diese ruft im Hintergrund die skeletonAction Methode des definierten Controllers auf.

Die Skeleton-Action lädt ein Json-Gerüst mit den Eigenschaften des Backend-Fensters, welches wir erstellen wollen.

 
{
	"init": {
		"title": "{s name='WindowTitle' force}Hello Window{/s}",
		"width": 900,
		"height": 650,
		"id": "coupon",
		"minwidth": 800,
		"minheight": 650,
		"content": "",
		"loader": "action",
		"url": "{url action='index'|escape:'javascript'}",
		"help": ""
	}
}
 

Hier werden also z.B. die Bezeichnung des Fensters und die Proportionen definiert. Die wichtigsten Komponenten sind die loader und url Eigenschaften.

Über den loader "action" definieren wir, das wir das Ergebnis einer weiteren Action in diesem Fenster anzeigen möchten, in diesem Fall der indexAction.

Das Fenster beeinhaltet also ein iFrame, welches automatisch die korrekte URL zur Anzeige der indexAction unseres HelloWindow Controllers einbindet.

Die indexAction lädt das Template index.tpl

 
{extends file="backend/index/parent.tpl"}
{block name="backend_index_css" append}
	<!-- Common CSS -->
<link href="{link file='engine/backend/css/icons4.css'}"  rel="stylesheet" type="text/css" />
<link href="{link file='engine/backend/css/modules.css'}" rel="stylesheet" type="text/css" />
 
{/block}
{block name="backend_index_body_inline"}
<fieldset>
<legend>Hello Window</legend>
<a href="{url action=changeColors}">Ich sehe Rot!</a>
</fieldset>
{/block}
 

Dieses Template erweitert index/parent.tpl - das ist das Grundgerüst vieler Standard Shopware Backend-Module und lädt die wichtigsten CSS- und Javascript-Dateien automatisch.

In dieses Template integrieren wir dann ein Fieldset, welches einen Link auf eine weitere Action des gleichen Controllers enthält.

Die changeColorsAction lädt schließlich das Template "colors.tpl".

Dieses leitet sich von unserem gerade definiertem index.tpl Template ab und ändert die Hintergrund-Farbe des Body-Containers.

Zum Schluss noch eine kurze Zusammenfassung des Workflows:

• indexAction lädt die index.tpl unseres Plugins
• Die index.tpl unseres Plugins erbt die Eigenschaften der Datei backend\index\parent.tpl aus dem Shopware-Backend und damit einige Default-Stylesheets
• In der index.tpl gibt es einen Link, der die Action colorChange aus unserem Controller aufruft
• In dieser Action laden wir nun die Datei colors.tpl
• Colors.tpl erbt die Eigenschaften unserer index.tpl und überschreibt den Body-Block des Parent-Templates - somit können wir hier sehr einfach die Hintergrund-Farbe manipulieren

Natürlich stellt das Shopware Backend weitaus mehr Möglichkeiten bereit, als das wir diese alle in einem Tutorial behandeln könnten. Wir werden in Zukunft weitere Tutorials zum Thema Backend-Module veröffentlichen.