The intended audience for this paper are Headless Commerce Consultants and SAP Commerce Cloud Consultants.

Headless Implementationusing Spartacus and SAP Commerce Cloud

Executive SummaryThis white paper is about headless Commerce. It covers the importance of headless commerce, how it works, comparative analysis of traditional and

headless commerce, benefits, SAP Commerce Cloud with Spartacus and how Royal Cyber can help.

March 06, 2020

White Paperwww.royalcyber.com

Table of Contents1.

2.

3.

4.

4.1.

4.2.

4.3.

5.

5.1.

5.2.

5.3.

5.4.

5.5.

5.6.

5.7.

6.

6.1.

6.2.

3

4

4

5

6

7

7

8

8

8

8

8

8

8

8

9

9

10

What Is Headless Commerce?

Why is Headless Becoming More Popular?

How Headless Commerce Works?

Traditional Commerce vs. Headless Commerce:

Flexible Front-end Development

Customization and Personalization

Flexibility and adaptability

Key Benefits:

To Go Truly Omni Channel

To Remain Competitive

For Agile Marketing

To Make the Customer Experience More Personal and Consistent

For Seamless Integrations

For Even Better Conversion Optimization

Faster Time to Market

SAP Commerce Cloud with Spartacus:

What is Spartacus?

Architecture of Spartacus

www.royalcyber.com

www.royalcyber.com

1. What Is Headless Commerce

Headless commerce is a detachment or de-coupling of the front-end and back-end of a commerce platform so that they stand autonomously of one another, separating the content presentation layer and the business logic/functional layer.

Contrast this with a traditional approach where the commerce system manages not only the services but also the front-end UI, with technologies such as JSP pages.

In a headless platform, the front end (or the “head”), which in most cases is a template or theme would be decoupled and removed, leaving only the backend. Developers can then leverage APIs to deliver things like products, customer reviews to any device, while front-end developers can work on how to

www.royalcyber.com

2. Why is Headless Becoming More Popular?

3. How Headless Commerce Works?

In the initial days of e-commerce, the majority of traffic to websites came from desktop. As a result, the solutions that emerged at the time were coupled - front-end and back-end.

With the passage of time, the technology started evolving and the purchase options expanded to include not only mobile traffic but a complicated matrix of buyer touchpoints. Those changes demanded flexibility, which was difficult for full-stack solutions to execute because the front-end and back-end of the system were coupled.

Now, every market player wants to grow into commerce and take advantage of the amount of content that already exists, from an implementation standpoint. It is simple to build a commerce engine and connect it to the existing CMS, rather than creating a website from scratch and having to migrate their old content into it.

Just as with a headless CMS, a headless eCommerce system works by passing requests between the presentation and application layers through web services or application programming interface (API) calls.

For example, when the user clicks a “Buy Now” button on their smartphone, the presentation layer of the headless eCommerce system sends an API call to the application layer to process the order. The application layer sends another API call to the application layer to show the customer the status of their order

www.royalcyber.com

4. Traditional Commerce vs. Headless Commerce:

Demandware now Salesforce Commerce Cloud platform helps achieve consistent revenue growth. It connects digital commerce, order management, POS, store operations & intelligent personalization into a single cloud platform.

Salesforce Commerce Cloud has become a significant player in the e-commerce arena for both large and small businesses.

Traditional approach

www.royalcyber.com

Headless Approach

Description Traditional Headless

1. Front-end Development Design ConstraintTime to edit the database, code andplatform is massive

No Design Constraint. Just make a simple API call.Need to build a front-end presentationfrom scratch.

2. Customization and Personalization

Front-end is tightly coupled with backend, which means there is little room for customization

Endless Customization Changes can be made in the front end.

Pre-defined experience for both users and admins

Create your own experience for both user and admins

3. Flexibility and Adaptability

4.1 Flexible Front-end Development

Conventional Commerce

Front-end developers working on an old-fashioned commerce system face a number of constraints when it comes to design and the overall process. Any changes made would need a great deal of time to edit the database, the code, and the front-end platform as well. Developers are also restricted to what can be updated and/or modified without the risk of revoking a warranty or preventing any future upgrades.

www.royalcyber.com

Headless Commerce

With the removal of the pre-defined front-end platform, headless commerce empowers front-end developers to build a user experience from scratch, which fits well with their core business needs. Front-end developers do not need to worry about modifying databases in the back-end. They can make a simple API call.

The only downside is that, with no front-end presentation layer at all, front-end developers are left to create everything from scratch & getting eCommerce web design correct is no mean feat.

4.2 Customization and Personalization

Conventional Commerce

The conventional platforms are equipped with a predefined experience for both customer and the administrative user. However, these platforms are not suitable for customization or personalization.

4.3 Flexibility and adaptability

Conventional Commerce

In conservative solutions, the front-end is tightly coupled with the back-end coding and infrastructure. This reduces the flexibility to make any desired customizations. To make single customization, developers need to change multiple layers of coding between the front-end and back-end.

Headless Commerce

Since headless commerce has already de-coupled the front-end and the back-end, this creates endless possibilities for customization as and when required. We can make changes with a front-end developer. We can make changes either big or small, from implementing a custom checkout flow to adding a new field to a customer account. In essence, both are very straightforward to execute with a headless commerce architecture.

Headless Commerce

The old-fashioned commerce platforms restrict developers to define the user experience. With headless platforms, developers can create their own user experience from scratch. We get more control over the look and feel of the commerce platform and have control over the user experience for both our customers and admin users.

www.royalcyber.com

5. Key Bene�ts:

5.1 To Go Truly Omni Channel

First things first, a headless CMS will help drive the content anywhere and everywhere.

5.2 To Remain Competitive

A headless commerce platform empowers us to deploy rapid updates without impacting our back-end system. We can easily make any changes to your front-end to coincide with the speed of consumer technology.

5.3 For Agile Marketing

A headless commerce system can keep up with the new technology. This is perfect for designing new customer experiences. Marketing teams can roll out multiple sites across different brands, divisions and portfolios.

5.4 To Make the Customer Experience More Personal and Consistent

It is important to offer consistent customer experience across all devices and channels.

5.5 For Seamless Integrations

A headless commerce solution contains an API, which makes it easier to integrate and communicate with other platforms. We can add our brand to any new device, expanding our opportunities & outreach to more customers at the same time. Also, it won’t take us months to integrate the commerce platform to a new device.

5.6 For Even Better Conversion Optimization

With headless commerce in place, we can try and test different templates and approaches. For instance, we could experiment with a different back-end search solution while running the same front-end search.

5.7 Faster Time to Market

If we do manage to build a multi-channel or Omni channel retail experience with a traditional eCommerce platform, our time to market will be painfully slow, and scaling will be troublesome.

A headless commerce platform allows brands to focus on building front-end experiences on different devices & touchpoints. The content and products are accommodated centrally and delivered via API. This expedites time to market when adopting new channels, entering new regions, and so forth.

www.royalcyber.com

6. SAP Commerce Cloud with Spartacus:

SAP Commerce Cloud offers the flexibility to choose the headless flavors with Spartacus.

6.1 What is Spartacus?

Spartacus is an Angular-based storefront designed for SAP Commerce Cloud. It interacts withCommerce using REST API. Spartacus is extendible and customizable.

www.royalcyber.com

6.2 Architecture of Spartacus

Spartacus has a de-coupled architecture that means storefront itself acts as a separate entity. It communicates using REST API with SAP Commerce Cloud or any other SAP, a non-SAP tool which makes it an independent framework. It enables front-end developers to no longer understand the backend technology. The only interaction they need is through a web service layer which makes development, testing and deployment of an individual platform much easier.

Conclusions

The headless approach for commerce sites offers a range of benefits, however, these benefitsdo not come without risks. These costs and risks should be evaluated by each merchant tounderstand the best approach for them.

Visit the below URL to know about Royal Cyber SAP Commerce Cloud services:

https://www.royalcyber.com/technologies/sap-commerce-cloud-hybris/

We can leverage snappy UI, i.e., server-side rendering and lazy loading components. It is no longer part of the platform. An isolated deployment is possible, allowing it to scale separately.

Each functionality exists as an independent module in Angular. We need to create a separate site page in Angular code base if a new page is created in SmartEdit or CMS Cockpit.

Royal Cyber | Simplifying IT for Customers & Partners

Royal Cyber Inc. Headquartered in Naperville, IL is a leading software organization that provides services ranging from application development and deployment to training and consultancy. We commenced the operations in the year 2002 as a specialized Technology provider striding in as a software deployment service provider, assisting clients to meet the standards and demands of doing business in the rapidly changing marketplace.

Today we stand tall as a One Stop Shop for all your IT needs.

55 Shuman Blvd, Suite 275, Naperville, IL 60563 USA. | Tel: +1.630.355.6292 Email: info@royalcyber.com | Website: www.royalcyber.com