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.
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
- Native integration into the existing SAP ERP systems
- Multi Device User Experience
- Native integration into other services such as Datatrans, etc.
- Lean Catalog for SAP ERP and S/4HANA Integration (SAP Consulting Solution)
- CaRD service interface connecting SAP Content Server and Azure Blob Storage
- Image Processing using Azure Event Grid for Azure Blob Storage
- Web Content Accessibility support WCAG 2.1 level AA.
- External design system integration (BYODS) supporting the Stadt Zürich Design System (DESI).
Integration Domains
Integration domains describe typical areas in a hybrid landscape where integration is required.
High-level assessment of the integration architecture
| Integration Domain | Integration Services / Technologies |
|---|---|
| OnPremise2OnPremise | The S/4HANA web shop system is to be integrated with the SAP business suites of the departments involved. |
| OnPremise2Cloud | The SAP BTP accesses the S/4HANA on-premise system via the SAP Cloud Connector. |
| Cloud2Cloud | The SAP BTP integrates shop users via an Azure B2C identity federation. In addition, files and images are connected via Azure Blob Storage. |
| User2OnPremise | Shop users access the S/4HANA OnPremise system in their authorization context. |
| User2Cloud | Shop 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 Block | Usage |
|---|---|
| Form Element | Used to allow annotation driven value helps and side effects inside the checkout process. |
| Filter Bar | Planned 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.