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 [Link auf Celum-Partnerseite] 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).
;