Die Ausnahmesituation der letzten Monate zwang auch die DrupalCon Europe dazu, die Konferenz in Barcelona abzusagen und online zu veranstalten. "Wenn wir nicht nach Barcelona reisen können, bringen wir Barcelona in unser Homeoffice". Unsere Drupal-Expertinnen und -Experten haben sich kurzerhand im Homeoffice für die virtuelle Konferenz eingerichtet und spannende Insights aus ihren Projekten für die DrupalCon Europe 2020 vorbereitet.
Wissen teilen
Für uns ist es immer eine grosse Freude, unser Wissen mit der Drupal-Community zu teilen. So war unser Gepäck für die DrupalCon auch dieses Jahr wieder mit vielen spannenden Themen gefüllt. In drei verschiedenen Slots haben wir unsere Expertise und Erfahrungen mit Drupal eingebracht.
A Magazine Approach for Storytelling
Ina Widmer, Application Engineer, und Roy Voggenberger, Presales Consultant, haben im Vortrag "A Magazine Approach for Storytelling" ihre Erfahrungen aus dem Projekt schweizerfleisch.ch mit der Community geteilt. Der Vortrag bot spannende Insights relevant für Marketeers, Project Manager, Technologists (Drupal Devs und SEO Experts). Die Präsentation könnt ihr hier abrufen. Das Projekt wurde an den Splash Awards Switzerland 2020 in der Kategorie Design & UX nominiert. Zu den Splashawards.
Hintergrund zum Projekt
Das "Schweizer Fleisch Magazin" erhebt den Anspruch, führend beim Thema Schweizer Fleisch zu sein. Entlang der Strategie stellt es die Zielgruppe (von Privatpersonen über Lehrpersonen bis hin zur Gastronomie) und ihre Bedürfnisse in den Mittelpunkt und vermittelt Wissen über Schweizer Fleisch mit dem Ziel, Wertschätzung, Vertrauen und Sympathie in das Produkt und seine lokale Produktion zu stärken.
Die Botschaft des feinen Unterschieds von Schweizer Fleisch wird mit anspruchsvollen und lesenswerten Inhalten attraktiv und nachhaltig verankert. Das Magazin verbindet den Anspruch und das Erscheinungsbild eines Food-Magazins mit den Lese- und Suchgewohnheiten im Internet. Es transportiert Zubereitungswissen, Fachwissen sowie Berichte und Hintergrundinformationen zur nachhaltigen und heimischen Produktion. Erreicht wird dies durch die konsequente Nutzung digitaler journalistischer Darstellungsformen. Ergänzt durch unterstützende Massnahmen soll die Zahl der wiederkehrenden Besucher:innen deutlich gesteigert und die Breite der konsumierten Inhalte erweitert werden.
Ziele des Projekts
Ein zentraler Hub mit wertvollen Inhalten über Schweizer Fleisch.
Bessere Vermittlung von Inhalten und Benutzungsführung durch das Content-Modell.
Ständige Analyse (Lernen & Entwicklung) in einem wettbewerbsintensiven Umfeld.
Warum Drupal gewählt wurde
Bei der Erstellung eines Magazins ist es absolut notwendig, dass der Content an verschiedenen Stellen ausgespielt werden kann. Darüber hinaus ist SEO sehr wichtig, um jedem Topic eine Relevanz zu geben. Eine Vielzahl an Teasern hilft der Zielgruppe in ihrer Journey, um von Story zu Story weitergeleitet zu werden. Mit einem progressiven, entkoppelten Ansatz haben wir sicher gestellt, dass Drupal die richtige Technologie für die verschiedenen Herausforderungen der Site ist. Das wichtigste Feature ist die filterbare Taxonomie, die darauf basiert, dass Inhaltsseiten ihre URLs on the fly erhalten. Dies hilft auch bei der Bereitstellung einer grossen Anzahl von hochspezifischen Detailseiten. Eine wertvolle Gruppierung auf Basis von Ressorts ermöglicht das schnelle Auffinden historisch relevanter Themen.
Beiträge an die Community (Open Source Contribution)
Claro: Bugfixes and Patches
Gin: Initial Development!
Entity Reference Layout: Bugfixes, new features
Entity Reference Layout Restriction: Initial development!
GraphQL Responsive Image: Initial development!
Paragraphs Modal Edit: Bugfixes
Implementation of a Headless Corporate Website with an integrated B2C-shop based on Drupal & Magento
Kai Hartung, Project Manager, und Roman Domke, Senior Application Architect, haben ihre Erfahrungen mit der Implementierung einer Headless-Seite mit integriertem B2C-Shop basierend auf Drupal und Magento vorgestellt. Die Präsentation richtet sich sowohl an Business-Verantwortliche, die über eine Headless-Lösung nachdenken, sowie an technische Fachleute, die an einer entkoppelten Implementation basierend auf GraphQL Nuxt.js, Vue.js, und Kubernetes Hosting interessiert sind. Die Präsentation könnt ihr unter folgendem Link abrufen. Das Projekt hat den zweiten Platz in der Kategorie Technologie an den Schweizer Splash Awards gewonnen: Zu den Splashawards.
Hintergrund zum Projekt
salz.ch ist die Webseite der Schweizer Salinen und deren Hauptmarketinginstrument. Zusätzlich betreibt das Unternehmen einen B2C-Webshop. Im Jahr 2018 entschied sich Schweizer Salinen, ihr gesamtes digitales Kundenerlebnis neu zu gestalten. Die Website und der B2C-Webshop dienen als zentrale Kommunikationstools und sind Erfolgsfaktoren dieser Transformation. Die Konzeption wurde im Jahr 2019 erstellt, die Umsetzung folgte ab dem ersten Quartal 2020.
Auf der Website werden allgemeine Informationen über die Schweizer Salinen, die Produktion von Salz, Salz in der Schweiz sowie nützliche Tipps und Geschichten präsentiert. Zusätzlich wurden die bisherigen eigenständigen Marken-Websites integriert, die sich optisch vom Rest der Website abheben.
Der B2C-Webshop gibt der Kundschaft die Möglichkeit, sich ausführlich über die Produkte der Schweizer Salinen zu informieren und diese zu erwerben. Hier werden unterschiedliche Use Cases abgedeckt von Kleinpackungen und Geschenksets zum Kochen bis hin zu dem Verkauf von Grosspackungen von Streusalz. Der Webshop wurde nahtlos in eine Payment-Lösung sowie in die SAP-Backend-Prozesse integriert.
In Zukunft ist die Implementation von mehreren (Service-)Integrationen geplant. Als nächstes werden ein B2B-Webshop integriert sowie weitere endkundenorientierte Dienste: Eine Ticketing-Lösung für den Besuch der touristischen Attraktionen der Schweizer Salzminen und eine Wettervorhersage mit Fokus auf die Strassenverhältnisse im Winter. Mittelfristig sind die Anbindung von Internet-of-Things-Geräten in Salzsilos und eine weitere Digitalisierung der Besuche im Bergwerk geplant.
Ziele des Projekts
Fortschrittliches Design und Usability sowie integriertes Look&Feel über verschiedene Systeme.
Abbildung verschiedener Use Cases auf dem wichtigsten Marketinginstrument der Schweizer Salinen.
Ein herausragendes Erlebnis zu bieten und gleichzeitig einen zukunftssicheren Technologie-Stack zu implementieren, der durch Service-Integrationen erweitert werden kann.
Eingesetzte Technologien
Als Content-Hub setzt Salinen Drupal ein. Die Redaktion kann beim Erstellen von neuen Inhalten aus verschiedenen Vorlagen und Optionen wählen. Um der Redaktion möglichst viel Flexibilität zu bieten, haben die meisten Inhaltstypen ein flexibles Seitendesign unter der Verwendung des Layout Builders von Drupal in Kombination mit Paragraphen (unter Verwendung von Entity Reference mit dem Layout-Modul). Um die Benutzerfreundlichkeit weiter zu erhöhen, wird das neue Gin Admin Theme und die Toolbar eingesetzt. Die Daten (einschliesslich der Layout-Informationen) werden über GraphQL an eine Mapping-Schicht exportiert und erreichen schliesslich das Vue.js-Frontend.
Als E-Commerce-Komponente des Systems verwenden wir Magento. Dies verbindet sich mit SAP für Produktinformationen und ERP-Funktionalität (Lager/Bestellungen). Alle relevanten Produktinformationen werden über GraphQL an den Mapping-Layer übergeben. Für die zukünftige Erweiterbarkeit haben wir die Ecoplan proLine B2B-Erweiterung (www.ecoplan.com) implementiert.
Das Mapping-Layer haben wir in node.js geschrieben. Es kombiniert die von Magento und Drupal kommenden GraphQL-Daten und orchestriert Anfragen vom Frontend zurück in die Systeme.
Das Frontend haben wir als Vue.js-Anwendung mit Nuxt.js implementiert. Die Daten werden vom GraphQL-Gateway geholt und auf der Client-Seite gerendert. Der grösste Teil des Routings wird in Drupal durchgeführt. Spezielle Anwendungsfälle werden direkt in der Frontend-Anwendung implementiert. Zusätzlich haben wir Storybook integriert, um auf einfache Weise eine Bibliothek mit allen verfügbaren UI-Komponenten zu erstellen.
Herausforderungen des Projekts
Zusammenführung mehrerer Markendomänen in das Konzept
Technische Integration von Drupal und Magento in das Headless-Frontend
Integration in die bestehende Technologielandschaft inklusive SAP-Anbindung
Solide und zukunftssichere Basis für zukünftige Entwicklungen und weitere State-of-the-Art-Service-Integrationen
Flexible Layoutmöglichkeiten für die Redaktion
Beiträge an die Community (Open Source Contribution)
Im Rahmen der Entwicklung von salz.ch haben wir Patches erstellt und zu Modulen wie Entity Reference mit Layout, GraphQL, Gin Admin Theme, Gin Toolbar und Gin Login beigetragen.
A better Experience for Content Editors
Sascha Eggenberger, Senior User Experience Designer, hat in seinem Vortrag "A better experience for content editors" sein Know-How an die Community weitergegeben. Das Zielpublikum bestand aus Benutzer:innen und Editors. Sascha treibt die Weiterentwicklung des Drupal Admin UI Designs massgeblich und ist einer der Lead Entwickler des Drupal Design Systems.
Hintergrundinformationen
In der Präsentation hat Sascha vorgestellt, wie man Drupal im Jahr 2020 einrichtet, um ein verbessertes Content-Editing-Erlebnis zu erreichen. Wichtig ist dabei der Fokus auf die richtigen Contribution-Module. Sascha hat die Zuhörer:innen nicht nur durch die Konfigurationen der vorgestellten Module geführt, sondern Code-Snippets und ein voll funktionsfähiges Beispiel bereitgestellt. Damit haben die Teilnehmer:innen nach der Präsentation eine voll funktionierende Drupal-Instanz, die sie für ihr nächstes Projekt nutzen können. Des weiteren hat er das Gin Admin Theme das auf dem Fundament von Claro aufgebaut ist vorgestellt. Das Theme wird genutzt, um das Drupal-Content-Editor-Backend für die Marke/den Kunden zu personalisieren. Die Präsentation könnt ihr auf folgendem Link abrufen
Details
Anbei eine Liste der vorgestellten Module:
Gin Admin Theme & sein Ecosystem
Entity Reference with Layout
Paragraphs
Layouts in Core
Optional Frontend Module rendering im Backend für eine besser User Experience
Coffee
Field Groups
Media Library
Entity Browser
IEF