Cocomore AG

Eingereicht von:

Projektname:

LuxairTours

Kategorie:

E-Commerce
Luxair_Homepage - Manuela Meier
Luxair_Megadropdown_1 - Manuela Meier
Luxair_Megadropdown_2 - Manuela Meier
Luxair_Query_builder_2 - Manuela Meier

Hintergrund

Der Reiseveranstalter LuxairTours ist Teil der LuxairGroup und hat seit 1968 die schönsten Urlaubsdestinationen und attraktive Pauschalreisen im Angebot. Wie bei vielen Playern aus der Touristik-Branche beginnt der Wettbewerb um die Reisenden spätestens auf der Website. Diese sollte daher mit Blick auf die Conversion optimiert werden, indem technisch präzise und schnell die gewünschten Ergebnisse in Form von Buchungen erzielt werden. Hierbei standen sowohl Neu- als auch Bestandskunden im Fokus, die Nutzer sollen eine emotionale Marke erleben, die ihnen einfach und schnell geräteübergreifende Buchungen ermöglicht.


Ziele

Neben ausschlaggebenden Aspekten der User Experience war die technische Umsetzung die zentrale Herausforderung. Der Knackpunkt des Projekts bestand in der Umsetzung der Buchungsprozesse einerseits, als auch in der reibungslosen Performance und perfekten Anbindung verschiedener IT-Systeme, wie z. B. der Buchungsmaschine. Gleichzeitig sollte es möglich sein, völlig unterschiedliche Layouts einfach zu erstellen, dabei aber auf schon vorhandene Komponenten zurückzugreifen, die teilweise durch externe Services zur Verfügung gestellt wurden. Eine reibungslose, technische Umsetzung sollte innerhalb eines agilen Entwicklungsprozesses mit Front- und Backend in Drupal 8 auf Grundlage der Anforderungen aus UX- und Design erfolgen.


Ergebnisse

In enger Zusammenarbeit mit dem internen Entwicklerteam von Luxair haben wir eine mehrsprachige Buchungsplattform auf die Beine gestellt, die vollständig responsiv funktioniert. Die technische Anbindung mit Luxair-eigenen und Dritt-Systemen (Buchungsmaschine) konnte nahtlos erfolgen. Die Kunden von LuxairTours erleben nun eine hoch performante Website, die eine effiziente und zufriedenstellende Buchung bereitstellt. Die Redakteure können einfach neue Seiten erstellen, über eine Weboberfläche Anfragen an die externen Services stellen und die Ergebnisse direkt überprüfen.


Technische Herausforderungen

Bei diesem Projekt wurden wir mit einigen technischen Anforderungen konfrontiert, die folgenden 3 möchten wir hervorheben:

 

*Query Builder*
Die Teaser zu den Angeboten werden größtenteils durch einen externen Service zur Verfügung gestellt und ändern sich häufig. Folgendes musste daher berücksichtigt werden:
- Teaser-Inhalte ändern sich sehr oft und müssen an den externen Service angebunden werden
- Content-Editoren müssen in der Lage sein, eigene Abfragen über eine einfach zu bedienende Benutzeroberfläche durchzuführen und die Ergebnisse direkt in einer übersichtlichen Form präsentiert zu bekommen
- Abfragen müssen gespeichert und überwacht werden, um keine veralteten Angebote zu enthalten. Sie können auch in verschiedenen Teaser-Typen wiederverwendet werden.
- Teaser können Daten von mehreren Abfragen kombinieren und in einer hierarchischen Reihenfolge verwenden oder mit manuell gesetzten Daten überschrieben werden. - Abfragen können an mehreren Stellen wiederverwendet werden, um die abgerufenen Daten als Quelle unter verschiedenen Bedingungen zu verwenden.
- Vorschaufunktionalität des externen Dienstes

Um diese Anforderungen zu erfüllen, verwenden wir die Drupal API und einige hilfreiche Module wie Inline Entity Forms oder Paragraphs. Die Architektur ist folgendermaßen aufgebaut (siehe Screenshot Luxair_Diagramm_1)

Innerhalb von Paragraphs können wir Teaser in unterschiedlichen View Modes platzieren. Diese Teaser können die zuvor durch die Content-Editoren definierten Queries beinhalten, die dafür sorgen, dass die entsprechenden Daten von den angebundenen Diensten geladen werden können. Auf diese Weise lassen sich Inhalte auf unterschiedlichen Seiten verwenden und ihre Darstellung kann durch die View-Modes ebenfalls beeinflusst werden – eine hohe Wiederverwertbarkeit von Inhalten ist somit gewährleistet. Siehe auch Luxair_Query_builder_1.png und Luxair_Query_builder_2.png

Durch die Verwendung von benutzerdefinierten Klassen als Services und benutzerdefinierten Plugins konnten wir die gesamte Interaktion mit den externen Datenquellen implementieren und steuern und so ein robustes System aufbauen, mit dem wir die externen Daten einfach nutzen und in Drupal integrieren können.

Per PHPUnit Tests konnten wir die Stabilität und Fehlerfreiheit des Kern-Systems abdecken und sicherstellen, dass die Integration der externen Services mit Drupal über unsere Custom Class Services und Plugins funktioniert.

*Rich-Frontend*
Designs und Markup der Seite waren bereits vorhanden, bevor wir uns an die Implementierung des Backends machten. Durch das Zurverfügungstellen eines großen Teils des Themes als Modul, welches als Library oder Twig Template eingebunden werden konnte, war es uns möglich, die Website so zu gestalten, dass das Markup- und das JavaScript-Verhalten bereits funktionierten, bevor die Drupal-Architektur entschieden und implementiert wurde. Da das Design und die Gestaltung auf Basis von Komponenten umgesetzt wurden, konnten wir den Redakteuren ebenfalls alle möglichen Komponenten und Layouts zur Bearbeitung anbieten und die Seite so immer gut aussehen lassen.

 

*MegaDropdown*
Einer der Seitenbereiche, der vielseitiger und attraktiver gestaltet wurde, war die Navigation. Hier wollte der Kunde in der Lage sein, fast jede Art von Inhalt anzuhängen, und dabei immer eine gewisse Struktur einzuhalten um sicherzustellen, dass es zu keiner kaputten Darstellungen kommen konnte.

Eine der Anforderungen war es, die Anzahl der Menüpunkte nicht einzuschränken; die Editoren sollten in der Lage sein, Menüelemente und Inhalt zu diesen Menüelementen zu erstellen, und nicht nur eine vordefinierte Anzahl von diesen zu füllen und zu modifizieren. Da Menüeinträge nicht übersetzbar sind und auch keine Felder hinzugefügt werden können, mussten wir hier kreativ werden. Zunächst haben wir einen Patch eingereicht, um Menüelemente übersetzbar zu machen (aber es braucht wohl noch etwas Arbeit braucht, bevor dieser in den Drupal-Core übernommen werden kann). Danach haben wir uns entschieden, das Menüformular zu ändern, um ein eigenes Feld hinzuzufügen - in diesem Fall einen Verweis auf einen benutzerdefinierten Blocktyp - und diese Referenz in einem der zusätzlichen Felder zu speichern, die in der Menu Item Datenbanktabelle zu finden sind.

Anschließend mussten wir diesen Block definieren, der mit dem Menü angezeigt werden sollte. Dafür haben wir uns für drei verschiedene Paragraph Fields mit unterschiedlichen Einstellungen für Paragraph-Types und Kardinalität entschieden. Wir haben nicht nur Paragraphs verwendet, die mit der Benutzeroberfläche erstellt wurden (verschiedene Arten von Referenzen mit benutzerdefinierten View-Modes), sondern auch benutzerdefinierte Paragraph-Types, die andere Inhalte wie benutzerdefinierte Blöcke oder sogar Entity Qeues renden können.

Um all dies darzustellen, wurden Preprocess-Functions und Custom-Formatters benötigt. Und da wir Entitäten auf verschiedenen Ebenen miteinander in Beziehung setzen, mussten wir sehr vorsichtig sein, um die Cache-Informationen zu verwalten. Dies war besonders schwierig für die Liste "Ziele", da die Reihenfolge in den verschiedenen Sprachen, die wir manuell laden mussten, nicht gleich war und eine große Anzahl von Entitätsfeldern und Informationen neu geordnet werden mussten.


Drupal Community-Beitrag

Wir haben keine neuen Module beigesteuert, aber wir haben an der Lösung verschiedener Probleme sowohl in Drupal Core als auch in contrib-Modulen gearbeitet. Der Kunde war von Anfang an froh, dass er die Patches und Issue Reports beisteuern konnte, die wir während der Projektentwicklungsphase gefunden hatten. Tatsächlich haben sie ein Konto bei Drupal.org (https://www.drupal.org/luxairgroup) erstellt und wir konnten ihnen die Credits der geleisteten Beiträge geben.

• Entity Reference Live preview:
- Reported and fix the issue: https://www.drupal.org/project/entityreference_live_preview/issues/2712833#comment-11120739
- Reported and submitted a fix:https://www.drupal.org/node/2779121

• Drupal Core:
- Report and provide first approach: https://www.drupal.org/node/2745805
- Provide new patches: https://www.drupal.org/node/2595839
- Patch reroll: https://www.drupal.org/project/drupal/issues/273595#comment-12057931
- New patch: https://www.drupal.org/project/drupal/issues/2784015#comment-11936430

• Entity queue:
- Report and provide suggested solution: https://www.drupal.org/node/2762821

• Inline Entity form:
- Report and provide initial approach : https://www.drupal.org/node/2833972

Sessions:
• Write testable code in Drupal 8 (Drupal Day Santiago 2016): http://slides.com/jlbellido/writing-testable-code-d8: Session, die wir beim Drupal Day in Santiago gehalten haben, und die auf unseren Erfahrungen in diesem Projekt aufbaut.


Erscheinungsdatum

07/06/2017