Highlights

Kunde:

Franchise-Unternehmen

Situation:

Erstellen und Bereitstellen einer Multisite-Umgebung

Herausforderung:

·   Drupal 8

·   Magento

Lösung:

·   Acquia Cloud Site Factory

·   Acquia Commerce Manager

Ergebnisse:

Acquia-Partner Axelerant erstellte für ein Franchise-Unternehmen eine skalierbare Multisite-Lösung, die das stetige Kundenwachstum abbilden kann. Damit lassen sich jetzt Marken-Seiten bauen, die Inhalte und E-Commerce-Funktionen zusammenbringen, um eine nahtlose Benutzererfahrung (Customer Experience) zu bieten.

Konsistente Markenerfahrungen liefern

Acquia-Partner Axelerant erstellte für ein Franchise-Unternehmen eine skalierbare Multisite-Lösung, die das stetige Kundenwachstum abbilden kann. Damit lassen sich jetzt Marken-Seiten bauen, die Inhalte und E-Commerce-Funktionen zusammenbringen, um eine nahtlose Benutzererfahrung (Customer Experience) zu bieten.

Die Herausforderung

Von den fast 90 unterschiedlichen Marken-Webseiten im Portfolio des Kunden liefen einige bereits auf Drupal, die anderen basierten auf einer Mischung aus Open Source- und proprietären Content Management Systemen (CMS). Zudem hatte nicht jede Marke bereits einen Web-Auftritt, da es beispielsweise in vielen Märkten des mittleren Ostens keine Online-Stores gibt. Die meisten Marken verfügten dort über physische Geschäfte. Andere verfügten zwar über einen Web-Auftritt, boten aber noch keine E-Commerce-Funktionen.

Daher fehlte eine Standardisierung zwischen den einzelnen Marken – sowohl aus der Sicht der Kunden als auch der Redakteure der Shops. Es war hoher Aufwand für die Wartung und die Aktualisierung dieser Seiten notwendig, während Zeit dafür fehlte, Webseiten für neue Marken zu veröffentlichen.

Eine einheitliche digitale Erfahrung (Digital Experience, DX) über alle Marken hinweg war dringend erforderlich. Deshalb gab es folgende vier Hauptziele:

  1. Bündelung aller Marken auf einer Plattform
    Der Kunde wollte alle Marken auf eine einzelne Plattform bringen, die zentral verwaltet wird und deren Architektur standardisiert werden kann.
  2. Höhere Produktivität beim Bearbeiten der Seiten
    Die Redakteure der einzelnen Marken-Seiten sollen in der Lage sein, bestehende Marken einfach zu ändern und neue Marken schnell und effizient auf die Seite zu bringen.
  3. Inhalte und E-Commerce
    Die Markenseiten sollten um Content- und E-Commerce-Funktionalitäten erweitert werden, um ein integriertes Kundenerlebnis zu ermöglichen.
  4. Reduzierung der Betriebskosten
    Außerdem wollte der Kunde die Kosten für den Betrieb und die Aktualisierung der Webseite signifikant senken.

Die Lösung

Aus technologischer Sicht bietet eine Kombination aus Drupal und Magento mit all ihren Funktionen großes Potenzial für Kunden, die komplexe Lösungen für herausfordernde Aufgaben suchen.

Im März 2017 holte das Franchise-Unternehmen Axelerant an Bord, um bei der Suche nach einer passenden Lösung zu helfen. Der Kunde betrieb bereits einige Seiten auf Magento, verfügte über eigens angestellte Magento-Experten zum Betrieb der Seite sowie ein kleines Team von Magento-Lösungspartnern.

Für das Frontend suchte das Unternehmen eine Lösung, die es erlaubt, auch ohne Entwickler Webseiten schnell in Betrieb zu nehmen. Hier entschied sich der Kunde wegen der hervorragenden Editorial- und Content-Management-Qualitäten für Drupal.

Case Study Franchise
Oben: Die Architektur der Gesamtlösung mit einem Drupal-Frontend.

 

Acquia Cloud Site Factory erfüllt die Anforderungen

Da die Acquia Cloud und Acquia Cloud Site Factory (ACSF) die Bereitstellung der Server hinter einer zusätzlichen Ebene versteckt, brauchen sich die Nutzer nicht mit der dahinterliegenden Komplexität zu befassen. Eine benutzerfreundliche Oberfläche erlaubt es, auch ohne Entwickler Seiten einfach und effektiv bereitzustellen. Damit eignet sich das Produkt sehr gut für Geschäftsinhaber, die neue Regionen und Zielgruppen erschließen wollen.

Die Verbindung von Drupal und Magento

Die meisten Markenseiten waren statische Webseiten und mussten um E-Commerce-Funktionen erweitert werden. Zum Beispiel sollten Kunden, die sich in einem Shop über ein bestimmtes Produkt informieren, dieses auch direkt in ihren Einkaufswagen befördern und kaufen können – ohne dafür jemals die Seite verlassen zu müssen.

Die Herausforderung war, die Inhalte aus Drupal mit den Produktmanagement- und Verkaufs-Funktionen von Magento auf einer einzigen Benutzeroberfläche zusammenzubringen.

Um diese Herausforderung zu bewältigen, entschied sich das Acquia-Team dazu, ein komplett neues Modul für die Verknüpfung von Drupal und Magento zu entwickeln, mit dessen Hilfe das Axelerant-Team später Dinge ändern und Fehler beheben konnte.

Diese Vorgehensweise forderte natürlich in den Projekten eine enge Abstimmung zwischen allen Technologie-Partnern. Bei der Umsetzung dieser Lösung arbeiteten verschiedene Teams von Axelerant, Acquia, Magento und den einzelnen Marken intensiv zusammen.

Die Ergebnisse

  • Alle Marken-Webseiten auf einer einzelnen Plattform
    Die Webseiten für jede der über 90 Marken des Kunden laufen jetzt auf Drupal 8.x.
  • Vereinfachte Wartung

Wartungsarbeiten und Sicherheits-Updates lassen sich jetzt zentral in der ACSF (Acquia Cloud Site Factory) verwalten.

Niedrigere Kosten

Da es durch die mit unserer Hilfe entwickelten Seitenvorlagen möglich ist, Webseiten mit geringem Entwicklungsaufwand schnell für neue Märkte bereitzustellen, sinken die Kosten auf ein Minimum.

Projekt-Highlights

Konfigurations-Management

Das Projekt erforderte eine einzigartige Herangehensweise: Der Kunde bietet verschiedene Marken auf jeweils unterschiedliche Seiten an. All diese Seiten sollten aber auf dem gleichen Code basieren und dieselbe Konfiguration teilen.

Normalerweise nutzen wir bei der Arbeit mit Drupal-Seiten die eigenen Import- bzw. Export-Strukturen für Konfigurationen, indem wir eine separate Ordnerstruktur außerhalb von Drupal definieren. Aus dieser Struktur exportieren wir alle Konfigurationsdateien, mit denen wir anschließend die neuen Seiten aufbauen. Da der Kunde jedoch unterschiedliche Seiten mit verschiedenen Konfigurationen einsetzte, konnten wir diesen Weg nicht gehen.

Stattdessen baute das Team mit Hilfe eines benutzerdefinierten Moduls eine neue Ebene auf, um die Standard-Konfiguration zu überschreiben und außer Kraft zu setzen. Jedes weitere benutzerdefinierte Modul kann zudem Konfigurationen definieren, die sich überschreiben lassen. Wird ein derartiges Modul installiert, kann auch die ursprüngliche, überschriebene Konfiguration importiert werden.

Drei Modul-Ebenen

Dafür waren drei verschiedene Modul-Ebenen notwendig: Commerce-Module, globale Module mit Konfigurationen, die für alle Marken gemeinsam gelten, sowie die markenspezifischen Module. Die Webseite wurde zunächst mit transaktionalen und nicht-transaktionalen Funktionen aufgesetzt und später durch andere Aspekte je nach Marke, Standort, Sprache etc. ergänzt.

Zum Beispiel kann eine Marke verschiedene Webauftritte in jeder der vier Regionen haben, in denen sie vertreten ist. Die Konfiguration dieser vier Seiten ist mit Ausnahme der Währung sehr ähnlich. Die angezeigte Währung wird über die überschriebenen Konfigurationen verwaltet.

Um diesen Vorgang zu vereinfachen, haben sich die Teams zu Beginn des Projektes dafür entschieden, die Struktur aller Seiten ähnlich zu halten. Sollten sich die Anforderungen ändern, lässt sich die Seite über eine Änderung der Konfiguration anpassen.

Benutzerdefinierte Themes für Markenseiten

Ähnliche Herausforderungen bestanden auch im Frontend. Zwar haben die Seiten ein ähnliches Layout mit ähnlicher Platzierung von Logo, Suchleiste, Fußzeile und Newsletter-Block, aber jede Marke hat dennoch ihren eigenen Style Guide, eigene Schriftarten und Farben.

Die Lösung für dieses Problem bildeten globale, generische Themes sowie Überschreibungsdateien für Themes im Frontend. Dadurch lassen sich bestimmte Aspekte anpassen, ohne dass CSS-Code geschrieben werden muss. Obwohl einige spezifische Anforderungen definiert wurden, können 70 – 80 Prozent der Arbeit mit Themes auf diese Art und Weise bewältigt werden.

APIs für mobile Apps

Das Team hat eine Reihe von APIs entwickelt, über die auch mobile Apps die Frontend-Daten erhalten können, während die Backend-Daten von Magento geliefert werden.

Für alle Aspekte des Frontends wie zum Beispiel die Seiten für Produktdetails, Produktsuche, Produktlisten oder auch die Kategorienliste kommt die Drupal-API zum Einsatz. Für Aufgaben wie Bestellungen oder die Registrierung ist die Magento-API zuständig.

Sofortige Suche

Case Study Franchise 2
Wie Inhalte für die Suche indiziert werden

 

Case Study Franchise 3
Wie Suchergebnisse gefunden werden.

Die Suchfunktion auf allen Markenseiten des Kunden wurde zunächst über Drupal und Solr implementiert. Später wurden diese Technologien durch Algolia und React ersetzt, da diese folgende Funktionalitäten und Verbesserungen bieten:

  • Sofortige Suche – im Gegensatz zu der Zeit mit Solr ist es jetzt möglich von jeder beliebigen Seite aus zu suchen, ohne die gerade besuchte Seite zu verlassen
  • Verbesserte Benutzererfahrung
  • Einfach konfigurierbare Abfragen und Highlights
  • Die Konfiguration der Suche ist jetzt für das Marketing-Team einfacher
  • Die Personalisierung pro Benutzer ist jetzt möglich
  • Da die Suche jetzt entkoppelt ist, ist es einfacher Teile der Anwendung zu ersetzen
  • Optimierte Nutzung der Infrastruktur-Ressourcen – unter Solr waren die meisten Ressourcen der Infrastruktur aufgebraucht
  • Während Nutzer bislang auf 36 Suchergebnisse limitiert waren, können sie jetzt mehr als 150 Ergebnisse finden

Checkout von einzelnen Seiten

Case Study Franchise 4
Der Checkout-Prozess mit der unter Drupal gehosteten React-Anwendung.

Das Checkout-Feature auf allen Markenseiten des Kunden wurde zunächst über Drupal implementiert. Später wurde es aus den folgenden Gründen durch React ersetzt:

  • Der gesamte Checkout-Prozess erfolgt auf einer einzigen Seite
  • API-Aufrufe und die damit verbundenen Ladezeiten ließen sich signifikant reduzieren (Früher erforderte jegliche Änderung ein Vor- und Zurückspringen zwischen den einzelnen Seiten. Das war besonders zeitaufwändig, da jedes dieser Ereignisse viele API-Aufrufe benötigte, um die Schritte und Informationen zurückzusetzen)
  • In Zukunft wird es möglich sein, von Drupal auf ein komplett anderes System umzuziehen
  • Eine signifikant höhere Leistung führt zu einer besseren Benutzererfahrung

Drupal-Front-End

Da das Design-System jetzt auf dem gleichen Basis-Theme aufbaut, verkürzt sich die Zeit für das Ausrollen neuer Marken-Webseiten und für Änderungen. Außerdem ergeben sich folgende Vorteile:

  • Da Assets nur bei Bedarf geladen werden, verkürzen sich die Ladezeiten der Webseiten
  • Reduzierte Bildgrößen durch das Konvertieren von Bildern in das WEBP-Format mit Hilfe von Cloudflare
  • Verbesserte Google-Page-Rankings durch Themes, die mit Accelerated Mobile Pages (AMP) kompatibel sind