Webshop Relaunch und Salesforce Integration für WWF Schweiz

E-Commerce

Zusammenfassung

Relaunch der Website shop.wwf.ch mit Drupal 9 und Anbindung von Shop, Spenden und Webforms an Salesforce.

Projektbeschreibung

Das übergeordnete Ziel des WWF ist die Umwelt zu schützen und eine lebenswerte Zukunft für nachkommende Generationen zu gestalten. Umsätze aus dem Verkauf von nachhaltigen Produkten über den Webshop und Spenden leisten dazu einen wertvollen Beitrag.

Im Rahmen dieses Projektes sollte deshalb der Webshop, bis dahin betrieben mit Drupal 7, und auch das Spendensystem modernisiert werden. Gleichzeitig sollte das alte CRM durch Salesforce ersetzt werden und Zahlungen, sowohl für Spenden und als auch Shopbestellungen mittels FinDock, einer nativen Customer Payment Platform für Salesforce, erfolgen. Hierzu wurde das Spendensystem durch eine eigene Lösung ersetzt und der Shop mit Drupal 9 neu aufgesetzt und konzipiert.

Projektziele und -ergebnisse

Das Projekt ging im März 2022 mit Drupal in der Version 9 online. Eingesetzt wurde dafür Drupal Commerce, sowohl für die Spenden als auch für den Shop. Bei der Konzeption wurde die Frage aufgeworfen, ob der Shop weiterhin unter einer eigenständigen Domain verfügbar sein sollte, oder ob er in die bestehende Hauptseite wwf.ch integriert werden sollte. Wir entschieden uns für eine Einbindung in die bestehende Hauptseite, vor allem weil so alle Inhalte zentral in einem CMS verwaltet werden können und eine Verzahnung mit den passenden Website-Inhalten für eine optimale Customer-Experience von großer Bedeutung ist. Hierfür wurden eigene Seitenelemente programmiert, mit denen Produkte, je nach Verfügbarkeit und Kategorie, auf beliebigen Inhaltsseiten gelistet und angepriesen werden können. Trotzdem erhielt der Shop einen eigenständigen Bereich, inklusive spezifischer Header und Footer. Siehe https://www.wwf.ch/de/shop.

Migration und Anreicherung der Produkte
Wichtige Faktoren beim Relaunch waren die Migration der bestehenden Produkte und die Anreicherung mit weiteren Daten wie Labels, Verfügbarkeiten, Kategorien und Medien. Hierzu wurden umfangreiche Migrationsskripte programmiert und auf die Bedürfnisse des WWF angepasst.

Salesforce Integration für den Shop
Die Anbindung von Salesforce war ebenfalls ein zentraler Punkt dieses Projektes. Alle Bestellungen und Kundendaten sollten in Salesforce abgelegt werden und als Zahlungsschnittstelle sollte FinDock eingesetzt werden. Das Drupal Salesforce Modul erwies sich dafür als sehr gute Grundlage, vor allem die Authentifizierung und die Verknüpfung von Drupal Entitäten und Salesforce Objekten konnten damit optimal umgesetzt werden. Auch im Betrieb erwies sich dieses Konzept als robust, weil auch bei potentiellen Ausfällen von Salesforce APIs Daten erneut gesendet werden können. Wir haben hierzu eine eigene Queue entwickelt, die auch bei vielen gleichzeitigen Bestellungen die Salesforce APIs nicht überlastet. In Kombination mit einem ausführlichen Logging ist so immer für Transparenz und Datensicherheit gesorgt.

Für Logging und Notifizierungen setzen wir deshalb das Past Log Modul ein und haben dafür auch ein kleines Integrationsmodul für das Salesforce Modul erstellt und der Community zur Verfügung gestellt: https://www.drupal.org/project/salesforce_past

Der Abgleich der Produkt-Verfügbarkeiten erfolgt direkt mit Salesforce, weil nicht alle Bestellungen über den Webshop erfolgen müssen. Auch hierfür haben wir ein kleines Drupal Modul erstellt: https://www.drupal.org/project/salesforce_commerce_stock

Salesforce Integration für Spenden
Auch Zahlungen für Spenden sollten über FinDock erfolgen. Hierfür wurde das alte Spendensystem abgelöst und die Formulare mit einem eigenen Commerce Checkout ersetzt. Eine Besonderheit ist hier, dass kein Warenkorb verwendet wird, sondern bei Spenden Bestellungen vom System direkt generiert werden und Daten von eigenen Spenden-Produkten übernommen werden. Über konfigurierbare “Spendenteaser”, die auf beliebigen Website-Inhalten angezeigt werden können, gelangt man so direkt in den speziell für Spenden angepassten Checkout. Siehe https://www.wwf.ch/de/spenden.

Salesforce Integration für Webforms
Nachdem auch Webforms sehr stark im Einsatz sind, sind natürlich auch diese an Salesforce angebunden (Web-to-Lead). Eine Besonderheit ist hier, dass Newsletter-Anmeldungen auch von einem Dritt-Service über eine Drupal API für Webform Submissions an Salesforce gesendet werden.

Mehrsprachigkeit
Eine Stärke von Drupal ist die Mehrsprachigkeit. Auch bei diesem Projekt war es eine Anforderung, dass alle Produkte, Inhaltsseiten und Checkouts in zumindest drei Sprachen verfügbar sind. Diese Anforderung konnte, sowohl für Spenden als auch für den Shop, mit Drupal optimal umgesetzt werden.

End-to-End Tests mit Cypress.io
Je mehr Services und APIs für den ordnungsgemäßen Betrieb einer Applikation wie einen Webshop verantwortlich sind, desto wichtiger ist es, die Funktionalität regelmäßig zu testen. Besonders nach Updates sind automatisierte Tests bei Projekten in dieser Größenordnung unerlässlich. Wir verwenden hierzu eine Kombination aus PHPUnit Kernel Tests und End-to-End Test mittels cypress.io. Besonders cypress.io vereinfacht uns das Testen von der Abwicklung einer Spende und Shop Checkouts mit einer großen Anzahl von Kombinationen von Produkten und Zahlungsmethoden (wiederkehrende Zahlungen, Einmalzahlungen, unterschied. Zahlungsanbieter, usw.).

Ein vorbildliches Arbeitsumfeld
Die Zusammenarbeit mit dem WWF hat uns sehr viel Freude bereitet, nicht nur weil wir uns mit den Zielen dieser Organisation sehr gut identifizieren können. Wir danken für das erneut entgegengebrachte Vertrauen und freuen uns auf die weitere Zusammenarbeit. Einen besonderen Dank möchten wir auch an MD Systems für die Unterstützung bei der Arbeit mit dem FinDock Drupal Modul und den Austausch bzgl. Salesforce-Integrationen aussprechen. Das Design für den Shop kommt von getunik, auch hier war die Zusammenarbeit vorbildlich und höchst angenehm.

Herausforderungen

Effizienter und technisch sinnvoller Datenaustausch zwischen Drupal Webshop und Salesforce
Eine besondere Herausforderung war die Konzeption des Datenaustausches zwischen Drupal und Salesforce. In Salesforce fehlt ein Produkt-Management und generell hat FinDock kein logisches Verständnis für Warenkörbe. Wir waren deswegen gezwungen, die Kommunikation mit Salesforce teilweise direkt abzuwickeln und mit Zahlungsdaten zu synchronisieren. Gewisse Limits der Salesforce API machten darüber hinaus ein paar Sonderprogrammierungen notwendig.

Drupal Commerce ohne Warenkorb-Funktionalität
Drupal Commerce ist grundsätzlich nicht für einen Betrieb ohne Warenkorb ausgelegt. Für das Spendensystem war es jedoch notwendig, dass man direkt in den Checkout verlinken kann und Daten wie Spendenprodukt, Betrag und Spendenfrequenz kontextuell übernommen werden. Die Drupal Commerce APIs sind jedoch so flexibel, so dass wir auch hierfür eine gute Lösung finden konnten.

Community-Beiträge

Wir glauben an Open Source und tragen seit 2005 aktiv zur Drupal-Community bei. Wir steuern nicht nur Code bei, sondern wir versuchen auch, Drupal in der DACH Region zu fördern und die lokale Community durch die Organisation von Meetups oder Camps zu unterstützen.

Folgend eine Liste von Contributions, tlw. wurde weiter oben bereits darauf eingegangen. Die folgenden Module wurden für dieses Projekt programmiert:

Address_autocomplete
https://www.drupal.org/project/address_autocomplete

Modul Persistent Visitor Parameters
https://www.drupal.org/project/persistent_visitor_parameters

Modul Salesforce Past Log
https://www.drupal.org/project/salesforce_past

Modul Salesforce Commerce Stock Mapping
https://www.drupal.org/project/salesforce_commerce_stock

Modul Past Log Alerts
https://www.drupal.org/project/past_alert

Google Product Categories
https://www.drupal.org/project/google_product_categories

An den folgenden Issues wurde im Rahmen dieses Projektes gearbeitet:

Webform Issue (Composite elements - title max length 128)
https://www.drupal.org/project/webform/issues/3300331
Commerce: Product taxonomy filter
https://www.drupal.org/project/product_taxonomy_filter/issues/3194006

Die acolono GmbH ist darüber hinaus unterstützendes Mitglied der österreichischen Drupal-Association und ihre Gründer Christian Ziegler und Nico Grienauer sind im Vorstand des Vereins und eine der treibenden Kräfte von Veranstaltungen wie dem DrupalCamp Vienna, den Open Minds (Open Source) Award oder dem DrupalCon Vienna Community Day.

Warum sollte dieses Projekt die Splash Awards gewinnen?

Das Projekt zeigt, dass Drupal eine sehr gute Wahl ist, wenn es darum geht, Redaktionsteams dazu zu befähigen, Inhalte, Landingpages, Produkte und Spendenformulare flexibel zu gestalten, zeitnah online zu stellen und modern und ansprechend präsentieren zu können. Auch für mehrsprachige Webshops und die individuelle Programmierung von CRM Anbindungen ist Drupal durch die vielfältigen APIs und Funktionalitäten von Drupal Core, Drupal Commerce und diverser Contrib Module eine sehr gute Wahl. Dieses Projekt ist ein Beleg dafür. Nicht zuletzt hat uns die Arbeit an diesem Projekt sehr viel Spaß gemacht, auch durch die gute Zusammenarbeit mit dem Team von WWF!