Content Commerce: integrating Magnolia CMS and SAP Hybris

Online shops can enhance the customer experience through storytelling. But until now only a few companies, such as Bechtle AG, have exploited the connection between content and commerce. The challenges involved are especially acute at the technical level. Sebastian Haftmann and Benjamin Fiebig from Neofonie explain how Magnolia CMS and SAP Hybris Commerce can be vertically integrated.

For an online shop to be successful, the customer experience must be prioritized: the visitor to the shop wants to be met on an emotional level. He wants to find out everything about the product, whether that be geographical origins, the individual parts it’s made of, or the vision of the company founder. More than anything, B2C consumers long to hear stories, and it’s here that companies can make the most of their competitive advantage. The consumer experience is crucial and primarily influenced by the vividness of images. Today’s consumers want to see and experience products in a multimedia environment. This started with pictures and videos, but now virtual and augmented reality are the latest technological ways of immersing customers in a rich product presentation.

Even supposedly rigid B2B business can be enlivened through storytelling and emotional visual content, thereby improving the shopping experience. But until now very few companies have exploited the connection between content and commerce. The hurdles they face are often due to technical factors. In many cases the CMS capabilities of a shop system are simply unable to offer a genuine customer experience. In addition, implementation via the shop’s built-in CMS functionality often turns out to be unwieldy and inflexible, not to mention time-consuming.

Under such circumstances, it makes sense to integrate the ecommerce capabilities of the shop system with the content capabilities of a powerful CMS for a convergent shop solution.

Learn more about integrating your cms and your commerce platform.

Generally, shop systems are expanded by means of the horizontal integration of software through export/import and the simulation of data structures in the product information management (PIM) of the CMS. If there are subsequent changes in the e-commerce system, these often have to be carried out in the CMS later on. Modern vertical architectures are available in order to avoid this and to achieve greater independence and flexibility.

E-commerce giants such as Amazon, Otto and Zalando rely on a vertical system profile for their complex online shops. Systems that are decoupled from each other and carry out independent functions are brought together to create a user experience. This allows a greater level of independence and flexibility.

Bechtle AG is one of the leading IT trading companies in Europe and has brought together all the information on the company, as well as all services and products, on its new website. The shop and company websites, which had previously been separate, are now seamlessly merged on one platform. The basis for this is a vertical IT system structure in which Magnolia CMS and the shop system SAP Hybris have been integrated.

In order to achieve this, the entire system had to first be divided into vertical structures in accordance with identifiable technical features. Every vertical structure represents an independent application that has its own front-end (as applicable) and its own data retention system. The data exchange for integration purposes is carried out via REST interfaces.

The vertical structure “Publishing” with Magnolia CMS as the core provides the web content (platforms, imprint, general terms & conditions, etc.) of the shop. At the same time, the front end is integrated for the delivery of the shop. The layout and styling, as well as the information structure of the shop website, are defined at this point. Generally speaking, a web publishing team is technically responsible for these vertical structures.

Product content management is carried out in the vertical structure “Commerce” via Hybris. The product data model and product catalog, including all the product attributes, are managed in Hybris. Hybris also provides the availability, shopping cart and checkout functionalities. Commercially relevant data such as product, price and user data flow into Hybris from upstream CRM and/or ERP systems.

Further shop components outside of the two core functionalities, such as product search or a mail service for the handling of the shop’s email communication, can be realized via further vertical structures.

The two vertical lines “Commerce” and “Publishing” must now be integrated with one another on a functional level. Technically, this is achieved as follows: product content, including product media, is managed via product management in Hybris, i.e. via the “Commerce” vertical structure. Shopping cart functionality and order management are also part of the technical responsibility of this vertical structure. In order to provide the aforementioned functions for other services, REST interfaces can be implemented in Hybris for shop functionalities such as product teaser, product detail pages and shopping cart and checkout pages, which return semantic (unstyled) HTML—what one might call the front end of the vertical structure “Commerce”. This HTML is integrated by Magnolia when rendering the relevant page in a generic framework consisting of an integrated header and footer, and provided with styling in accordance with the shop design. The contents and functionalities from the vertical structure “Commerce” can then be combined on a website with any editorial content from Magnolia as desired.

The advantage of integrating the semantic HTML is that Magnolia is completely neutral with regard to the resources delivered by Hybris. The vertical structure “Commerce” alone determines the content and the structure of the product contents and “Commerce” functionalities, without any technical dependencies on the vertical structure “Publishing”. Changes to the attributes in a product category or sequence in its representation can be realized and rolled out in Hybris, without the need for Magnolia to be involved. As well as the visual REST integration with HTML as the data format, further traditional shop functionalities can be realized as pure data exchange via REST/JSON integration. This includes shop functionalities such as the “Add to shopping cart” button, the retrieval of the number of products in the shopping cart for review in navigation, and the altering of the product quantities in the shopping cart. Here, Hybris is directly queried from the front end via AJAX. The data exchange format is JSON.

The front-end integration of the different components from the vertical structures, and thus the delivery of the finished pages, is handled by the “Publishing” vertical structure.

Learn more on Magnolia’s capabilities for e-Commerce.