Hybris + CMS | Magnolia CMS und SAP Hybris integrieren

Hybris + CMS | Magnolia CMS und SAP Hybris integrieren

Onlineshops können mithilfe von Storytelling die Customer Experience steigern. Doch bislang setzen nur wenige Unternehmen, wie beispielsweise die Bechtle AG auf die Verbindung zwischen Content und Commerce. Die Herausforderungen dafür liegen insbesondere auf der technischen Ebene. Sebastian Haftmann und Benjamin Fiebig von Neofonie erklären, wie Magnolia CMS und SAP Hybris Commerce vertikal integriert werden können.

Kundenerlebnisse schaffen

Für einen erfolgreichen Onlineshop steht die Customer Experience im Vordergrund und ist wichtiger denn je: Der Shop-Besucher möchte emotional abgeholt werden, er möchte alles über das Produkt erfahren, sei es die geografische Herkunft, die einzelnen Bestandteile oder die Hintergrundgeschichte, bzw. die Vision des Gründers, warum und wie die Ware entwickelt wurde. Vor allem im B2C-Geschäft sehnen sich die Konsumenten nach Geschichten und nur so können Unternehmen Wettbewerbsvorteile zielführend ausreizen. Das Konsumerlebnis ist entscheidend und maßgeblich von der Bildhaftigkeit beeinflusst. Mittlerweile möchte der Kunde multimedial Produkte sehen und erleben. Bilder und Videos waren der Anfang, Virtual Reality und Augmented Reality sind die neuesten technischen Kniffe, um den Kunden in eine bunte Produktwelt eintauchen zu lassen.

Auch das vermeintlich starre B2B-Geschäft kann via Storytelling mit emotionalen visuellen Inhalten aufgefrischt werden und das Kauferlebnis über diesen Weg verbessern. Doch bislang setzen nur wenig Unternehmen auf die Verbindung zwischen Content und Commerce. Die Hürden liegen oftmals in den technischen Gegebenheiten. Oft reichen die CMS-Fähigkeiten eines Shopsystems nicht aus, um eine echte Customer Experience bieten zu können. Des Weiteren erweist sich die Implementierung mithilfe der shopeigenen CMS-Funktionalitäten häufig als aufwändig und unflexibel.

Vor diesem Hintergrund ist es sinnvoll, für eine konvergente Shop-Lösung die E-Commerce-Fähigkeiten des Shopsystems mit den Content-Fähigkeiten eines leistungsfähigen CMS zu integrieren.

Vorteile einer vertikalen Integration

Meist werden Shopsysteme durch eine softwaretechnisch horizontale Integration mittels Export/Import und Nachbildung von Datenstrukturen des Product Information Management (PIM) im CMS erweitert. Bei späteren Änderungen im E-Commerce-System müssen diese dann häufig im CMS “nachgezogen” werden. Um dies zu vermeiden und um eine größere Unabhängigkeit und Flexibilität zu erreichen, bieten sich moderne vertikale Architekturen an. E-Commerce-Größen wie Amazon, Otto und Zalando vertrauen bei ihren komplexen Onlineshops auf einen vertikalen Systemschnitt. Dabei werden voneinander entkoppelte Systeme, die eigenständige Funktionen erfüllen, zu einer User Experience zusammengeführt.

Insgesamt lässt sich eine höhere Unabhängigkeit und Flexibilität realisieren.

  • Erweiterbarkeit: Neue Aspekte einer E-Commerce-Lösung (z.B. Zahlungsabwicklung, Tracking etc.) können als eigene Vertikale unabhängig entwickelt werden und über REST-Schnittstellen und dazugehörige Entwicklungstools (Mocks etc.) modular und agil integriert werden.
  • Anpassbarkeit: Änderungen am Produktdatenmodell (z.B. neue Typen, Attribute) auf der einen Seite sowie Frontend-Makeover wie bei dem Layout und Styling der Produktdarstellung auf der anderen Seite, können allein durch Entwicklung an einer Vertikalen realisiert werden. Anpassungen am Gesamtsystem lassen sich aufgrund der weitgehenden technischen Entkoppelung der Vertikalen schneller und risikoärmer realisieren.
  • Flexibilität: Aufgrund der Entkoppelung der Vertikalen und ihrer Integration mittels gängiger Standards kann für jede Vertikale die geeignete Technologie und Vorgehensweise gewählt werden. Die starke Modularität des Gesamtsystems vereinfacht Make or Buy-Entscheidungen und reduziert die Wahrscheinlichkeit von Vendor Lock-Ins. Im Zusammenspiel mit dem Aspekt der hohen Anpassbarkeit des Systems lassen sich technologische Entscheidung auch zu einem späteren Zeitpunkt im Lebenszyklus des Gesamtsystems treffen bzw. revidieren.
  • Personalisierung: Mithilfe des Kundentrackings können Sie individuellen Content und Produktangebote ausspielen, die auf die Bedürfnisse Ihrer Kunden maßgeschneidert sind. Somit schaffen Sie individuelle Kundenerlebnisse und geben dem Kunden höhere Anreize zum Konvertieren!
  • Konsistenz: Mit der Integration zwischen einem CMS und Shop-System bieten Sie dem Kunden konsistente Informationen über Ihre Produkte und angebotenen Content.

Containerisierung mit Docker

Um vertikale Services in der Entwicklung, aber auch im Betrieb gerade mit wachsender Komplexität effizient handhaben zu können, empfiehlt sich das Setup einer Container-gestützten Infrastruktur. Die derzeit beliebte Container-Technologie Docker stellt hierfür ein vielseitiges und flexibles Toolset bereit, das zum einen eine enge Verzahnung von Entwicklung und Betrieb und zum anderen einen hohen Grad an Automatisierung verschiedener beteiligter Prozesse ermöglicht.

Für den vertikalen Ansatz werden alle Vertikalen des Gesamtsystems “dockerisiert”, d.h. in einem oder mehreren Docker-Containern bereitgestellt. Die Dockerisierung ermöglicht, dass jede Anwendung eine eigene und fest definierte Laufzeitumgebung unabhängig von der Deployment-Umgebung besitzt. Die Dockerisierung der monolithischen Architekturen Magnolia und Hybris erlaubt es zudem, beide Anwendungen als Services in einer verteilten Microservice-Architektur einzusetzen. Die einzelnen Vertikalen-Anwendungen werden dafür mit Docker Compose technisch zum Gesamtsystem integriert. Diese Vorgehensweise, aber auch der Inhalt aller Docker-Container ist in allen Entwicklungsschritten identisch. Somit kann unter “Live”-Bedingungen entwickelt und getestet werden.

Ein weiterer Vorteil von Docker ist das schnelle Setup von automatisierten Infrastrukturprozessen mit bestehenden Tools. Continuous Integration und Deployment auf eine Staging- oder Production-Umgebung erfolgt z.B. mithilfe von GoCD automatisiert. Für alle Komponenten können Build- und Deployment-Pipelines vorgesehen werden, die per commit hook auf dem Masterbranch der jeweiligen Komponenten oder manuell ausgelöst werden. Damit werden agile Vorgehen bei der Softwareentwicklung optimal unterstützt.

Vertikale Integration am Beispiel einer B2B-Plattform

Die Bechtle AG ist ein führendes IT-Handelsunternehmen in Europa und hat auf ihrer neuen Website alle Informationen zum Unternehmen sowie alle Dienstleistungen und Produkte auf einer Seite vereint. Die zuvor getrennten Webseiten, Shop und Unternehmenswebsite, wurden hierzu zu einer nahtlosen Plattform vereint. Die Basis bildet eine vertikale IT-Systemstruktur, bei der das CMS Magnolia und das Shopsystem SAP Hybris ineinander integriert wurden.

Startseite von Bechtle auf einem Smartphone und Tablet

Dazu musste zunächst das Gesamtsystem in Vertikale gemäß identifizierter Fachlichkeiten aufgeteilt werden. Jede Vertikale stellt eine unabhängige Anwendung dar, die ihr eigenes Frontend (sofern notwendig) und ihre eigene Datenhaltung besitzt. Der Datenaustausch zwecks Integration findet über REST-Schnittstellen statt.

Die Vertikale “Publishing” mit Magnolia CMS als Kern stellt den Web-Content (Bühnen, Impressum, AGB etc.) des Shops zur Verfügung. Gleichzeitig wird das Frontend für die Auslieferung des Shops integriert. Layout und Styling sowie die Informationsstruktur der Shop-Website sind an dieser Stelle definiert. Fachlich zuständig für diese Vertikale ist in der Realität meist ein Web-Publishing-Team.

In der Vertikale “Commerce” mit Hybris findet das Product-Content-Management statt. In Hybris wird das Produktdatenmodell, Produktkatalog samt Produktattributen und die Produktmedien gepflegt. Darüber hinaus stellt Hybris Verfügbarkeits-, Warenkorb- und Checkout-Funktionalitäten bereit. Kommerziell relevante Daten wie Produkt-, Preis- und Nutzerdaten fließen dabei aus vorgelagerten CRM- bzw. ERP-Systemen in Hybris ein.

Weitere Shop-Funktionalitäten außerhalb der beiden Kern-Fachlichkeiten, wie z.B. eine Produktsuche oder ein Mail-Service für das Handling von E-Mail-Kommunikation des Shops lassen sich über weitere Vertikalen realisieren.

Anwendungsbeispiel: Redaktionelle Produkt-Teaser

Ein Anwendungsbeispiel für eine lose technische Koppelung verschiedener Fachlichkeiten ist die redaktionelle Bestückung von Produkt-Teasern. Im Redaktionssystem von Magnolia, also in der Zuständigkeit der Vertikale “Publishing”, können auf einer beliebigen Shop-Seite Produkt-Teaser platziert werden. Dabei legt das Web-Publishing-Team fest, wie viele Produkt-Teaser angezeigt und welche Produkte jeweils angeteasert werden sollen. Letzteres kann für jeden Produkt-Teaser in einem zweistufigen Auswahldialog festgelegt werden. Die Auswahlfelder für Produktkategorie und Produkt im Dialog werden zur Laufzeit über REST/JSON bei Hybris abgefragt. Damit wird gewährleistet, dass das Web-Publishing-Team immer auf dem aktuellen Produktdatenstand arbeiten kann, ohne auf Zulieferungen (z.B. Produktdatenimporte von Hybris in Magnolia) der Vertikale “Commerce” warten zu müssen. Nach erfolgter Auswahl im Dialog wird die entsprechende Produkt-ID persistiert. Bei Abruf der Seite liefert die Vertikale “Commerce” dann die fertige Produktkachel zu der Produkt-ID.

Integration von SAP Hybris Commerce in Magnolia CMS

Die beiden Vertikalen „Commerce“ und „Publishing“ mussten nun auch funktional miteinander integriert werden. Technisch geschieht dies folgendermaßen: Produktinhalte inklusive Produktmedien werden vom Produktmanagement in Hybris, also der Vertikalen „Commerce“, verwaltet. Auch Warenkorbfunktionalität und Order-Management liegen in der fachlichen Zuständigkeit dieser Vertikalen. Um die genannten Funktionen für andere Services bereitzustellen, können in Hybris für Shop-Funktionalitäten wie Produkt-Teaser, Produktdetailseiten und Warenkorb- sowie Checkout-Seite REST-Schnittstellen implementiert werden, welche semantisches (ungestyltes) HTML zurückgeben – wenn man so will, als Frontend der Vertikale „Commerce“. Dieses HTML wird von Magnolia beim Rendern der jeweiligen Seite in einen generischen Rahmen aus Header und Footer integriert und dabei mit einem Styling gemäß Shop-Design versehen. Die Inhalte und Funktionalitäten aus der Vertikalen „Commerce“ können dabei auf einer Seite beliebig mit redaktionellen Inhalten aus Magnolia kombiniert werden.

Der Vorteil der Integration von semantischem HTML besteht darin, dass Magnolia bezüglich der von Hybris gelieferten Ressourcen komplett agnostisch ist. Die Vertikale „Commerce“ allein bestimmt den Inhalt und die Struktur der Produktinhalte und „Commerce“-Funktionen ohne technische Abhängigkeiten zur Vertikalen „Publishing“. Änderungen an den Attributen einer Produktkategorie oder Reihenfolge deren Darstellung können in Hybris realisiert und ausgerollt werden, ohne dass Magnolia involviert ist. Neben dieser visuellen REST-Integration mittels HTML als Datenformat, werden weitere klassische Shop-Funktionalitäten als reiner Datenaustausch per REST/JSON-Integration realisiert. Dazu gehören Shop-Funktionen wie beispielsweise der „In den Warenkorb legen“-Button, der Abruf der Anzahl von Produkten im Warenkorb für die Darstellung in der Navigation und das Ändern der Produktmenge im Warenkorb. Hier wird Hybris jeweils per AJAX direkt aus dem Frontend angefragt. Das Datenaustauschformat ist JSON.

Die Frontend-Integration der verschiedenen Komponenten aus den Vertikalen und damit die Auslieferung der fertigen Seite übernimmt die Vertikale “Publishing”.

Veröffentlicht am 28. März 2018, aktualisiert am 12. Oktober 2020

Teilen auf

Sebastian Haftmann & Benjamin Fiebig

Benjamin Fiebig ist Technischer Projektleiter bei der Neofonie und hat seinen Schwerpunkt in Enterprise E-Commerce Systemen. Benjamin war zuvor mehrere Jahre in den Bereichen Logistik und E-Commerce tätig, u.a. beim Aufbau der Digital Commerce Platform für die Daimler AG. Sebastian Haftmann ist Project Manager bei Neofonie und berät Kunden bei der Planung und Realisierung digitaler Lösungen in den Bereichen Portale, Mobile und E-Commerce. In den vergangenen Jahren begleitete er u.a. Olympus Europe, Wort & Bild Verlag sowie Creditreform bei der Umsetzung komplexer Projekte.

Noelani_Mac

noelani.de: Der neue Onlineshop für trendbewusste Frauen

Der femininen Schmuck von NOELANI erhält erstmalig eine eigene Onlinepräsenz. Von der Konzeption, über das Design bis zur Entwicklung auf Shopware 6 hat Neofonie den neuen Onlineshop umgesetzt.

KI & Forschung 09-2021

In der September-Ausgabe von „KI und Forschung“ werden die Themen Künstliche Intelligenz als Forschungsgebiet, Arbeiten in der Zukunft und Neuigkeiten von Google aus dem Search On Event vorgestellt.

ION ONE beim Digital Marketing Summit 2021

Der Digital Marketing Summit ist das Event des Jahres 2021 für Themen des digitalen Marketings und UX/UI. Axel Hillebrand von der UX-Agentur ION ONE ist mit einem Vortrag vertreten und zeigt, wie B2B-Websites in Lead-Maschinen verwandelt werden.

Whitepaper: Goldstandard für kundenspezifische Suchlösungen

Eine kontinuierliche Optimierung einer Suche ist unerlässlich. In dem Whitepaper „Goldstandard für kundenspezifische Suchlösungen“ stellt Cornelia Werk, Lead Consultant Search bei ontolux, Konzepte einer goldstandardbasierten Evaluation vor.

Index eines Buches

Neofonie startet Forschungsprojekt mit der HU Berlin

Zusammen mit dem Lehrstuhl der HU Berlin von Professor Alan Akbik, startet Neofonie das ZIM Projekt Semantische Begriffsanalyse für Information Retrieval Aufgaben (SEBIRA).

Header_Crossplan_PM

Crossplan Deutschland und Neofonie Mobile GmbH entwickeln Wrapper SDK für Audio-Apps

Mit dem neuen Wrapper SDK von Crossplan Deutschland stehen Audio-Publishern einfach und effizient alle benötigten SDKs für ein datengetriebenes App Advertising und Audio-Marketing zur Integration in die eigene App-Landschaft zur Verfügung. Radiostationen und Audio-Publisher können damit im Handumdrehen ihre Apps mit Datenmanagement-, Tracking- und Werbefunktionalitäten ausstatten.

Green_IT

Neofonie mit klimaneutraler Website

Neofonie setzt auf Green IT und ist bemüht, Emissionen so weit wie möglich zu reduzieren und Ressourcen umweltschonend einzusetzen. Jeder Klick auf neofonie.de ist klimaneutral. Neofonie unterstützt hierfür zertifizierte Klimaprojekte.

Guided Selling im B2B – digitale Vertriebsoptimierung

ION ONE unterstützt den B2B-Vertrieb, mithilfe von Guided Selling Workshops, um potenzielle Kunden effektiv zu beraten und Kunden vom Kauf zu überzeugen.

Managed Hosting mit mpex für maximale Sicherheit

Die Managed Hosting Lösungen unseres Partner mpex sorgen mit maximaler Sicherheit für beste Ergebnisse im Deployment und Betrieb von Neofonie und unser Kunden.

Core Web Vitals und deren Auswirkung auf die Webentwicklung

Mit der Einführung der Core Web Vitals Mitte Juni 2021 als zusätzliche Rankingfaktoren kommen auf die Webentwicklung neue Herausforderungen zu.

Geburtstagsverlosung bei ION ONE

ION ONE begeistert bereits seit einem Jahr seine Kunden. Feiern Sie das heutige Jubiläum mit und gewinnen Sie einen kostenfreien Workshop Ihrer Wahl.

Fussball_2021

Social Analytics zur UEFA EURO 2020

Wie wird über die spannendsten Ereignisse vor, während und nach den Spielen in den sozialen Netzwerken zur EURO 2020 gesprochen – eine Social Media Analyse von ontolux.

Sinnbild für Online Shopping

Warum eine goldstandard-basierte Evaluation?

Zur diesjährigen MICES trifft sich die E-Commerce-Suchgemeinschaft, um neueste Trends zu diskutieren. Mit dabei sind Cornelia Werk und Bertram Sändig von ontolux, die anhand von Kundenprojekten die Vorteile einer goldstandard-basierten Evaluation vorstellt.

amor_device_700

amor.de auf Shopware 6

Seit über 40 Jahren vertreibt Amor Echtschmuck und ist Europas Marktführer im mittleren Preissegment. Mit der Konzeption und Umsetzung des neuen Onlineshop hat der Schmuckhersteller Neofonie beauftragt.

DigitalHealthcare_Neofonie

Ausbau der Digitalisierung im Gesundheitswesen

Mit dem kürzlich beschlossenen Digitale-Versorgung-und-Pflege-Modernisierungsgesetz (DVPMG) verabschiedet der Bund bereits das dritte Gesetz, um die Digitalisierung im Gesundheitsmarkt voranzutreiben. Für die Vernetzung aller Beteiligten im Markt gestaltet Neofonie die Gesundheitstechnik von morgen aktiv mit und unterstützt Unternehmen, bei der Entwicklung von E-Health Lösungen.

Mit UX-Design die Customer Experience im Onlineshop beeinflussen

In der Videoreihe der media.net berlinbrandenburg zum Thema Customer Experience im E-Commerce, gibt Axel Hillebrand, UX Consultant von ION ONE, wertvolle Tipps, wie eine gute Usability und ein ausgefeiltes UX-Design Nutzer begeistert und so Ihre Conversion positiv beeinflusst.

Digitalen Wandel mit Managed IT-Services gestalten

Die stets an Komplexität gewinnenden Web- und E-Commerce-Projekte erfordern auf allen Ebenen ein Höchstmaß an Leistung, Sicherheit und Zuverlässigkeit. Bei diesen hohen Anforderungen wird Neofonie bereits seit 2004 durch das Berliner Hostingunternehmen mpex in allen Belangen des Betriebs unterstützt.

Digitales Recruiting – mit neuen Strategien gewappnet für die Zukunft

Celina Martin, HR-Managerin bei Neofonie Mobile war bei Digital Bash HR zu Gast und diskutierte mit HR-Experten zum Thema Digitales Recruiting in 2021 und gab Einblicke in HR-Strategien der Neofonie Mobile. Candidate Experience ist besonders wichtig im digitalen Wandel des Recruitings.

Container wird hochgehoben

Docker-Container als ideales Software-Transportmittel

Webprojekte werden immer komplexer und die Halbwertszeit der Technologien, die dabei zum Einsatz kommen, werden immer kürzer. Für die Softwareentwicklung ist die Containertechnologie von Docker ein ideales Transportmittel.

Corona-Reise-Check auf Shortlist für Deutschen Digital Award

In der Kategorie „Digital for Goods“ ist der Corona-Reise-Check des Wort & Bild Verlages für den Deutschen Digital Award 2021 nominiert. Der Bundesverband Digitale Wirtschaft e.V. hat in einer Shortlist die Vorauswahl getroffen.

Unser Newsletter „Neo Report“ vermittelt konkretes Praxiswissen, Trends und Know-how für Ihr digitales Business – quartalsweise und kompakt. Jetzt anmelden.