Hack, Plug, Play

Plug-ins mit Shopware
Kommentare

Bei einem guten Shopsystem ist es ein wenig so wie bei einem Lego-Baukasten: Je mehr Erweiterungen es gibt und je einfacher diese zu programmieren sind, desto besser. Wohl deshalb (und natürlich, weil Lego auch bei Shopware kein Fremdwort ist) hat sich der westfälische Shopsystemhersteller eine einfache Erweiterbarkeit seines Systems mithilfe von verschiedensten Plug-ins auf die Fahnen geschrieben. Mittlerweile tummeln sich im Shopware Community Store; dem zentralen Marktplatz für alle Shopware-Erweiterungen, dutzende von Fremdanbietern, die alle ihren Teil zur Funktionsvielfalt der Software beitragen. Der folgende Artikel soll anhand eines Beispiels verdeutlichen, wie im Handumdrehen ein Plug-in entsteht.

Shopware ist ein dual lizenziertes Shopsystem, das sowohl in einer unter AGPL v3 lizenzierten Open-Source-Version, als auch in drei abgestuften kommerziellen Varianten zur Verfügung steht. Das System ist modular aufgebaut, bietet schon im Standard umfangreiche Marketingfunktionen und ist durch seine offene Architektur in allen Bereichen, von der Administration bis zur Storefront, an individuelle Bedürfnisse anpassbar.

Zum Verständnis: Die Erweiterbarkeit von Shopware basiert auf einem Event- und Hooksystem. Unter Events versteht man feste Einstiegspunkte im Quelltext von Shopware, die von Plug-ins genutzt werden können, um zum Beispiel weitere Inhalte der Storefront zur Verfügung zu stellen. Hooks hingegen bieten einem die Möglichkeit, den Shopware-Sourcecode direkt zu bearbeiten, ohne dabei die Updatefähigkeit des Systems zu beeinträchtigen.

Bootstrapping eines Plug-ins

Wir werden Ihnen nun anhand eines kleinen Beispiels zeigen, wie schnell und einfach die Entwicklung von Shopware-Plug-ins ist. Funktion des Beispiel-Plug-ins soll es sein, das Logo eines Shops mit einem Slogan auszutauschen. Die Slogans sollen dann im zweiten Teil über die Plug-in-Konfiguration einstellbar sein.

Um ein neues Plug-in zu erstellen, muss zunächst ein Plug-in-Verzeichnis angelegt werden, in dem die Plug-in-Komponenten definiert werden. Dieses Verzeichnis wird als Unterordner in engine/Shopware/Plugins/Local/Frontend erzeugt. Als Verzeichnisname wird der Name des Plug-ins gesetzt: SloganOfTheDay. Damit Shopware das Plug-in erkennt, wird zunächst eine Bootstrap-Datei benötigt. Diese Datei ist der Einstiegspunkt für jegliche Plug-in-Aktionen. Die Bootstrap-Datei muss in der ersten Ebene des Plug-in-Ordners liegen und als Dateinamen Bootstrap.php besitzen. Zunächst wird der Bootstrap-Rumpf definiert:

<?php
class Shopware_Plugins_Frontend_SloganOfTheDay_Bootstrap extends  Shopware_Components_Plugin_Bootstrap {
}

Der Klassenname des Bootstrap setzt sich aus dem Shopware Namespace für Plug-ins (Shopware_Plugins), dem Plug-in-Bereich (Frontend, Backend oder Core), dem Plug-in-Namen (SloganOfTheDay) und dem Dateinamen (Bootstrap) zusammen. So wird das Plug-in korrekt erkannt und im Plug-in-Manager angezeigt (Abb. 1).

Abb. 1: Hier sehen Sie das Plug-in wie es im Plug-in-Manager dargestellt wird

Abb. 1: Hier sehen Sie das Plug-in wie es im Plug-in-Manager dargestellt wird

Damit das Plug-in installiert werden kann, muss nun die install-Funktion des Plug-ins implementiert werden:

public function install() {
  return true;
}

Durch den Rückgabewert true wird mitgeteilt, dass die Installation erfolgreich durchgeführt wurde. Für die Anzeige des Slogans in der Storefront wird ein Event registriert.

Wussten Sie schon?

Shopware beinhaltet ein Eventsystem, das es Plug-ins ermöglicht, an verschiedensten Stellen im System einzusteigen und Prozesse z. B. zu verhindern, umzuleiten oder Erweiterungen zu laden.

Event-driven Die Registrierung eines Events kann über die Helferfunktion subscribeEvent implementiert werden. Diese erwartet als Parameter den Event- und den Funktionsnamen im Bootstrap, der beim Auftreten des Events aufgerufen werden soll. Hier wird nun das Event Enlight_Controller_Action_PostDispatch_Frontend_Index registriert. Dieses tritt auf, sobald der Benutzer die Startseite der Storefront aufruft. Das Event setzt sich aus dem Shopware Namespace für Controller-Funktionen (Enlight_Controller_Action), der Funktion des Controllers (PostDispatch), dem Bereich des Controllers (Frontend) und dem Namen des Controllers (Index) zusammen:

public function install() {
  $this->subscribeEvent(
    'Enlight_Controller_Action_PostDispatch_Frontend_Index',
    'onPostDispatchIndex'
  );
  return true;
}

Als Event-Listener-Funktion dient die Funktion onPostDispatchIndex:

public function onPostDispatchIndex(Enlight_Event_EventArgs $arguments) {
  $view = $arguments->getSubject()->View();
  $view->addTemplateDir($this->Path() . 'Views/');
  $view->extendsTemplate('frontend/plugins/slogan_of_the_day/index.tpl');
  $view->assign('slogan', $this->getRandomSlogan());
}

protected function getRandomSlogan() {
  return 'No slogans configured';
}

In der Event-Listener-Funktion wird zunächst das Template über die Funktion $arguments->getSubject()->View(); ermittelt. Anschließend wird das Views-Verzeichnis unseres Plug-ins als zusätzliches Templateverzeichnis hinzugefügt: $view->addTemplateDir($this->Path() . ‚Views/‘); Aus diesem Verzeichnis kann nun über die Funktion $view->extendsTemplate(…) die Templateerweiterung geladen werden. Die Funktion extendsTemplate lädt nun die frontend/plugins/slogan_of_the_day/index.tpl-Datei und ersetzt die darin definierten Inhalte im Standardtemplate. Zuletzt wird noch der anzuzeigende Slogan an das Template übergeben. Hierfür kann die Funktion assign verwendet werden: $view->assign(’slogan‘, $this->getRandomSlogan());. Damit das Template geladen werden kann, wird dieses im Plug-in-Verzeichnis Views/frontend/plugins/slogan_of_the_day/index.tpl angelegt. In der Templatedatei wird der folgende Sourcecode für die Anzeige des Slogans eingefügt:

{block name="frontend_index_logo"}

{$slogan}

{/block}

Shopware verwendet als Templatesystem das Framework Smarty. Dieses ermöglicht die Definition von Blöcken im Template. Diese Blöcke ermöglichen es, Inhalte vor bzw. nach einem solchen Block einzufügen oder sogar ganze Blöcke mit neuem Inhalt zu befüllen.

In diesem überschriebenen Smarty-Block wird nun der aus dem Plug-in zur Verfügung gestellte Slogan in einer Überschrift angezeigt (Abb. 2).

Abb. 2: Sie sehen die modifizierte Kopfzeile der Storefront

Abb. 2: Sie sehen die modifizierte Kopfzeile der Storefront

Einfach und schnell konfiguriert

Damit die Slogans nicht fest im Sourcecode hinterlegt werden, muss noch eine Möglichkeit geschaffen werden, die Slogans zu konfigurieren. Dafür bietet sich die Plug-in-Konfiguration an. Ein Konfigurationsformular kann in der install-Funktion des Plug-in-Bootstrap initialisiert werden:

public function install() {
  $form = $this->Form();
  ...
}

Nachdem das Formular initialisiert wurde, können diesem nun Felder über die Funktion setElement zugewiesen werden:

public function install() {
  $form = $this->Form();
  $form->setElement('textarea', 'slogans', array('label' => 'Slogans'));
  ...
}

Die Slogans können nun in einem Textfeld konfiguriert werden.

Abb. 3: Die Plug-in-Konfiguration wird auf der Detailseite des Plug-ins dargestellt

Abb. 3: Die Plug-in-Konfiguration wird auf der Detailseite des Plug-ins dargestellt

Damit jedoch mehrere Slogans konfiguriert werden können, müssen diese mit einem Semikolon getrennt angegeben werden. Dies muss dem Benutzer jedoch mitgeteilt werden. Eine Möglichkeit wäre es, die entsprechenden Infos mit in die Beschriftung des Felds aufzunehmen (‚label‘ => ‚Slogans (Mit Semikolon getrennt)‘). Eine schönere Lösung ist es jedoch, die unterstützte Eigenschaft description zu verwenden:

$form->setElement('textarea', 'slogans', array(
  'label' => 'Slogans',
  'description' => 'Geben Sie die Slogans mit einem Semikolon getrennt an (Bsp.: "Slogan 1;Slogan2")',
));

Durch diese Eigenschaft wird in der Plug-in-Konfiguration ein Hilfe-Icon für dieses Feld erstellt, bei dem der hinterlegte Text beim Mouseover angezeigt wird (Abb. 4).

Abb. 4: Durch die Definition einer Beschreibung wird ein Hilfe-Symbol für das Feld angezeigt

Abb. 4: Durch die Definition einer Beschreibung wird ein Hilfe-Symbol für das Feld angezeigt

 

So weiß der Benutzer nun, wie er mehrere Slogans konfigurieren kann. Nun müssen die Slogans noch im Frontend angezeigt werden. Ermittelt werden die Slogans in der Bootstrap-Funktion getRandomSlogan(), die nun wie in Listing 1 angepasst wird.

Listing 1

protected function getRandomSlogan() {
  $slogans = $this->Config()->get('slogans', array());
  if (empty($slogans)) {
    return 'No slogans configured';
  } else {
    $slogans = explode(';', $slogans);
    $index = rand(0, count($slogans) - 1);
    return $slogans[$index];
  }
}

Durch die Funktion $this->Config() kann in der Bootstrap-Datei schnell und einfach auf die Plug-in-Konfiguration zugegriffen werden. Wenn nun die Startseite der Storefront aufgerufen wird, können wir unsere neuen Slogans bewundern (Abb. 5).

Abb. 5: Die endgültige Kopfzeile der Storefront

Abb. 5: Die endgültige Kopfzeile der Storefront

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -