XiM Widget Server - Verknüpfung eines Web Content Management Systems mit einem Online-Shop

30.10.2018

Fachliche Anforderungen

Integration von Produkten und Shop-Funktionalität aus einem Online-Shop in eine Corporate Website am Beispiel der Integration von Typo 3 CMS und Intershop Commerce Management (ICM)

Im Rahmen von E-Commerce-Projekten wird es zunehmend erforderlich, einen Online-Shop in eine andere Webanwendung oder Webplattform zu integrieren.

Primäres Ziel einer solchen Anforderung ist es, dem Nutzer einer Applikation ein nahtloses Einkaufsvergnügen zu ermöglichen, indem ihm beim Browsen in einer Website gleichzeitig Produkte eines zugehörigen Online-Shops zur Ansicht, Auswahl und zum Kauf bereit gestellt werden. Hierzu ist es erforderlich, die E-Commerce-Funktionen des Online-Shops für die Besucher der Website, möglichst in vollem Umfang, nutzbar zu machen. Das heißt, Produkte und Shop-Funktionen sowie die Inhalte einer Website sollen somit nicht nur ausschließlich im Shop oder im CMS verfügbar sein.

Vor diesem Hintergrund zielt die hier aufgezeigte technische Lösung darauf ab, mit dem bereits vorhandenen Online Shop ein definiertes (in der Regel reduziertes) Produktportfolio zur Verfügung zu stellen, um es in dem anderen webbasierten System zu präsentieren oder zu verkaufen. Dabei sollen jedoch, bereits existierende E-Commerce Funktionalitäten nicht erneut implementiert werden müssen. Zudem sollte die Shop-Plattform die Hauptgeschäftslogik bereitstellen, während die Drittanbieter-Anwendungen das Frontend selbst übernehmen. Hierfür sind vom Online-Shop zentrale Funktionen über eine flexible API (vorzugsweise REST-basiert bereitzustellen, die so von den Webanwendungen Dritter genutzt werden können (z. B. Verkauf auf speziellen Landing Pages innerhalb eines bestehenden Web-Auftrittes oder anderen vom jeweiligen Unternehmen betriebenen Online-Plattformen). Auch könnten die Shop-Funktionalitäten in verschiedene Arten von mobilen Apps oder sogar IoT-Geräten (Internet of Things) Verwendung finden.

Was ist ein Widget?

Auf Wikipedia lässt sich über Widgets folgendes nachlesen:

"Ein Widget ist eine Komponente eines grafischen Fenstersystems. Das Widget besteht zum einen aus dem Fenster, einem sichtbaren Bereich, der Maus-, Touchscreen- und/oder Tastaturereignisse empfängt, und zum anderen aus dem nicht sichtbaren Objekt, das den Zustand der Komponente speichert und über bestimmte Zeichenoperationen den sichtbaren Bereich verändern kann. Widgets sind immer in ein bestimmtes Fenstersystem eingebunden und nutzen dieses zur Interaktion mit dem Anwender oder anderen Widgets des Fenstersystems."

Quelle: https://de.wikipedia.org/wiki/Widget

XiM Widget Server

Der XiM Widget Server ist ein Software-Modul, welches die technologischen Voraussetzungen einschließlich der Schnittstellen für den Einsatz der Widgets bei der Integration von Content Management System und WebShop bereit stellt.

Insofern handelt es sich dabei im weitesten Sinne um eine auf einer Java Script Bibliothek basierende API, mit der die Bereitstellung der Shop-Funktionen und schlussendlich der im Shop verfügbaren Daten erfolgt. Die für den Widget Server zum Einsatz kommenden Technologien wie React, Redux sowie ein auf Webpack basierender Build-Prozess und der CSS Pre-Compiler Sass machen diesen zu einem modernen Technologie-Stack, welcher eine schlanke und schnelle Integration eines Online Shops in eine Corporate Site ermöglicht.

Widget Server - Architektur

Nachfolgend wird ein Anwendungsszenario des Widget Server am Beispiel der Integration eines auf Intershop Commerce Management 7 (ICM) basierenden Webshops in eine Typo 3 CMS basierte Corporate Site vorgestellt. Als notwendige Voraussetzung für ein derartiges Integrations-Szenario verfügt das ICM über eine REST-API Schnittstelle, mit welcher die erforderlichen Daten des Online Shop Systems bereit gestellt werden. Liegt ferner eine gleichartige Schnittstelle im Content Management System vor, wird eine wechselseitige Integration möglich. Dies bedeutet, dass Informationen bzw. Daten, die im CMS erstellt und gepflegt werden, im Online Shop ebenfalls zur Anzeige gebracht werden können.

Die Widget Server Architektur umfasst folgende Bausteine:

  1. Content Management System (bspw. Typo3)
  2. Webshop (bspw. Intershop Commerce Management 7)
  3. Widget Server
  4. User Client (Browser auf einem Desktop oder mobilen Endgerät, wobei es sich dabei beispielsweise auch um den Monitor einer Werkzeugmaschine handeln könnte.)

Abbildung: Übersicht der beteiligten Systeme einer Widget Server Architektur

Die Tiefe der Systemintegration des Webshops in die Corporate Site ist dabei frei wählbar.

Folgende Integrationsansätze sind möglich:

  1. Vollständige Integration

    Hierbei wird neben der Möglichkeit der Integration von verfügbaren Widgets (bspw. Produktliste oder Produkte) auf verschiedensten Seiten der Corporate Site ein Checkout-Widget integriert, so dass der Nutzer innerhalb der Corparate Site bis zum Abschluss des Kaufprozesses gelangen kann. Die Checkout-Integration erfolgt in der Regel in einem Template, welches Header und Footer der Coorporate Site umfasst sowie einen Platzhalter für die Checkout Integration zur Verfügung stellt.

  2. Teilweise Integration

    Bei einer Teil-Integration werden innerhalb der Corporate Site ebenfalls die Shop-Funktionen und -Daten mittels der integrierten Widgets bereit gestellt, wobei der Nutzer im Minibasket mit dem Aufrufen des ersten Bestellschrittes in den Checkout des Shop-Systems springt und der Bestellprozess in diesem System fortgeführt bzw. beendet wird.

Beschreibung der beispielhaften Architektur

A) Content Management System - Typo 3

Beim hier dargestellten Beispiel-Szenario werden auf Basis des Typo 3 CMS die Seiten einer Website, in denen Artikel aus einem Webshop angezeigt und verkauft werden sollen, erstellt, gepflegt und zur Anzeige gebracht. Für die Integration der Shop-Funktionalität und -Daten wird den Redakteuren über den verfügbaren Widget Server eine Auswahl an Widget-Typen zur Verfügung gestellt. Die Bearbeiter werden somit in die Lage versetzt, selbst zu entscheiden, welche Produkte des Webshops auf welchen Seiten der Website gezielt umworben oder zum Verkauf angeboten werden.

Mit diesen erweiterten Möglichkeiten der Content-Erstellung können nun auch Mitarbeiter von Marketingabteilungen in die Lage versetzt werden, SEO-konforme Landingpages zu erstellen, welche der Nutzer neben allgemeinen auch produktspezifische Informationen direkt aus einem Online Shop zur Verfügung stellen. Darüber hinaus kann auf diesen dem Nutzer die Option eingeräumt bekommen, das unterbreitete Produktangebot direkt online zu bestellen.

Verfügt das Content Management System selbst über eine REST-API, besteht ferner die Option, auch aus diesem heraus Informationen (Content-Elemente) im Online-Shop zur Anzeige zu bringen. Das heißt, beim Vorliegen entsprechender Schnittstellen in Shop und CMS wird eine wechselseitige Systemintegration möglich, was die Flexibilität und Vielfältigkeit der Einsatzszenarien für die E-Commerce Plattform und Corporate Site deutlich erhöht.

Um Grafiken und Media-Dateien effizient verwalten und speichern zu können, empfiehlt sich zudem der Einsatz eines Digital Asset Management System - DAM, wie es beispielsweise von Celum bereitgestellt wird

B) Webshop - Intershop Commerce Management 7 (ICM)

Der Shop, in dem beschriebenen Szenario ein auf Intershop Commerce Management 7 basierender Webshop, stellt neben den zu vermarktenden Produkten auch die Katalogstruktur, Preise sowie E-Commerce Funktionalitäten bereit. Die Artikel können so in der Corporate Site präsentiert und bestellbar gemacht werden. Die Bereitstellung der Daten erfolgt dabei über die bereits erwähnte REST-API. Ebenso werden die mit den Bestellungen einhergehenden Order-Daten über diese Schnittstelle in den Shop zurück übertragen.

Auch andere Shop-Systeme könnten integriert werden unter der Voraussetzung, dass diese ebenso über eine entsprechende REST-API verfügen.

C) Widget Server

Der Widget Server bildet das zentrale Element der dargestellten System Architektur. Dieser stellt die eigentlichen Widgets bereit, welche out of the box im Client, d.h. in der Typo3 Seite verwendet werden können.

Folgende Widget Typen können bereit gestellt werden:

  1. Produktlisten Widget
  2. Produktkachel Widget
  3. Mini-Warenkorb Widget
  4. Vollständiges Warenkorb Widget
  5. Checkout Widget

Die Auswahl einzelner oder mehrerer Produkte sowie der zugehörigen Kategorien kann durch den Content Redakteur einer Site mittels der Produkt- oder Kategorie-ID erfolgen.

Ein weiterer Mehrwert wird bei der Widget Server Integration durch die Bereitstellung folgender Widget-Funktionalitäten erzielt:

  1. Automatische Style-Anpassungen entsprechend dem in der Corporate Site zur Anwendung kommenden Cascading Style Sheets (CSS).
  2. Konfigurierbare Anzeige der Produktdarstellung (Liste oder Kachel).
  3. Vorbereitete Ausgabe für eine responsive konforme Darstellung.
  4. Widgets mit Suchmaschinen relevanten Content, die beispielsweise zur Produkt-Darstellung dienen, unterstützen zusätzlich ein serverseitiges Pre-Rendering. Das heißt es handelt sich hierbei um sogenannte isomorphic Widgets, die eine SEO konforme Indizierung durch Suchmaschinen ermöglichen.
Die hier aufgezeigte Widget Server Architektur stellen wir bei Interesse gern als skalierbaren Cloud basierten Service bereit. Alternativ könnte diese aber auch flexibel bei einem Hosting-Anbieter als Plattform as a Service betrieben werden.

Fazit - Vorteile einer Widget-Server Integration

Die Vorteile des XiM Widget Servers lassen sich wie folgt zusammenfassen:

  1. Einfache Integration von Produktdaten eines Online-Shops in Websites
  2. Konsolidierte Bereitstellung wiederverwendbarer Shop-Komponenten mit E-Commerce-Funktionen
  3. Zentrale Pflege der Widgets
  4. SEO konforme Integration von Produktinformationen
  5. Verkürzung der Vorbereitungszeit (Time to Market) für Online Marketing Maßnahmen
  6. Einfache Veröffentlichung von Inhalten auf mobilen Endgeräten

Unabhängig von der zum Einsatz kommenden Web-Shop-Technologie kann die hier dargestellte Widget Server-Architektur zum Einsatz gebracht werden, wenn die Voraussetzung der Exitenz einer REST-API erfüllt ist. Zusammenfassend lässt sich feststellen, dass mit dem hier vorgestellten Integrations-Szenario die Flexibilität beim parallelen Betreiben einer Unternehmenswebsite und eines Online Shops wesentlich erhöht werden kann. Insbesondere Online Marketing Maßnahmen lassen sich so schnell und kosteneffizient umsetzen.

Schlagworte:
  • XiM Widget Server,
  • Experts in Motion,
  • Intershop,
  • Online-Shop Integration in Website,
  • Typo 3,
  • E-Commerce,
  • Intershop,
  • ICM,
  • CMS,
  • Content Management System,
  • Online-Shop,
  • Widget Server Architektur,
  • REST-API,
  • Online-Plattform,
  • IoT,
  • Internet of Things,
  • Corporate Website,
  • Online Marketing,
  • Landing Page
Kategorie
  • Tipps & Tricks für E-Commerce
Tags
  • E-Commerce
  • Integration

Sie haben Fragen zu unserem XiM Widget Server oder hinsichtlich der Integration eines Online Shops in die Website Ihres Unternehmens?

Schnellkontakt
Ja, ich bin damit einverstanden, dass die Experts in Motion AG die von mir angegebenen Daten für die Beratung und zu meiner Information per Telefon verwendet. Ich kann meine Einwilligung jederzeit per E-Mail widerrufen (Datenschutzerklärung).
;
Loading Layer