Skip to content

Webshop 2.0

The Webshop 2.0 of the City of Zurich is a Multi Cloud Omnichannel E-Commerce solution, based on the SAP Business Technology Platform (BTP) and Microsoft Azure.

Stadt Zürich Webshop 2.0 Solution Diagram

Omnichannel E-Commerce

Putting a successful omnichannel strategy into practice first requires adapting the organizational structure in order to operate and expand sales channels across departments and thus avoid information silos.

The new webshop allows central access to cross-departmental information, with the option of integrating additional channels in the future.

Cross-channel integration allows a business process to start on a device such as a smart phone and later be continued on the desktop. All process-relevant information is retained user-specifically and can be used across devices.

Functionalities such as the Excel export of the product catalog allow a simple change of media. This means that the order data can be further processed offline. The further processing then takes place later by importing the article into the shopping cart (file upload or copy and paste).

Key Features

Integration Domains

Integration domains describe typical areas in a hybrid landscape where integration is required.

High-level assessment of the integration architecture

Integration DomainIntegration Services / Technologies
OnPremise2OnPremiseThe S/4HANA web shop system is to be integrated with the SAP business suites of the departments involved.
OnPremise2CloudThe SAP BTP accesses the S/4HANA on-premise system via the SAP Cloud Connector.
Cloud2CloudThe SAP BTP integrates shop users via an Azure B2C identity federation. In addition, files and images are connected via Azure Blob Storage.
User2OnPremiseShop users access the S/4HANA OnPremise system in their authorization context.
User2CloudShop users access the SAP BTP and relevant services.

SAPUI5 User Experience

The Webshop application is developed as a SAPUI5 application using a custom theme that is driven by the UI Theme Designer runtime and will be automatically compiled and delivered concerning the used SAPUI5 version.

To deliver the latest cloud available patch release, it bootstraps a SAPUI5 1.120 LTS Evergreen Version.

SAPUI5 Freestyle with SAP Fiori Elements

Placeholder Loading

The UX design pattern of Skeleton Screens is applied by following the SAP Fiori Design Guidelines Placeholder Loading pattern, that is integrated into the sap.fe.placeholder library.

Flexible Programming Model

The following Building Blocks are integrated into the freestyle application:

Building BlockUsage
Form ElementUsed to allow annotation driven value helps and side effects inside the checkout process.
Filter BarPlanned to be integrated inside custom list report design pattern.

Prototyping with CAP for RAP

The business services are generally developed with the CAP4RAP approach and after customer release migrated as RAP service.