Aufbau einer Multisite-Solution für TRANSGOURMET
Welche Möglichkeiten bietet eine Marke wie Transgourmet beim Aufbau von Multisite-Lösungen für ihre Kunden und Mitarbeiter, um die Nutzung verschiedener Webseiten mit unterschiedlichen CMS-Systemen sowie Usern leichter machen zu können? 1xINTERNET schuf eine Drupal 8-Distribution, die auf allen Webseiten reibungslos angewendet werden kann. Das Front-End wurde dabei in ein Design-System von Patternlab integriert.
Was steckt hinter Transgourmet und wie konnten wir helfen?
Transgourmet ist ein Lebensmittelgroßhändler für Gastronomie, Hotellerie und Großverbraucher mit mehr als 3 Milliarden Euro Umsatz pro Jahr.
1xINTERNET wurde 2018 damit beauftragt alle Webseiten von Transgourmet und der Brand Selgros Cash und Carry zu erneuern und unter ein einheitliches technisches Konstrukt zu stellen. Transgourmet selbst, wie auch die Tochtergesellschaften betreiben weitere Brand- und Microsites.
Die Aufgabe bestand darin, ein einheitliches und dennoch flexibles Website-Produkt zu schaffen, welches den Relaunch aller Webseiten ermöglicht. Daher sollte ein robustes, sicheres und effizientes CMS eingesetzt werden, dessen Entwicklung und Instandhaltung zeitlich entkoppelt funktionieren kann.
Projektbeschreibung
Die Corporate-Websites und Microsites wurden bisher von unterschiedlichen Teams, mit verschiedenen CMS-Lösungen implementiert und gewartet. Auch das Design war nicht einheitlich.
Für ein homogenes Markenerlebnis war es daher notwendig einen gemeinsamen technischen Styleguide zu nutzen.
Als CMS wurde sich für eine Drupal-Distribution mit entkoppelten Design-System entschieden, auf deren gemeinsamer Code-Basis mehr als 6 Webseiten erstellt werden sollten.
Warum war Drupal die richtige Wahl?
Laut Unternehmensvorgaben waren die Nutzungsmöglichkeiten auf SAP und Drupal beschränkt. Das Unternehmen hat sich jedoch zuerst eine Fullservice Agentur ausgesucht und mit ihr gemeinsam die Vor- und Nachteile der Softwareauswahl besprochen. In gemeinsamer Absprache und insbesondere aufgrund der flexiblen Möglichkeiten und Open-Source-Lizenzierung Aspekten, wurde sich für Drupal entschieden.
Projektziele und Resultate
Das wichtigste Projektziel war die Erstellung einer Distribution, die aktuellen und zukünftigen B2B Anforderungen gerecht werden kann. Dabei stand insbesondere die Interaktion mit dem Kunden im Vordergrund. Folgende Anforderungen sollten bestmöglich erfüllt werden:
- Neues Design und User-Experience
- Individualisierbares Frontend für die unterschiedlichen Brand-Manuals der Seiten
- Markt Selektion und dazugehöriger personalisierter Content
- Branchenspezifische Filtereinstellungen bei Events mit geregelter Anmeldung
- Personalisierte Banner mit einem editierfreundlichem Banner-Admin-Tool für mehr als 200 Banner
- Rezepte mit unmittelbarem Call-to-Action in den Shop
Drupal 8 Distribution
1xINTERNET erstelle daraufhin eine Drupal 8 Distribution (Webseiten-Produkt), auf welcher alle Webseiten laufen können. Das Frontend wurde in einem Design-System von Patternlab integriert. Dieses wird von der Drupal-Distribution, wie auch von der B2B headless Commerce Lösung genutzt. Alle Webseiten sind soweit isoliert, dass Entwicklung, Instandhaltung und Deployment unabhängig voneinander durchgeführt werden können.
Die erste Relaunch fand 2019 für Transgourmet.de statt, darauf folgten 2 weitere Microsites. In 2020 ist der Relaunch für die Corporate-Website von Selgros.de geplant sowie alle weiteren dazugehörigen Microsites.
Herausforderungen
Die wesentliche Herausforderung bestand in der engen Zusammenarbeit mit allen Interessengruppen Seitens Transgourmets, da für jede Website ein eigener Product-Owner zuständig war und diverse Anforderungen stellte.
So wurde neben der Konsolidierung aller webbezogenen Technologien, wie dem Relaunch, auch weitere Aktivitäten die zur Abstimmung dienten, in die Cloud umgezogen.
Auf der technischen Seite bestand die Herausforderung darin, die teilweise veralteten Technologien nutzbar zu machen. Die User sind zumeist Köche und Küchenleitungen, die oft mit sehr veralteter Hardware und eingeschränkten Browserberechtigungen (IE9, InternetExplorer 11) arbeiten. Dies fügte eine weitere Komplexität zwischen modernen UX Anforderungen und technischer Limitation hinzu.
Modulare Architektur
Die Distribution beinhaltet mehr als 50 individualisierte Module, die projektspezifisch ein- und ausgeschaltet werden können.
Beispielhafte Module sind:
Transgourmet Search
Nicht alle Projekte benötigen eine Suche. Sofern diese jedoch aktiviert wird, werden alle aus der spezifischen Seite enthaltenen Content-Typen indexiert.
Übersetzungen / Seitenspezifische Sprachen
Transgourmet agiert in vielen osteuropäischen Staaten und Russland, zusätzliche Sprachen können mit vorkonfigurierten Einstellungen eingeschaltet werden.
Transgourmet Kataloge
Blätterkataloge/Handzettel spielen in dieser Branche weiterhin eine wichtige Rolle und mussten daher in die Website integriert werden.
Transgourmet Personalisierung
Spezifische Webseiten haben B2B-B2C Shopping Funktionalitäten. Diese benötigen Personalisierungs-Funktionen, um zielgruppenspezifische Banner abzubilden.
Transgourmet Märkte und Marktauswahl
Selgros verfügt in Deutschland über mehr als 40 Geschäfte mit unterschiedlicher Werbung, Inhalten und Veranstaltungen.
Transgourmet Rezepte
Konfigurierbare Rezepte für Gastronomie, Hotellerie und Gemeinschaftsverpflegung.
In diesem Projekt wurden keine hoch-komplexen Funktionen genutzt, sondern vielmehr eine breite Auswahl von Modulen sinnvoll miteinander kombiniert. Aus Sicht einer professionellen Drupal Agentur wurden sozusagen keine spezifischen Spezialitäten integriert, jedoch trotzdem einen sehr großen Wert für den Kunden geschaffen.
Nachfolgend werden die wichtigsten Features aus Kundensicht kurz beschrieben.
Events mit Anmeldeformular
Transgourmet bietet seinen Kunden eine Vielzahl von Events, Workshops und Hausmessen an. Diese werden teilweise in spezifischen, teils in übergreifenden Märkten ausgerichtet. Daher wurde ein Event Content-Type erstellt, der wiederum unterschiedliche Events beinhalten kann. Zu jedem ist eine Sign-Up Option gegeben.
Dadurch konnte Transgourmet die Eventorganisation von hohem E-Mail Verkehr zu einem modernen Work-Flow verbessern.
Katalog Management
Wie bereits erwähnt spielen Blätterkataloge/Handzettel etc. in dieser Branche weiterhin eine wichtige Rolle und mussten daher in die Website integriert werden. Manche dieser Kataloge werden auf der Webseite selbst erstellt, manche werden durch eine externe Software via API integriert. Neben der hohen Anzahl der sich daraus resultierenden Media Assets wurden weitere Metadescriptions und Taxonomien - Attributierungen im CMS durchgeführt.
Anbei erhalten Sie ein Beispiel.
Rezepte
Für Küchenchefs und Einkäufer der Lebensmittelbranche ist es eine gängige Praxis auf Basis von Personenzahlen zu kalkulieren und hochzurechnen und daran ihre Rezepturen und den Lebensmitteleinkauf abzustimmen.
Das erste wesentliche Feature, nach den Grundfunktionen des CMS, war die Entwicklung eines Rezeptportals mit unmittelbarem Call-to-Action in den Shop für Rezepte oder den angebotenen Cross- und Up-Selling Produkten. Der Shop ist eine Eigenentwicklung, der durch deep-linking erreicht wird.
Community Contributions
Innerhalb dieses Projekts wurden ebenfalls viele Contributions für Drupal-Module durchgeführt:
- Google ReCAPTCHA v3
Google reCAPTCHA v3 gibt einen spezifischen Score zurück, ohne dass der User aktiv interagieren muss. Basierend auf diesem Score werden Submissions erlaubt oder ein weiterer CAPTCHA-Test durchgeführt - Config Patch Gitlab
Wenn die Konfigurationen im Drupal UI, anstatt im Repository direkt geändert werden, können diese Änderungen als Merge Request an ein Gitlab gesendet werden. - Toastr messages
Das Toastr-Modul implementiert die Toastr.js Bibliothek. Toastr ist eine Javascript Bibliothek für Gnome / Growl Type non-blocking Mitteilungen.
Hosting / Operations
Alle Webseiten werden auf Pantheon.io, Issues und Sourcecode, auf Gitlab.com gehostet.
Das Design-System / Frontend für die Webseiten is in einem separierten Repository gehostet. Es gibt für das Webseiten-Produkt selbst ein Repository und für alle darauf aufbauenden Projekte ein eigenes Repository. Somit ist es möglich individuelle Features entkoppelt oder integriert ins Projekt zu bringen.
Alle Operationen sind vollautomatisiert mit Hilfe von Gitlab’s CI/CD System. Änderungen im Frontend oder dem Profil werden automatisch aus den Testsystemen der Webseite deployed. Diese werden wiederum automatisch auf die Testseiten der Projekte bereitgestellt.
