How-to: Magnolia CMS und commercetools in 5 Schritten integrieren

How-to: Magnolia CMS und commercetools in 5 Schritten integrieren

Online Händler stehen immer wieder vor der Frage, wie potentielle Kunden emotional gebunden und zum Kauf bewegt werden können. Neben einer wohldurchdachten User Story spielen emotionale Bilder und Stories eine wesentliche Rolle. Shopsysteme stoßen hierbei schnell an Ihre Grenzen, da neben Produktübersicht und Detailseiten nur eingeschränkte Seitentypen möglich sind. Die Integration eines Content Management Systems gibt dem Online Händler mehr Spielraum und Flexibilität in der Gestaltung der E-Commerce Lösung. Im Rahmen eines Demo-Shops hat Neofonie das Shopsystem commercetools mit Magnolia CMS integriert und dabei die Vorteile beider Systeme vereint.

Integrationsfähigkeit

Beide Systeme sind modular aufgebaut und bieten offene Schnittstellen, wodurch die Integration von zusätzlichen Komponenten und Systemen innerhalb kürzester Zeit möglich wird. So lassen sich Drittanbieterlösungen wie z.B. CRM-Systeme, Suchfunktionen, Social Media Tools oder Trackingtools anbinden und ein individuell gestalteter Onlineshop erstellen.

Multi-Funktionalität

commercetools und Magnolia CMS bringen ein breites Spektrum an Multi- und Omnichannel-Funktionalitäten mit. Egal ob über Web, Mobile oder POS – über alle Vertriebskanäle hinweg können potenzielle Käufer erreicht werden. Während das Product-Information-Management-System von commercetools die Grundlage für die Verwaltung von Kataloginformationen für sämtliche Verkaufskanäle bildet, profitieren Händler zugleich von der Multisite- und Multi-Language Funktion von Magnolia CMS, wodurch Internationalisierungs- und Expansionsmöglichkeiten geschaffen werden.

Skalierbare Infrastruktur

Mit der Microservices Struktur von commercetools lassen sich flexibel Commerce Bausteine integrieren und flexibel skalieren, wodurch Onlineshops nicht nur leichtgewichtiger und dynamischer werden, sondern eine schnellere time-to-market Entwicklung möglich wird. Zugleich bringt das cloudbasierte Magnolia CMS eine skalierbare Infrastruktur mit wodurch Lastspitzen und Ausfälle abgefangen werden können.

Um die Vorteile beider Systeme nutzen zu können, lässt sich commercetools sehr einfach mit Magnolia CMS integrieren, die Entwickler in nur 5 Schritten durchführen können.

Step 1: Setup von Magnolia

Das Magnolia-Setup für eine Shoplösung unterscheidet sich erst einmal nicht von dem Setup für andere Portal-Lösungen. Als Laufzeitumgebung kann ein Container-Setup mit Docker vorgesehen werden, was die horizontale Skalierung des System vereinfacht. Für die Integration von Magnolia mit commercetools mithilfe des Connector Modules von Magnolia ist mindestens die Enterprise Standard Lizenz des CMS notwendig.

Ebenfalls zum Basis-Setup von Magnolia gehört die Definition eines Seiten-Templates für die Startseite der Shop-Lösung, wodurch die Shop-Site in der Pages App miteinander verbunden werden.

Step 2: commercetools-Projekt anlegen

Im zweiten Schritt muss ein neues Projekt bei commercetools angelegt werden. Nach der Registrierung muss eine Organisation, innerhalb dieser ein Projekt definiert werden. Optional können Projekt-Entwickler als Team für das Projekt definiert werden (siehe https://docs.commercetools.com/tutorials/getting-started).

Ist die Registrierung abgeschlossen, kann vom Projekt-Dashboard aus auf den Entwicklerbereich zugegriffen werden. Hier erhält man die Informationen, die für die Konfiguration des commercetools-Projekts im Connector notwendig sind.

Step 3: Connector-Konfiguration

Nachdem das commercetools connector module per Maven Build-Konfiguration in Magnolia eingebunden ist, muss zunächst der commercetools-API in Magnolia bekannt gemacht werden. Dies geschieht in der entsprechenden Module-Konfiguration.

Hier werden API-BaseURL, Authentication-Endpunkt sowie clientID, clientSecret und projectKey aus Schritt 2 angegeben.

Im App Launcher steht außerdem eine neue App Group “commercetools” zur Verfügung. Unter Setup kann festgelegt werden, welches commercetools-Projekt für welche die Shop-Site in Magnolia verwendet werden soll.

Daneben lassen sich im Setup Lokalisierungsparameter setzen. Im Falle des Neofonie Demo-Shop wurde nur der deutschsprachige Raum bedient.

Die Konfiguration des Connector-Modules ist damit bereits abgeschlossen und Funktionalitäten von commercetools lassen sich per REST-Client in Magnolia integrieren.

Step 4: commercetools-Projekt anlegen

Um einen grundsätzlichen Durchstich der Shopfunktionalität in die Shop-Site zu integrieren, aber auch Produkt-Inhalte in der Store-Front darzustellen, muss das commercetools Projekt inhaltlich eingerichtet werden.

Zunächst legt man dafür in der Admin-Oberfläche von commercetools die gewünschten Settings für Internationalisierung, Steuern und Versand fest.

Sind diese Basis-Einstellungen für den Shop erledigt, kann die Pflege der Produktdaten begonnen werden. Dafür definiert man Produkttypen, auf denen die Produkte später basieren. Im Neofonie Demo-Shop haben wir die Kategorien „Apparel“ und Workshop“ gewählt.

Ein Produkttyp definiert alle Attribute sowie deren Werte, welche ein Produkt ausmachen. Zudem kann festgelegt werden, welche Attribute für die Produktsuche verwendet werden sollen.

Darüber hinaus kann ein Kategoriebaum angelegt werden, der mit Produkten verknüpft werden kann. Damit ist es möglich, Produkte flexibel zu kategorisieren und Shop-Features über die Kategorisierung zu realisieren.

Sobald Produkttypen und -kategorien definiert sind, kann mit der Produktpflege begonnen werden. Diese erfolgt intuitiv im Bereich “Produkte” der Admin-Oberfläche.

Abhängig von den definierten Produkttypen, kann ein Produkt eine oder mehrere Varianten haben. Die erste Variante ist dabei die Mastervariante.

Ist die Produktpflege abgeschlossen, bietet commerctools einen Veröffentlichungsworkflow, mit dem die Produktinhalte explizit über die API verfügbar gemacht werden müssen. Über den gleichen Mechanismus, können Produkte zurückgezogen werden.

Step 5: Store-Front-Entwicklung in Magnolia

Für die Integration der in commercetools gepflegten Produktdaten und -strukturen mit Inhalten aus Magnolia, bieten sich verschiedene Wege an:

Das commercetools connector module bringt bereits Beispiel-Page-Templates für Magnolia mit, die Kern-Shopfunktionalitäten wie Teaser, Produktdetailseite, Nutzerverwaltung, Warenkorb und Checkout-Prozess und die benötigte Business-Logik bereitstellen. Genügen diese Funktionalitäten sowie die Umsetzung im Rahmen der Beispiel-Templates für die geplante Shop-Lösung, so besteht die Aufgabe lediglich darin, die Templates im Frontend anzupassen.

Gehen die Anforderungen an die Shop-Lösung darüber hinaus, kann zudem in eigenen Page-Templates über die commercetools TemplatingFunction (ctfn) auf eine Vielzahl von commercetools-Funktionen zurückgegriffen werden.

Für die Integration von commercetools in Java-basierter Business-Logik bindet das connector Module darüber hinaus das commerceTools SDK ein, mit dem die API vollständig abgebildet ist.

Veröffentlicht am 09. März 2017, aktualisiert am 14. Oktober 2020

Teilen auf

Sebastian Haftmann und Anja Unterberger-Schneck

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 eCommerce. In den vergangenen Jahren begleitete er u.a. Olympus Europe, Wort & Bild Verlag sowie Creditreform bei der Umsetzung komplexer Projekte. Anja Unterberger-Schneck ist Marketing Managerin bei Neofonie und seit mehr als 10 Jahre im IT-Umfeld tätig. Sie kennt die Bedürfnisse der Kunden genauso wie die technischen Möglichkeiten, die sie in Ihre Arbeit einfließen lässt.

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.