Seit Shopware 3.5.4 verfügt das Backend über eine leistungsfähige Widget-Ansicht. Jeder Shopbetreiber kann sich von jetzt an seine individuelle Startseite mit beliebigen Fenstern (Widgets) im Baukastensystem individuell zusammenstellen, was einen leichten und passgenauen Überblick über alle relevanten Daten ermöglicht. Die Widgets selbst basieren vollständig auf ExtJS 4.0, das in der neuen Shopware-Version standardmäßig mitgeliefert wird. Die Widget-Konfigurationen, also die benutzerindividuellen Startseiten und Einstellungen, werden in zwei XML-Dateien im Verzeichnis /files/config gespeichert. Neben den mitgelieferten Standard-Widgets besteht die Möglichkeit, eigene Widgets über das Plugin-System hinzuzufügen. In diesem Tutorial zeigen wir Ihnen, wie genau das funktioniert.

Die Programmierung von Widgets kann vollständig über das Shopware-Plugin-System vorgenommen werden. Hierzu stellt das Objekt "Shopware_Components_Plugin_Bootstrap" die neue Methode "createWidget" zur Verfügung.

Diese Funktion kann in der Install-Methode eines Plugins beliebig oft aufgerufen werden.

 
public function install(){
$this->createWidget(
	'MeinTest',	// Unique name
	'Zeigt Test als HTML-Message',	// Description
	array(
		"timeBack" =>array("type"=>"text","value"=>"30","name"=>"timeBack","label"=>"Range in days for comparision","isRequired"=>true),
		"refresh" =>array("type"=>"text","value"=>"600","name"=>"refresh","label"=>"Refresh Interval in seconds","isRequired"=>false),
	),
	'backend/plugins/widgets/widgetTest.tpl',
	dirname(__FILE__)."/Views/"
);
return true;
}
 

Parameter-Beschreibung:

• 1 Parameter = Eindeutiger Name des Widgets (ohne Leerzeichen)
• 2 Parameter = Widget-Beschreibung
• 3 Parameter = Array mit den Konfigurationsfeldern des Widgets (Syntax analog zur Plugin-Konfiguration)
• 4 Parameter = Name der Template-Datei, in der der Widget-Javascript-Code definiert ist
• 5 Parameter = Definition Template-Verzeichnis

In diesem Tutorial entwickeln wir ein Chart-Widget, welches die Verteilung des Umsatzes zwischen den Kundengruppen prozentual in einem Kreisdiagramm anzeigt.

Als Konfigurationsoption soll man den Aktualisierungsinterval des Widgets einstellen können.

Legen Sie das Verzeichnis engine/Shopware/Plugins/Community/Backend/ChartWidget und die folgenden Unterverzeichnisse an:

• Controllers/Backend = Hier legen wir den Controller ab, aus dem das Widget die Umsatzzahlen abruft
• Views/backend/plugins/widgets = Hier legen wir den Javascript-Code für unser Widget ab

Legen Sie die folgenden Dateien an:

• Direkt unter ChartWidget/ Bootstrap.php < Installationsdatei für das Plugin
• Controllers/Backend/ChartWidgetStore.php < Controller für unser Widget
• Views/backend/plugins/widgets/widgetChart.tpl < Javascript-Code für unser Widget

Widgets werden ganz einfach über das Plugin-System installiert.

Kopieren Sie folgenden Code in die Bootstrap.php des ChartWidget-Plugins:

 
<?php
/**
 * Chart Test-Widget
 *
 * @link http://www.shopware.de
 * @copyright Copyright (c) 2011, shopware AG
 * @author Stefan Hamann
 * @package Shopware
 * @subpackage Plugins
 */
class Shopware_Plugins_Backend_ChartWidget_Bootstrap extends Shopware_Components_Plugin_Bootstrap
{
	/**
	 * Install shopware default widgets
	 * @return bool
	 */
	public function install()
	{
		// Controller to load data from
		$event = $this->createEvent(
		'Enlight_Controller_Dispatcher_ControllerPath_Backend_ChartWidgetStore',
		'onGetControllerPathBackend'
		);
		$this->subscribeEvent($event);
 
		// Conversion Rate
		$this->createWidget(
			'ChartWidget',	// Unique name
			'Simple Pie-Chart that shows revenue for customergroups',	// Description
			array(
				"refresh" =>array("type"=>"text","value"=>"600","name"=>"refresh","label"=>"Refresh Interval in seconds","isRequired"=>false),
			),
			'backend/plugins/widgets/widgetChart.tpl',
			dirname(__FILE__)."/Views/"
		);
		return true;
	}
 
	/**
	 * Adding controller to get widget data (json)
	 * @static
	 * @param Enlight_Event_EventArgs $args
	 * @return string
	 */
	public static function onGetControllerPathBackend(Enlight_Event_EventArgs $args){
		$file = dirname(__FILE__)."/Controllers/Backend/ChartWidgetStore.php";
		if (!is_file($file)){
			die("File $file not found");
		}
		return $file;
	}
 
	/**
	 * Get-Version of plugin
	 * @return string
	 */
	public function getVersion(){
		return "1.0.0";
	}
 
	/**
	 * Get Plugin Meta-data
	 * @return array
	 */
	public function getInfo(){
		return array(
    		'version' => $this->getVersion(),
			'autor' => 'shopware AG',
			'copyright' => 'Copyright © 2011, shopware AG',
			'label' => 'Shopware Chart Test',
			'source' => $this->getSource(),
			'description' => '',
			'license' => '',
			'support' => 'http://wiki.shopware.de/',
			'link' => 'http://www.shopware.de/'
    	);
	}
}
 

In der Bootstrap definieren wir die Attribute des neuen Widgets. In einem Plugin können in einem Schritt beliebig viele neue Widgets hinzugefügt werden.

Da die Widgets ihre Daten per Json / Ajax beziehen, fügen wir noch einen neuen Controller hinzu, in dem wir die Daten entsprechend aufbereiten.

Kopieren Sie folgenden Code in die Controller-Datei unter Controllers\Backend\ChartWidgetStore.php

 
<?php
/**
 * Shopware default widgets - data bridge
 *
 * @link http://www.shopware.de
 * @copyright Copyright (c) 2011, shopware AG
 * @author Stefan Hamann
 * @package Shopware
 * @subpackage Plugins/Widgets
 */
class Shopware_Controllers_Backend_ChartWidgetStore extends Enlight_Controller_Action
{
	/**
	 * Method to retrieve shop amount statistics
	 * @return void
	 */
	public function getAmountAction(){
		$this->View()->setTemplate();
 
		$id = $this->Request()->id;
		if (empty($id)){
			throw new Enlight_Exception("Empty id");
		}
		$panelModel = new Shopware_Models_Widgets_Panel(md5($_SESSION["Shopware"]["Auth"]->id));
		$config = $panelModel->getWidgetConfiguration($id);
 
		$sql = "
		SELECT
			SUM(invoice_amount/currencyFactor) AS `amount`,
			s_core_customergroups.description AS `name`
		FROM `s_order`, `s_user`,`s_core_customergroups`
		WHERE
			s_order.status != 4
		AND
			s_order.status != -1
		AND 
			s_order.userID = s_user.id 
		AND 
			s_user.customergroup = s_core_customergroups.groupkey
		GROUP BY s_core_customergroups.groupkey
		";
 
		$result = Shopware()->Db()->fetchAll($sql);
 
		foreach ($result as &$row){
			$row["amount"] = round($row["amount"],0);
			$row["name"] = utf8_encode($row["name"]);
		}
		if (count($result) == 1) $result = array();
		echo Zend_Json::encode(array("data"=>$result));
	}
 
}
 

Die in diesem Controller definierte Action dient als Data-Store für die Chart-Komponente. Das Chart bezieht die Daten zur Laufzeit per Ajax-Request im Json-Format. Die Methode ruft also die Umsätze gruppiert nach Kundengruppe aus der Datenbank ab und gibt das Ergebnis als Json-String zurück.

Die Zeilen:

 
$panelModel = new Shopware_Models_Widgets_Panel(md5($_SESSION["Shopware"]["Auth"]->id));
		$config = $panelModel->getWidgetConfiguration($id);
 
 

werden im Beispiel nicht benötigt - darüber kann man die Benutzerindividuelle Konfiguration des Widgets abfragen, um zum Beispiel dynamisch Parameter in die Query einzubauen.

Das Widget selbst besteht einfach aus einem Javascript-Code, der per Smarty geparsed und zur Laufzeit dynamisch in das Panel-System integriert wird.

Auf diese Weise lassen sich beliebige ExtJS-Komponenten im Widget-System verwenden, in unserem Fall ein Pie-Chart, aber auch einfache HTML-Darstellungen, SVG, WebGL, Grids und Formulare können so standardmäßig verwendet werden.

 
{if 1 != 1}<script>{/if}
Ext.define('Swag.Widget.{$item}',
{
	extend: 'Ext.panel.Panel',
	initComponent: function(){
		{if $widget.configuration.refresh}
			this.task = {
				run: this.refreshComponent,
				scope:this,
				interval: {$widget.configuration.refresh * 1000}
			};
			Ext.TaskManager.start(this.task);
		{/if}
 
 
		Ext.regModel('Amount',{
			fields: [
				// set up the fields mapping into the xml doc
				// The first needs mapping, the others are very basic
				'amount','name'
			]
		});
		// create the Data Store
		this.store = Ext.create('Ext.data.Store', {
			autoLoad: true,
			proxy: {
				// load using HTTP
				type: 'ajax',
				model: 'Amount',
				url: '{url controller=ChartWidgetStore action=getAmount id=$widgetUid}',
				// the return will be XML, so lets set up a reader
				reader: {
					type: 'json',
					root: 'data'
				}
			}
		});
		this.store.load();
 
		Ext.apply(this, {
					layout: 'fit',
					width: 550,
					height: 250,
					items: {
						xtype: 'chart',
						animate: true,
						width: 450,
						padding: '5 5 5 5',
						store: this.store,
						animate: true,
						shadow: true,
						theme: 'Base:gradients',
						insetPadding: 60,
						legend: {
							position: 'right',
							labelFont: '8px Arial'
						},
						series: [{
			                type: 'pie',
			                field: 'amount',
			                showInLegend: true,
			                tips: {
			                  trackMouse: true,
			                  width: 140,
			                  height: 28,
			                  renderer: function(storeItem, item) {
			                    //calculate percentage.
			                    var total = 0;
 
			                    this.setTitle(storeItem.get('name') + storeItem.get('amount') );
			                  },
			                  scope: this
			                },
			                highlight: {
			                  segment: {
			                    margin: 20
			                  }
			                },
			                label: {
			                    field: 'name',
			                    display: 'rotate',
			                    contrast: true,
			                    font: '12px Arial'
			                }
			            }]
 
					}
				});
 
		this.callParent(arguments);
	},
	refreshComponent: function(){
		this.store.load();
	}
}
);
 

In diesem Beispiel sehen Sie außerdem, wie man auf die Plugin-Konfiguration aus dem Template heraus zugreifen kann und wie der Auto-Reload der Widgets funktioniert.

=== Widget ausprobieren ===

Wechseln Sie nun einfach in den Plugin-Manager und installieren Sie das Test-Plugin. Anschließend können Sie das neue Widget auf der Backend-Startseite hinzufügen.

Auf identische Weise lässt sich so auch ein Grid im Widget-System darstellen, hierzu müssen nur die Javascript-Komponente des Widgets und die Controller-Rückgabe leicht angepasst werden.

Ändern Sie die Rückgabe der Methode "getAmountAction" in:

 
echo Zend_Json::encode(array("data"=>$result,"total"=>count($result)));
 

Das Grid benötigt die Anzahl der Datensätze, die im Store bereitstehen

Die Grid-Komponente extended sich von Ext.grid.Panel, statt Ext.panel.Panel - ändern Sie diese Definition in Zeile 4 des Widget-Templates.

 
extend: 'Ext.grid.Panel',
 

Anschließend müssen wir noch die Attribute der Komponente austauschen - im vorherigen Beispiel haben wir ja eine Chart-Komponente instanziert, nun möchten wir ein Grid darstellen - hierzu sind andere Konfigurationsanweisungen notwendig.

Ersetzen Sie den Block

 
Ext.apply (this,......)...
 

durch:

 
 Ext.apply(this, {
            height: 300,
            store: this.store,
            stripeRows: true,
            columnLines: true,
            columns: [{
                text   : 'Umsatz',
                width: 150,
                dataIndex: 'amount'
            },{
                text   : 'Kundengruppe',
                flex   : 1,
                dataIndex: 'name'
            }
			]
        });
 

Fertig! Wenn Sie das Backend nun neu laden, erhalten Sie eine Grid-Darstellung der Kundengruppen-Umsätze wie im Screenshot.

Sie können natürlich auch problemlos beide Widgets in einem Plugin verwalten, legen Sie dazu einfach eine eigene Template-Datei für das Grid-Widget an.

Weitere Beispiele finden Sie in den Standard-Widgets, die mit jeder Shopware-Installation ausgeliefert werden. Diese stehen quelloffen im Verzeichnis engine/Shopware/Plugins/Default/Backend/Widgets zur Verfügung.