XiM Widget Server - Linking a Web Content Management System to an Online Shop

Technical requirements

Integrating products and shop functionality from an online shop into a corporate website, using the example of integration Typo 3 CMS and Intershop Commerce Management (ICM)

It’s becoming increasingly necessary to integrate an online shop into another web application or web platform.

The primary aim of such a requirement is to enable the user to have a seamless, enjoyable shopping experience by making products available for him/her to view, select and buy simultaneously when browsing on a website. To do this, the online shop’s e-commerce functions must be rendered usable for website visitors to their fullest extent. This means that products and shop functions, as well as a website’s content should thus not just be available in the shop or CMS.

Against this backdrop, the technical solution shown here is aimed at providing a defined (usually reduced) product portfolio with the existing online shop to present or sell it in another web-based system. However, in doing so, existing e-commerce functionalities do not have to be re-implemented. The shop platform should also provide the core business logic, while the third-party provider applications take over the frontend themselves. To do this, central functions must be provided by the online shop via a flexible API (preferably REST-based), which can thus be used by third-party web applications (e.g. sales on special landing pages within an existing web presence or another online platform operated by the respective company). Shop functionalities could also be used in various ways by mobile apps, or even IoT devices (Internet of Things).

What is a widget?

You can read the following about widgets on Wikipedia

"A widget is a component of a graphical windowing system. On the one hand, the widget consists of the window, a visible area that hosts mouse, touchscreen and/or keyboard events; and on the other hand, the invisible object that stores component statuses and which changes the visible area via specific character operations. Widgets are always incorporated in a specific windowing system, and use it to interact with the user or other windowing system widgets."

Source: https://en.wikipedia.org/wiki/Web_widget

XiM Widget Server

The XiM Widget Server is a software module which provides the technical prerequisites for using the widgets, including the interfaces, when integrating the Content Management System and the webshop.

In this regard, it’s an API in the broadest sense of the word, based on a Javascript library, which can be used to provide shop functions, and ultimately, data available in the shop. The technology used for the Widget Server such as React, Redux, as well as a build process based on a webpack and the CSS Sass pre-compiler turns it into a modern technology stack that allows an online shop to be integrated into a corporate site in a streamlined, quick fashion.

Widget Server - architecture

A Widget Server usage scenario is presented below, using the example of integrating a webshop based on Intershop Commerce Management 7 (ICM) into a Typo 3 CMS-based corporate site. As it’s a required prerequisite for such an installation scenario, the ICM has a REST API interface, which is used to provide the online shop system’s required data. If there is also a similar interface in the Content Management System, two-way integration becomes an option. This means that information and data that is created and maintained in the CMS can also be displayed in the online shop.

The Widget server architecture comprises the following modules:

1. Content Management System (e.g. Typo 3)
2. Webshop (e.g. Intershop Commerce Management 7)
3. Widget Server
4. User client (browser on a desktop or a mobile terminal device, which could also be the monitor of a tool machine, for instance.)

Figure: Overview of systems involved in Widget Server Architecture

In this respect, the depth of the webshop’s system integration can be freely selected.

The following integration approaches can be explored:

1. Full integration

   In this case, a checkout widget is integrated on a wide range of corporate site pages alongside the option of integrating available widgets (e.g. product list or products), so the user can reach the end of the purchase process within the corporate site. The checkout is usually integrated in a template, which comprises a corporate site header and footer, and which provides a placeholder for checkout integration.

2. Partial integration

   In the case of a partial integration, shop functions and data are also provided within the corporate site using the integrated widgets, where the user in the mini basket jumps to the shop system checkout by calling up the first order step, and the order process is continued or completed in this system.

Description of an example architecture

A) Content Management System - Typo 3

In the example scenario shown here, website pages in which items from a webshop should be displayed and sold, are created, maintained and displayed based on the Typo 3 CMS. A selection of widget types is provided for editors to integrate shop functionality and data via the available Widget Server. Processors are thus put in a position to be able to decide for themselves which webshop products are specifically advertised or offered for sale on which website pages.

With these enhanced content creation options, marketing department employees can now be put in a position to create SEO-compliant landing pages, which are provided for the user directly from a webshop, alongside general and product-specific information. Furthermore, the user can be afforded the option of ordering the product offering that they have received directly online.

If the Content Management System itself has a REST API, there is also the option of displaying information from it (content elements) in the online shop. This means two-way integration can be carried out when the respective integrations are available in the shop and CMS, which significantly improves the flexibility and variety of usage scenarios for the e-commerce platform and corporate site.

It is also recommended to use a Digital Asset Management System -DAM, such as the one provided by Celum , to enable you to manage and store graphics and media files.

B) Webshop - Intershop Commerce Management 7 (ICM)

The shop, which is a webshop based on Intershop Commerce Management 7 in the described scenario, also provides the catalogue structure, prices and e-commerce functionalities, alongside the products to be sold. Items can thus be presented and ordered on the corporate site. In doing so, the data is provided by the REST API mentioned above. Order data associated with the orders is also transmitted back to the shop via the interface.

Other shop systems can also be integrated, provided that these also have an appropriate REST API.

C) Widget Server

The widget server is a central element of the system architecture shown. It provides the actual widgets, which can be used out of the box in the client, i.e. on the Typo3 page.

The following widget types can be provided:

1. Product list widget
2. Product tile widget
3. Mini basket widget
4. Full basket widget
5. Checkout Widget

One or more products and the associated categories can be selected by a site’s content editor using the product or category ID.

Additional added value is achieved by providing the following widget functionalities during widget integration:

1. Automatic style adjustments in line with the Cascading Style Sheets (CSS) used on the corporate site..
2. Configurable product illustration (list or tile).
3. Prepared output for a responsive, compliant illustration.
4. Widgets with content that is relevant for search engines, which are used to illustrate the product, for example, also support pre-rendering from the server. In this case, this means that these are what are known as isomorphic widgets, that enable SEO-compliant indexing from search engines.

We would be happy to provide the Widget Server Architecture shown here as a scalable Cloud, if you are interested. Alternatively, it can also be used flexibly as Platform as a Service for a hosting provider.

Conclusion - advantages of integrating a widget server

The advantages of the XiM Widget Server can be summarised as follows:

1. Product data from an online shop can be easily integrated into websites,
2. Re-usable shop components are provided in a consolidated fashion with e-commerce functions,
3. Centralised widget maintenance,
4. SEO-compliant product information can be integrated,
5. Preparation time (Time to Market) for online marketing measured is shortened,
6. Content can be easily opened on mobile devices.

Irrespective of the webshop technology used, the Widget Server Architecture shown here can be used when the requirement for a REST API presence has been met. In conclusion, it can be seen that flexibility when operating a company website and online shop in parallel can be substantially improved with the integration scenario presented here. Online market measures in particular can be implemented quickly and cost-effectively as a result.