TYPO3-Upgrade in Verbindung mit einer PIM-Anbindung
Upgrade der Installation auf TYPO3 Version 10 und Anbindung einer Schnittstelle zum PIM-System Viamedici EPIM.
Im September 2020 begann das große Projekt "TYPO3 Upgrade & PIM-Anbindung". Neben dem technischen Upgrade von TYPO3 auf die aktuelle Version 10.4 LTS, umfasste das Projekt auch die Anbindung eines PIM-Systems für den Produktkatalog auf der Website.
Bei diesem Projekt wurde mit einem "reproduzierbaren" TYPO3-Upgrade gearbeitet: Die lokalen Entwicklungsumgebungen installieren die aktuelle Datenbank der TYPO3 Version 8-Umgebung (Installation vor dem Upgrade) und führen alle notwendigen Upgrade-Schritte einmal per Skript durch. Auf diese Weise kann jederzeit der aktuelle Stand der Live-Umgebung eingespielt werden. Auch werden potentielle Fehlerquellen beim Live-Upgrade direkt erkannt.
| Kunde | pfm medical gmbh |
|---|---|
Projektzeitraum | 2020–2024 |
Entdecken Sie das Projekt aus der Sicht von:
CMS-Technologien
Im Rahmen einer TYPO3-Installation Version 10 werden aktuell insgesamt 6 Websites verwaltet. Darunter befinden sich neben 3 Corporate Sites auch diverse Websites zu Tochterunternehmen oder Projekten.
Die Besonderheit bzw. die Anforderung bei diesem Projekt ist, dass der Kunde über die Corporate Sites hinweg gemeinsame, als auch getrennte Inhalte pflegen und verwalten möchte. Die Vorteile von TYPO3 sind dabei, dass auch zentral gepflegte Inhalte für mehrere Seiten genutzt werden, durch das Feature der sogenannten "Lokalisierung" auch sprachabhängig für die entsprechende Site. Heißt, aktuell werden bspw. global News- und Pressmeldungen oder auch Events und Download-Dateien gepflegt, lokalisiert und dann sprachabhängig auf der deutschen oder englischen Seite ausgegeben.
CMS-Technologien
Neben den Core-Funktionalitäten von TYPO3 wurde die Installation der 6 Websites um das Bootstrap Package erweitert, sodass bereits ein umfangreiches und vielseitiges Set an technischen Konfigurationen und Einstellungen vorhanden ist. Auf deren Basis wurden dann weitere individuelle und kundenspezifische Anpassungen vorgenommen.
Da die Installation mehrere unterschiedliche Websites beinhaltet, kommen 3 verschiedene Website-Templates zum Einsatz, sowie vererbende Templates zur Nutzung von Synergien zwischen den einzelnen Sites. Zudem gibt es eine differenzierte Steuerung erlaubter Content-Typen – je nach den konkret definierten Möglichkeiten des Seiten-Designs.
Zusätzlich wurde Redis eingebunden, welches für einen datenzentierten Cache sowie zur Speicherung von Sessions genutzt wird.
Such-Technologien
Die Suchfunktion der Website basiert auf dem Such-Service Apache Solr. Dabei werden neben den normalen Seiten (Pages) auch News- und Pressemitteilungen, Events, Produktseiten und Download-Dateien indexiert und auf der Suchergebnisseite für die Nutzer ausgegeben.
Die globale Suchmaske der Website enthält zudem eine Suggest-Funktion sowie eine Gruppierung der Ergebnisse nach Kategorien.
Zusätzlich wird auf Basis von solrfal das Download-Center bereitgestellt. Hierbei handelt es sich um separate Assets, die unter speziellen Richtlinien zur Verfügung gestellt werden.
Such-Technologien
Die Suchfunktion der Websites basiert auf dem Such-Server von Apache Solr. Dabei werden neben den Inhalten auch News, Produkte, Events und auch die Datei-Metadaten durchsuchbar gemacht.
Neben der Auto-Suggest-Funktion mit einem Grouping nach Suchergebnistyp, umfasst die Funktion auch eine After-Search-Navigation. Die Ausgabe der Suchergebnisse sind anhand von konfigurierbaren Facetten groupiert und basieren auf einem individualisierten Suchalgorithmus mit konfigurierbarer Feldgewichtung.
Die Indizierung von Dateien und Produktdatensätzen erfolgt mit EXT:solrfal mit unterschiedlichen Datei-Pools pro Site.
Backend- und Frontend-Technologien
Neben dem TYPO3-Core wurde das Bootstrap Package integriert, welches bereits ein umfangreiches Set an Gestaltungsmöglichkeiten und Einstellungen für Backend und Frontend mit sich bringt. Um mehrspaltige Layouts zu ermöglichen (sog. Grid-Layouts) sind zusätzlich Container-Elemente eingerichtet worden.
Viele Inhaltselemente basieren auf dem Bootstrap Package und wurden an die Corporate Identity der pfm medical gmbh angepasst, wie bspw. das Akkordeon-Element, das Tab-Element oder die Timeline. Fehlende Inhaltselemente oder Elemente für spezielle Inhalte, die benötigt wurden, wurden kundenindividuell entwickelt und konfiguriert und mit Fokus auf eine redakteursfreundliche Backend-Pflege erstellt.
Backend- und Frontend-Technologien
Das Upgrade-Projekt brachte einige technische Optimierungen und Neuheiten mit sich:
- Während der Entwicklung wurde ein reproduzierbares, automatisches TYPO3-Upgrade in Form eines Shell-Skripts entwickelt, welches Upgrade-Wizards sowie eine Reihe individueller SQL-Befehle ausführt.
- Einbindung von Bootstrap (Migration von Foundation).
- Frontend-Rendering: Migration von css_styled_content auf Bootstrap Package/Fluid.
- Migration von Gridelements auf die Container-Extension und eigene CTypes.
- Projektspezifische Upgrade-Wizards zur Migration ersetzter Inhaltselemente.
- Einbindung von Webpack Encore und Image-Lazy-Loading.
Hosting und Monitoring
Wir hosten die Installation auf virtualisierter Hardware in Deutschland und sorgen für einen sicheren und störungsfreien Betrieb. Der Leistungsumfang umfasst den Betrieb auf allen Ebenen bis hinunter zur physischen Hardware. Wir kennen sowohl die betriebene Applikation, als auch die Systemumgebung und können beides aufeinander abstimmen. Zudem gehört auch die Wartung der Hardware sowie die regelmäßigen Updates aller Hardwarekomponenten zum Leistungskatalog. Durch unsere Monitoring-Tools haben wir die Installation permanent im Blick und können im Ernstfall sofort eingreifen.
Das Incident Reporting von Fehlerfällen mittels Sentry ermöglicht eine direkte Anbindung an das Ticketsystem, sodass Fehlerquellen automatisch schnell identifiziert und verarbeitet werden können.
Im Rahmen der direkten Zusammenarbeit im Projekt und dem nachgelagerten Daily-Business ermöglichen die automatisch erstellen Review-Umgebungen dem Kunden eine einfache Abnahme von Entwicklungen.
Hosting und Monitoring
Für das Hosting und Monitoring des Kundenprojekts sind folgende Einrichtungen vorgenommen worden:
- Direkte Anbindung von internen Systemen an die Produktivsysteme der Corporate Site per IPsec-VPN zum Austausch von Daten.
- Incident Reporting von Fehlerfällen mittels Sentry inkl. direkter Anbindung an unser internes Ticketsystem.
- Austausch des standardmäßigen datenbankbasierten Loggings durch eine direkte Anbindung von Graylog via GELF.
- Skalierende, organisatorisch beliebig parallelisierbare Weiterentwicklung unter Nutzung von Kubernetes; komplette und vollständig unabhängige TYPO3-Instanzen werden bei Bedarf durch GitLab automatisch erstellt.
- Automatisierte Vorbereitung von Patch-Updates und skriptgesteuerte Bereitstellung als Merge Request zur Prüfung.
PIM-Anbindung (Produktbereich)
Für den Produktbereich der Website ist eine Schnittstelle zum PIM-System von Viamedici EPIM entwickelt worden. Zusätzlich gibt es für die Einbindung von jeglichen Bildern eine Schnittstelle zum DAM-System Canto. Hinzu kam eine schnelle und unkomplizierte organisatorische und auch technische Zusammenarbeit mit dem für die PIM-Einführung bei pfmmedical verantwortlichen Dienstleister. Durch die kurzen und direkten Kommunikationswege entfielen etwaige Reibungsverluste oder fehlende Informationen.
Das vorgelagerte Projekt zum internen Produktkatalog von pfmmedical sorgte für eine erhebliche Beschleinigung bei der Umsetzung der PIM-Anbindung, dadurch, dass das zuvor durchgeführte Vorlaufprojekt bereits einige Erkenntnisse zu Struktur, Konzept und Umgang mit sich brachte. Im Zuge der Anbindung von EPIM an TYPO3 konnte auf die Erfahrungen mit dem Datenaustausch zurückgegriffen werden, eine Onboarding-Phase unserer Entwickler in Sachen EPIM "von Null" entfiel.
PIM-Anbindung (Produktbereich)
Die Datenübertragung für den Produktkatalog erfolgte über den eingerichteten VPN-Tunnel. Die umfangreichen XML-Datenbestände aus dem PIM sind bei dem Import in TYPO3 durch ein effizientes Handling binnen weniger Minuten verarbeitet und eingespielt. Die Auslieferung der Produktabbildungen erfolgt dabei direkt aus dem DAM-System Canto via Amazon CloudFront. Die Indizierung der Produktdaten in Solr wird per individualisiertem Record Indexer umgesetzt.
Für die Einbindung und weitere Nutzung der Produktseiten im Rahmen der gesamten Installation ist eine Einführung eines individuellen t3://-URL-Schemas zur internen Verlinkung von Produkseiten aus Contents heraus erarbeitet worden sowie eine Bereitstellung eines Linkpickers für pfmmedical-Produkte im Backend.
Highlights und kleinere Optimierungen während des Projekts
Im Rahmen des Projekts sind zugleich auch Gelegenheiten genutzt worden die Installation, als auch die Pflege und User Experience zu optimieren und das Projekt somit noch kundenfreundlicher zu gestalten. Ein paar Beispiele dazu:
Glossar-Verweise
Die Corporate Websites beinhalten ein Glossar, dessen Begriffe durch automatisch erzeugte Verweise in den Fließtesten der restlichen Seiten in Form von Tooltips ausgegeben werden. Dadurch sind Backlinks ins Glossar selbst nicht mehr notwendig und User erhalten die Begriffserläuterungen direkt beim Lesen der Texte.
Integration von CleverReach
Für die Anmeldung zum Newsletter ist ein systemseitiges Plugin konfiguriert worden, welches das alte HTML-Element ablöst. Die Basis dazu bildet die Forms-Extension für das Anmeldeformular, durch die zusätzliche Extension "cleverreach" steht via REST-API die Schnittstelle zum Newsletter-Dienst bei pfmmedical zur Verfügung.
Timeline-Element
Das alte Historien-Element, auf Basis von HTML, wurde durch ein neues modernes Element abgelöst. Durch kleinere Anpassungen im Design fügt es sich nahtlos in die bestehende Website ein und lässt sich im Backend redakteuerfreundlich pflegen. Das neue Timeline-Element ist nicht nur in der Usability von Vorteil, sondern auch hinsichlich der Performance durch die Lazy-Loading-Funktion.
Einbindung von Social Buttons
Für alle Websites der Installation sind zusätzlich Social Buttons eingebunden. Dabei unterscheidet sich die Auswahl der Social-Media-Plattformen je nach Zielgruppe der Sites. Dabei sind sowohl Verlinkungen auf die einzelnen Profile eingebunden, als auch Social Share Buttons, umso die Inhalte der Websites direkt in den sozialen Medien teilen zu können. Die individuelle Pflege der Profil-Links steht dem Kunden im Backend zur Verfügung.