Ziehl Abegg – Kundenportal
Das neu entwickelte Portal bietet registrierten Kunden in ihrem persönlichen Profil hilfreichen Online-Service, wie direkte Produktanfragen zur individuellen Angebotserstellung, Bestellhistorien, direkte Ansprechpartner und vieles mehr.
Zielsetzung
Erstellung eines übersichtlichen und zentralen Systems (dem Kundenportal), um verschiedene Systeme und Informationen zu bündeln und für den Kunden bereitzustellen. Anforderungen:
- Profilverwaltung
- Benutzeradministration
- Bestellhistorie & Shop
- Verlinkungen zu anderen Systemen und wichtigen relevanten Seiten der Webseite
strategie
Implementierung des Frontend mit VUE.JS inkl. der Funktionalitäten für Profilverwaltung und Benutzeradministration, sowie die Anbindung von Schnittstellen im Backend für das ERP- und CRM-System, Login-Funktionalität und dem PIM.
umsetzung
Für die Implementierung des losgelösten Frontends wurde VUE.JS genutzt, sowie ein reaktive Oberfläche und schnelle Reaktionen durch partielles Laden sichergestellt.
Die Schnittstellenanbindungen wurden im Backend folgendermaßen umgesetzt:
- ERP via SOAP-Schnittstelle
- Login via Microsoft Azure
- CRM via OATH und Microsoft ODATA
- PIM via JSON-Datei
hotbytes in 3 Worten:
schnell, unkompliziert & kompetent
Steffen Halbmann
Teamleitung Digitale Kommunikation
PERSÖNLICHES
DASHBOARD
ONLINE-SERVICE
VUE.JS
SOAP
MICROSOFT AZURE
OATH und Microsoft ODATA
JSON
Besonderheiten im Projekt
PROFILVERWALTUNG & BENUTZERADMINISTRATION
Die Profilverwaltung bietet Nutzern die Möglichkeit, ihre Daten per Anfrageprozess zu ändern. Die Passwortänderung erfolgt über einen direkten Link zu Azure. Die Benutzeradministration ermöglicht Nutzern mit entsprechenden Berechtigungen die Anlage und Verwaltung von Mitarbeitern. In der Bestellhistorie werden die per Schnittstelle geladenen Bestellungen angezeigt. Dabei werden integrierte Filterfunktionen genutzt, die sowohl auf der Schnittstelle suchen als auch innerhalb der geladenen Datensätze in Vue.js durchgeführt werden. Verlinkungen zu externen und internen Seiten bieten die Möglichkeit, Inhalte aus dem TYPO3-System in Vue.js darzustellen, dadurch können Redakteure die Inhalte problemlos pflegen.
FRONTEND MIT VUE.JS
Reaktive Oberflächen sorgen dafür, dass bei Klick Teile des Frontends neu geladen ohne, dass die Nutzer das wahrnehmen. Lediglich bei längeren Ladeoptionen wie Laden von Daten via Schnittstellen werden Ladeanimationen eingeblendet. Aus dem Backend benötigte Informationen werden mittels Schnittstellen in das losgelöste Frontend (headless) geladen um diese dort anzuzeigen. Dadurch ist das Backend abtrennbar und kann beispielsweise ersetzt werden. Partielles Laden von Daten stellt eine schnellere Reaktion und Anzeige von Informationen sicher, da nur notwendige Daten via Schnittstellen geliefert und geladen werden.
ANBINDUNG LOGIN
Der Login wurde mittels Microsoft Azure via openID/OAUTH eingebunden. Hiefür wurde TYPO3 angepasst um entsprechende Frontend-User zu erstellen und so den TYPO3-eigenen Login- und Berechtigungsmechanismus zu verwenden. Die Daten werden hierbei kundenintern vom CRM-System an Azure übergeben und nach dem Login von uns per JWT-Token ausgelesen.
ANBINDUNG ERP-System
Das ERP-System, welches mittels Übergabe der CRM Kundennummer Bestellungen lädt, wurde via SOAP-Schnittstelle an das zentrale System angebunden. Zudem werden wichtige Daten wie Produkte, Kategorien und Filter mithilfe eines JSON-Exports aus dem ERP importiert.
ANBINDUNG CRM-SYSTEM
Das CRM-System wurde zum Laden von Benutzerinformationen via OAUTH und Microsoft ODATA-Schnittstelle angebunden. Die Daten und Rechte werden im TYPO3 ausgelesen und im CRM aktualisiert bzw. angelegt. Die TYPO3-Frontend-User werden aus den CRM Datensätzen mit Benutzergruppen je Berechtigung aktualisiert. So lassen sich die Inhalte in TYPO3 anhand der Nutzergruppen über die Standardfunktionen ein- und ausblenden. Die Impersionate-Funktion greift, wenn ein Azure-Login/TYPO3-Frontend-User mehrere CRM-Benutzer hat. Hier lässt sich im TYPO3 Frontend zwischen den CRM-Usern wechseln.
Anbindung PIM
Um Produkte in unseren Shop zu importieren, verwenden wir ein Product Information Management (PIM)-System, das die Produktinformationen in einer JSON-Datei bereitstellt. Der Importprozess wird mithilfe eines Command Tasks durchgeführt, der vom Kunden eigenständig ausgeführt werden kann. Diese Vorgehensweise ermöglicht dem Kunden einen unabhängigen und flexiblen Import seiner Produktinformationen.
