Shopware: Widget für die Einkaufswelten zur Einbindung eines WordPress RSS-Feeds

Shopware: Widget für die Einkaufswelten zur Einbindung eines WordPress RSS-Feeds

Nutzt man statt der Shopware-internen Blogfunktion doch lieber WordPress, dann stehen einem die Blogartikel nicht mehr für die Einkaufswelten zur Verfügung. Es hilft dann nur ein eigenes, kleines Widget, mit dem man den RSS-Feed seines WordPress-Blogs importiert.

Im zweiten Teil meiner kleinen Serie über die Verknüpfung von Shopware mit WordPress (siehe den Beitrag Shopware und WordPress gemeinsam einsetzen) soll es nun um das Widget für die Einkaufswelten gehen, mit denen ich die aktuellsten 4 Beiträge meines Florilegium-Blogs auf der Startseite des Webshops anzeigen möchte. Solche Widgets lassen sich ab Version 4.x von Shopware sehr leicht selbst erstellen (Link auf ein Tutorial folgt am Seitenende). Die Anzahl 4 habe ich zudem gewählt, weil ich das 4-spaltige Raster der Einkaufswelt meiner Startseite nutzen möchte. Dazu benötige ich einmal das Widget selbst, das in Shopware direkt angelegt wird, und zwar in folgende vorgegebene Struktur:
/engine/Shopware/Plugins/Local/Frontend

Dort habe ich das Verzeichnis VCFeedIntegration angelegt, ein von mir frei vergebener Name. Wie bei Shopware Plugins üblich liegt dort die Bootstap.php, die später das Plugin laden wird und die nötigen Funktionen wie getInfo(), install() und uninstall() bereitstellt (und noch ein paar mehr).

Struktur für das Shopware-Plugin

Struktur für das Shopware-Plugin

Am interessantesten dürfte dabei die install()-Methode sein, die einmal bei der Installation des Plugins das Widget kreiert und dann noch zwei Felder erzeugt, über die später im Backend von Shopware die Überschrift des Blocks anlegen sowie die Adresse des RSS-Feeds, den ich importieren möchte, angeben kann. In diesem Fall einfache Textfelder.

install()-Mehtode der der Bootstrap.php


public function install()
{
$component = $this->createEmotionComponent(array(
'name' => 'Feed-Intregration-Component',
'template' => 'emotion_feedintegration',
'description' => 'Integration of RSS Feeds as a Component'
));

$component->createTextField(array(
'name' => 'rss_feed_title',
'fieldLabel' => 'Block Header',
'supportText' => 'Enter a title name for this page element.',
'allowBlank' => true
));

$component->createTextField(array(
'name' => 'rss_feed_address',
'fieldLabel' => 'Feed Adress',
'supportText' => 'Enter the url of your rss feed want to embed.',
'allowBlank' => true
));
return true;
}

Es sind natürlich noch weitere Daten denkbar, die man abfragen könnte und mit denen man das Plugin weiter customizen könnte. So z.B. die ANzahl der angezeigten Beiträge.

das Plugin im Backend von Shopware

das Plugin im Backend von Shopware

Im Backend sieht das Plugin nach der Aktivierung dann wie in dem Screenshot aus. Als nächstes benötigen wir dann noch die View, also das Template für die Ausgabe der eingelesenen Blogbeiträge. Diese liegt entsprechend der Konvention für Widgets im dem Verzeichnis /Views/emotion_componentes/widgets/emotions/componentens, und die Datei entsprechend meiner Angabe in der Bootstrap.php emotion_feedintegration.tpl.

Quellcode der Template-Datei


<script type='text/javascript' src="{link file='frontend/_resources/js/jquery.rss.js'}"></script>
<script type='text/javascript'>
jQuery(function($) {
$("#rss-styled").rss('{$Data.rss_feed_address}', {
limit: 4,
layoutTemplate: '<ul>[entries]</ul>',
entryTemplate: '<li><a href="[url]">[teaserImage]</a><h6><a href="[url]">[title]</a></h6><p>[shortBodyPlain]</p></li>'
}).show().alert('[url]');
})
</script>

<div>
<h2 class="heading">{$Data.rss_feed_title}</h2>
<div id="rss-styled">
<ul class="inline" style="list-style:none;">
<entries></entries>
</ul>
</div>
</div>

zeigt schon, dass ich bei der Verarbeitung des XML-Streams aus dem RSS-Feed auf ein vorhandenes JQuery-Plugin zurückgreife: jquery-rss. JQuery selbst ist in Shopware bereits vorhanden. Falls nicht, muss man JQuery natürlich noch entsprechend einbinden. Die zusätzliche Bibliothek jquery.rss.js habe ich in dem Verzeichnis /frontend/-resources/js/ meines Template-Ordners abgelegt.

Schnelle Ernüchterung bei der Nutzung von jquery-rss

Die ersten Versuche verliefen mit jquery-rss leider erst mal sehr ernüchternd. Denn dieses JQuery-Plugin nutzt geschweifte Klammern um sogenannte Tokens im Template zu markieren. Diese kollidieren mit den Smarty-Elementen der Shopware-Templates. Die Lösung: ich bin einmal durch das Plugin und habe die Tokens von {} auf [] gesetzt. Im Template wird so aus {entries} eben [entries]. Damit habe ich keinen Konflikt mehr mit dem Smarty-Elementen.

Das zweite Problem verursacht Shopware: vor jedem Link im Webshop setzt Shopware die Basis-URL des Webshops. D.h. aus dem Link des Beitrags aus dem RSS-Feed wird statt
http://www.florilegium.de/blog/pflanzen/blumen-im-garten/blausterne-scilla-als-fruehlingsboten.html
folgender Link:
http://www.florilegium.de/http://www.florilegium.de/blog/pflanzen/blumen-im-garten/blausterne-scilla-als-fruehlingsboten.html
Und der führt natürlich ins Nirwana. Auch in diesem Fall habe ich über einen Eingriff ins JQuery-Plugin Abhilfe schaffen können: dem Beitragslink habe erst das http://www.florilegium.de/ abgeschnitten, damit es Shopware wieder anfügen kann, ohne dass es zur fehlerhaften URL kommt. Der Nachteil dieser Methode ist klar: bindet man einen RSS-Feed einer fremden Quelle ein, wird der Link natürlich verfälscht und führt wieder ins Nirwana. Da bei mir Webshop und Blog (und damit auch der RSS-Feed) unter gleicher Adresse laufen, ist der Nachteil für mich aber akzeptabel. Bei den Änderungen im JQuery-plugin muss man außerdem darauf achten, dass man dieses nicht achtlos durch Updates überschreibt, sonst geht natürlich gar nichts mehr.

Nach all diesem Rumgebastel steht nun das Widget im Backend von Shopware zur Verfügung und kann über die Einkaufswelten eingebunden werden. Aber vielleicht gibt es ja einen komplett anderen Ansatz, seine Blogartikel, evtl. auch von einer frenden URL, einzubinden. Vorschläge gerne über die Kommantarfunktion mitteilen. Das Ergebnis meines Widgets kann man sich jedenfalls auf der Startseite meines kleinen Referenzshops anschauen: www.florilegium.de.

Blogbeiträge in WordPress über RSS-Feed auf Startseite von Sopware eingebunden

Blogbeiträge in WordPress über RSS-Feed auf Startseite von Sopware eingebunden

Weitere Informationen und Quellen zur Nutzung der Einkaufswelten und des JQuery-Plugins

Buchtipps rund das Thema eCommerce mit Shopware und WordPress