Statt des fast schon obligatorischen "Hello World" Tutorials, widmen wir uns im heutigen Tutorial einem etwas komplexeren Thema ;)

Wir möchten einen Twitter-Activity Feed auf der linken Seite des Shops integrieren. Dieser soll sich bequem über das Backend konfigurieren lassen.

Um einen kleinen Vorgeschmack auf das zu geben, was wir vorhaben, hier zunächst ein Screenshot des Endresultats.

Im Backend soll das Plugin wie folgt konfigurierbar sein:

Wie im vorherigen Tutorial erstellen wir zunächst das Grundgerüst des Plugins.

• Erstellen Sie zunächst den Ordner engine\Shopware\Plugins\Community\Frontend\Twitter
• Legen Sie in diesem Ordner eine neue, leere Datei Bootstrap.php an.

Fügen Sie folgenden Code in diese Datei ein:

 
<?php
class Shopware_Plugins_Frontend_Twitter_Bootstrap extends Shopware_Components_Plugin_Bootstrap
{
	public function install()
	{		
		$event = $this->createEvent(
	 		'Enlight_Controller_Action_PostDispatch_Frontend_Index',
	 		'onPostDispatchIndex'
	 	);
		$this->subscribeEvent($event);
 
		$form = $this->Form();
		$form->setElement('text', 'user', array('label'=>'Benutzername','value'=>''));
		$form->setElement('checkbox', 'scrollbar', array('label'=>'Scrollbar anzeigen','value'=>true));
		$form->setElement('checkbox', 'live', array('label'=>'Nach neuen Ergebnissen suchen','value'=>true));
		$form->setElement('checkbox', 'hashtags', array('label'=>'Hashtags anzeigen','value'=>true));
		$form->setElement('checkbox', 'timestamp', array('label'=>'Timestamp anzeigen','value'=>true));
		$form->setElement('checkbox', 'avatars', array('label'=>'Avatare anzeigen','value'=>false));
		$form->save();
 
	 	return true;
	}
 
	public static function onPostDispatchIndex(Enlight_Event_EventArgs $args)
	{
	}
}
 

In der Installationsmethode erzeugen wir zunächst einen Event der nach der Ausführung der Startseite (Controller: Frontend/Index) aufgerufen wird. Das Twitter Plugin wird also nur auf der Startseite aktiv, wenn das Plugin immer aktiv sein soll, würde man wie im vorherigen Tutorial vorgehen und sich am Event "Enlight_Controller_Action_PostDispatch" anmelden.

 
$form = $this->Form();
$form->setElement('text', 'user', array('label'=>'Benutzername','value'=>''));
$form->setElement('checkbox', 'scrollbar', array('label'=>'Scrollbar anzeigen','value'=>true));
$form->setElement('checkbox', 'live', array('label'=>'Nach neuen Ergebnissen suchen','value'=>true));
$form->setElement('checkbox', 'hashtags', array('label'=>'Hashtags anzeigen','value'=>true));
$form->setElement('checkbox', 'timestamp', array('label'=>'Timestamp anzeigen','value'=>true));
$form->setElement('checkbox', 'avatars', array('label'=>'Avatare anzeigen','value'=>false));
$form->save();
 

Wie wir im zweiten Screenshot gesehen haben, wollen wir dem Shopbetreiber eine einfache Konfiguration direkt im Backend anbieten. Diese Konfigurationsoberfläche kann mit wenigen Zeilen Code direkt im Plugin erstellt werden.

Zunächst erzeugen wir eine Instanz des Objekts "Form" - dieses ermöglicht es uns, die Konfigurationsfelder zu definieren, die dieses Plugin anbieten soll.

 
$form->setElement('text', 'user', array('label'=>'Benutzername','value'=>''));
 

Nachfolgend fügen wir via setElement die verschiedenen Eingabeboxen für die Konfiguration hinzu. Der erste Parameter steuert den Typ des Formularfeldes, derzeit werden folgende Typen unterstützt:

• text
• textarea
• checkbox

Der zweite Parameter definiert den Namen / Key des Eingabefeldes, über diesen Key können wir die Konfiguration später wieder auslesen. Der dritte Parameter steuert das Label und den Standardwert des Feldes.

 
$form->save();
 

Ganz zum Schluss rufen wir die ->save(); Methode des Objekts auf, um die Änderungen dauerhaft in die Datenbank zu übernehmen.

Wenn das Grundgerüst nun im Plugin-Manager installieren & aktivieren, sehen wir das die Konfigurationsfelder automatisch erzeugt und übernommen worden sind.

Damit sind alle vorbereitenden Arbeiten abgeschlossen und wir können uns auf die Programmierung der eigentlichen Logik konzentrieren.

Eine der großen Stärken des Plugin-Systems, ist die Vererbungstechnik für Templates. So können wir die Twitter-Box integrieren, ohne die Original-Templates anpassen zu müssen und ohne Probleme mit der Updatefähigkeit des Shops zu bekommen. Außerdem kann der Shopbetreiber das Plugin dann jederzeit deaktivieren ohne das jemand dazu manuell in den Templatecode eingreifen zu müssen.

Zunächst einmal benötigen wir das Grundgerüst des Twitter-Profil-Widgets, dieses können wir automatisch auf http://twitter.com/goodies/widget_profile generieren.

Diesen Code nehmen wir als Grundlage für die weitere Integration.

Als nächstes legen wir eine leere Datei an, die wir gleich dazu verwenden, das Original-Template zu verändern.

Erstellen Sie hierzu das Verzeichnis templates\frontend\plugins\twitter im Plugin-Verzeichnis der Erweiterung.

Der vollständige Pfad lautet also engine\Shopware\Plugins\Community\Frontend\Twitter\templates\frontend\plugins\twitter

In diesem Ordner legen Sie nun die neue Datei index.tpl an und fügen dort folgenden Code ein:

 
{block name="frontend_index_left_last_articles" append}
<div class="doublespace"></div>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#d4eef9',
      color: '#777777',
      links: '#009de0'
    }
  },
  features: {
    scrollbar: {if $TwitterConfig->scrollbar}true{else}false{/if},
    loop: false,
    live: {if $TwitterConfig->live}true{else}false{/if},
    hashtags: {if $TwitterConfig->hashtags}true{else}false{/if},
    timestamp: {if $TwitterConfig->timestamp}true{else}false{/if},
    avatars: {if $TwitterConfig->avatars}true{else}false{/if},
    behavior: 'all'
  }
}).render().setUser('{$TwitterConfig->user|escape:javascript}').start();
</script>
{/block}
 

Was macht dieser Code?

 
{block name="frontend_index_left_last_articles" append}
 

Zunächst einmal definieren wir, dass wir den Template-Block "frontend_index_left_last_articles" erweitern möchten. Der Blockname verrät uns wo das Original-Template versteckt ist, welches diesen Block enthält.

Das Original-Template befindet sich also im Verzeichnis \templates\_default\frontend\index\left.tpl

In dieser Datei ist der Original-Block wie folgt definiert:

 
{* Last articles *}
{block name='frontend_index_left_last_articles'}
	{if $sLastArticles}
		{include file="frontend/plugins/index/viewlast.tpl" sLastArticles=$sLastArticles}
	{/if}
{/block}
 

In diesem Block werden also standardmäßig die zuletzt angesehenen Artikel ausgegeben.

Durch das "append" steuern wir, dass wir unseren eigenen Code hinter dem Original-Code des Blocks ausgeben wollen.

Weitere Optionen sind hier:

• replace > Originalcode ersetzen
• prepend > Unseren Code vor dem Originalcode einsetzen

Die Konfigurationsanweisungen des Widgets werden in diesem Beispiel bereits aus Smarty-Variablen geladen

 
{if $TwitterConfig->scrollbar}true{else}false{/if}
 

Diese werden wir im nächsten Step mit Daten füllen.

Wenn Sie den Shop nun neu aufrufen werden Sie feststellen, dass sich nichts verändert hat. Wir müssen Shopware noch mitteilen, dass wir das Template verändern / erweitern wollen.

Wir hatten im Einstieg ja nur das Grundgerüst des Plugins angelegt, die Methode "onPostDispatchIndex" ist noch komplett leer und wird nun mit Daten befüllt.

Fügen Sie folgenden Code in die Methode ein:

 
	$view = $args->getSubject()->View();
	$config = Shopware()->Plugins()->Frontend()->Twitter()->Config();
 
	$view->TwitterConfig = $config;
	$view->addTemplateDir(dirname(__FILE__).'/templates/');
	$view->extendsTemplate('frontend/plugins/twitter/index.tpl');		
 

Zunächst einmal erzeugen wir eine Referenz auf das View - Objekt des Controllers, dieses benötigen wir zur Ansteuerung von Smarty. Diese Referenz benötigen wir, da wir Smarty ja noch die Konfiguration übergeben müssen, damit das Twitter-Plugin im Template die notwendigen Daten hat.

 
$config = Shopware()->Plugins()->Frontend()->Twitter()->Config();
 

Als nächstes Erzeugen wir eine Referenz auf die Konfiguration des Plugins. Diese beeinhaltet alle Einstellungen, die man im Backend zu diesem Plugin konfigurieren kann.

 
$view->TwitterConfig = $config;
 

Nun wird die Frage beantwortet, wie das Template an die Konfiguration kommt ;) Wir erzeugen die neue Smarty-Variable {$TwitterConfig} und ordnen dieser das Config-Objekt zu. Alternativ könnte man hier auch $view->assign('TwitterConfig',$config); schreiben.

Jetzt müssen wir Shopware nur noch mitteilen, dass wir ein eigenes Template in den Shop laden möchten.

 
$view->addTemplateDir(dirname(__FILE__).'/templates/');
$view->extendsTemplate('frontend/plugins/twitter/index.tpl');
 

Mit addTemplateDir fügen wir das Template-Verzeichnis unseres Plugins hinzu. Shopware nutzt alle so hinzugefügten Verzeichnisse, um selbstständig Vererbungen zu erkennen. Man könnte also statt der im Original-Template nicht vorhandenen Datei plugins/twitter/index.tpl auch eine dort existierende Datei erstellen. Shopware erkennt diese neue Datei und würde diese statt der Originaldatei in das Template einbinden.

 
$view->extendsTemplate('frontend/plugins/twitter/index.tpl');
 

Nun kommt die letzte Komponente hinzu. Shopware kennt jetzt unser eigenes Template-Verzeichnis. Wir haben dem System aber noch nicht mitgeteilt, das wir dort eine neue Template-Datei abgelegt haben, die bestehende Blöcke verändern soll.

Über extendsTemplate fügen wir also eine Referenz auf unser Twitter-Template hinzu.

Fertig!

Wir müssen nun nur noch korrekte Daten in der Plugin-Konfiguration hinterlegen und den Template-Cache leeren, anschließend taucht unsere Twitter-Profil-Box korrekt unterhalb der linken Spalte auf.

Ein wichtiger Hinweis zum Schluss:

extendsTemplate bezieht sich nicht auf eine bestimmte bestehende Template-Datei! Wir können also z.B. eine zentrale Template-Datei erstellen, mit der wir beliebige Blöcke aus beliebigen Templates überschreiben können. Man muss also nicht für jede Block-Änderung separate Dateien erstellen, sondern kann alle Anpassungen bequem in einer Datei kombinieren!

Da Schwarz nicht jedermanns Sache ist, wäre es eine gute Hausaufgabe wenn Sie nun das Farbschema des Plugins ebenfalls konfigurierbar gestalten. Alle dazu notwendigen Komponenten haben Sie heute kennengelernt.