1. Display of content in the storefront

After the FirstSpirit-side creation or modification of editorial content, it is automatically transferred to the CaaS when it is saved or released. This persists the content and makes it available in JSON format via a REST interface. The storefront receives this information and links it with that of the shop system in order to deliver it in a combined view.

The following aspects represent the tasks involved in displaying the data into the storefront.

Below it is referred to the Frontend API server module. In principle, the client-side part of the Frontend API can communicate with any backends as long as the corresponding API scheme has been implemented.
Authentication

The retrieval of data from the CaaS requires a API key, which must be protected against unauthorized access. It has the same value as a password and must therefore be treated accordingly. Otherwise, the content stored in the CaaS is freely accessible.

When using the Frontend API, communication with the CaaS is handled by the Frontend API server module or its reference implementation Frontend API backend. This module manages the CaaS API key and thus ensures that it will not be made accessible to the client. At the same time, this module makes the distinction between the preview and release status within the CaaS. By default, this is done based on the URL of the ContentCreator, but this behavior can be adjusted.

Assignment of the data

When retrieving editorial content from the CaaS, it is important to retrieve the correct data. For this reason, care must be taken to ensure that the product and category information used in FirstSpirit can always be assigned to the real data in the shop system. This requires a mapping that is based on unique IDs and must already be specified by the Bridge. The IDs are in turn saved in the form data of an FirstSpirit element and transferred to the CaaS via release. Based on the IDs, it is therefore possible to query the FirstSpirit data stored in the CaaS as well as link it to the shop system data. Further information is described in detail in the subchapter Mapping the identifier and Frontend API backend.

When Frontend API is used, its server component provides endpoints that offer targeted querying of content from the CaaS based on the identifiers used for the mapping.

Transformation of the data

The CaaS saves the data transferred to it in JSON format. This is available in a complex formatting and not everything is always relevant for the display in the storefront. For further processing of the data, it may therefore be useful to carry out a transformation in the first step. In this step, it is advisable to reduce the data to the essentials and convert it into a format that is optimal for the storefront. It is also important to ensure that linked information, such as media URLs, is resolved correctly.

The Frontend API server module resolves these URLs automatically and allows the data to be transformed on the server side using its plugin concept.

Output of the data

The storefront continues to output the editorial content. However, it no longer obtains it exclusively from the shop system backend, but also from the CaaS. The storefront links the data together in order to deliver it in a combined view.

Just as when querying the data from the CaaS, it is also important to ensure that the content provided by FirstSpirit can always be assigned correctly to the real shop system data.

This includes not only the display of the correct content, but also its correct placement. Within the reference project FirstSpirit Connect for Commerce Reference Project included in the delivery, the editable areas of a store page are represented by the content areas (slots) of a FirstSpirit page template. Paragraphs can be added to them, each of which corresponds to the equivalent component of a store page. This must be taken into account and implemented when outputting the editorial content.

In case that the storefront is a PWA, the Frontend API offers client-side functions that query the data directly from the server using the parameters defined in the mapping. These can then be rendered by the PWA on the client side.

If the storefront generates the pages on the server side, the content is usually retrieved by the backend of the shop system.

Further information on the distinction between PWA and static pages is described in the corresponding chapter of the main documentation.

Maintenance of the content in FirstSpirit

In order for the content stored in FirstSpirit to be edited via the ContentCreator, Omnichannel Manager must be integrated in the storefront and the areas to be edited must be specially marked in the HTML. Further information on editing pages can be found in the corresponding chapter of the main documentation.

Using the client-side part of the Frontend API implements this function by default. Within the storefront, only the HTML elements that are to contain the content areas need to be marked.

Extension of the navigation

While Shop-driven Pages are usually already displayed by default in the storefront navigation, this must first be implemented for FirstSpirit-driven Pages. The structure of pages created in FirstSpirit is available via the Navigation Service. It can be used to extend the navigation of a storefront so that FirstSpirit-driven Pages are also displayed. To implement a navigation, the relevant queries must be directed against the Navigation Service accordingly.

The Frontend API supports this integration by connecting the Navigation Service in its server module in the same way as the CaaS connection. The storefront therefore does not have to communicate directly with the Navigation Service itself, but receives its data from a source. Corresponding methods are available on the client side.

FirstSpirit Connect for Commerce is a product of Crownpeak Technology GmbH, Dortmund, Germany.
Only a license agreed upon with Crownpeak Technology GmbH is valid for using the module.

3. Help

The Technical Support of the Crownpeak Technology GmbH provides expert technical support covering any topic related to the FirstSpirit™ product. You can get and find more help concerning relevant topics in our community.

4. Disclaimer

This document is provided for information purposes only. Crownpeak Technology GmbH may change the contents hereof without notice. This document is not warranted to be error-free, nor subject to any other warranties or conditions, whether expressed orally or implied in law, including implied warranties and conditions of merchantability or fitness for a particular purpose. Crownpeak Technology GmbH specifically disclaims any liability with respect to this document and no contractual obligations are formed either directly or indirectly by this document. The technologies, functionality, services, and processes described herein are subject to change without notice.