salz.ch - Swiss Saltworks - Headless Experience Platform

Case summary

salz.ch consolidates several previously independent websites and technologies in a modern headless experience platform combining Drupal and Magento with a state-of-the-art Nuxt.js (Vue.js) front end.

Case description

salz.ch is the website of Swiss Saltworks and their main marketing tool as well as a B2C web shop. In 2018, Swiss Saltworks decided to recreate their whole digital customer experience. As one of the main communication tools, the website and the B2C shop are key success factors for this transformation. Starting in 2019 with the conception of the website, the implementation was done in the first half of 2020.

On the website general information about Swiss Saltworks, the production of salt, salt in Switzerland as well as useful tips and stories are presented. Additionally, the former independent brand websites related to Swiss Saltworks have been integrated while still be visually distinguishable from the rest of the website.

The B2C web shop gives customers the possibility to inform themselves in detail about the products of Swiss Saltworks and purchase them. Here, different use cases are met by offering everything from small packages and gift sets for cooking to large packages of road salt. The web shop is seamlessly integrated into a payment solution as well as into the SAP backend processes.

In the future, several (service) integrations will be added. Next, a B2B web shop will be launched as well as end-customer-facing services like a ticketing solution for visiting the touristic attractions of Swiss Saltmines or a weather forecast focused on street conditions in winter. In the mid run, connections to IOT devices in salt silos and further digitization of the visits in the mine is planned.

Case goals and results

The goal of the digital experience initiative was to deliver an outstanding experience to the end-user and at the same time implement a future-proof technology stack which can be extended in the future.

Drupal is used as the contenthub of the system. Editors can choose from various templates and options when creating content. To offer as much flexibility as possible, most of the content types offer a flexible page design using Drupal's Layout Builder in combination with Paragraphs (using Entity Reference with Layout module). To further increase the editor's experience, the new Gin Admin Theme and Toolbar is used. The data (including layout information) is exposed via GraphQL (V4) to a mapping layer and finally reaches the vue.js front end.

Magento is used as the e-commerce component of the system and also connects to SAP for product information and ERP functionality (stock / orders). All relevant product information is exposed via GraphQL to the mapping layer. For future extensibility, the Ecoplan proLine B2B extension (www.ecoplan.com) was implemented.

The mapping layer was written in node.js and combines the graphQL data coming from Magento and Drupal as well as orchestrates requests from the front end back into systems.

The front end is implemented as a vue.js application using Nuxt.js. The data is fetched from the graphQL gateway and rendered on client side. Most of the routing is done in Drupal but specific use cases are directly implemented in the front end application. Additionally, Storybook was integrated to easily create a library of all available UI components.

Challenges

- Combination of several brand domains into the concept
- Technical integration of Drupal and Magento into headless front end
- Integration into existing technology landscape including SAP connectivity
- Solid and future-proof base for future development and further state of the art service integrations
- Flexible layout options for editors

Community contributions

As part of developing salz.ch, we created patches and contributed to modules such as Entity Reference with Layout, GraphQL, Gin Admin Theme, Gin Toolbar, and Gin Login.

Additionally, we presented insights from the project on a local Drupal meet-up of the Zurich Drupal User Group Meetup and we'll present the case study at DrupalCon Barcelona 2020.

Hosting

Hosted in Unic's private cloud hosting at Equinix data center in Zurich.

Why should this case win the splash awards?

- Cutting edge use of Drupal in a headless system design.
- Modern and functional design.

Therefore, this project is a show case for the use of Drupal in a headless setup. It will also be featured as a case study on DrupalCon Barcelona.