SAP Spartacus (or) SAP Composable Storefront with “SAP Commerce Cloud”
SAP Hybris = Old Name SAP Commerce = New Name
SAP Spartacus = Old Name [till 4.X]
[Link]
SAP Composable Storefront = New Name [from 5.X]
[Link] [Link]
[Link]
Q1 = What is “SAP Commerce”?
Let’s say – we have a requirement to develop (or) create “Shopping site (or)
eComm site” then we can use “SAP Commerce”.
That means – By using “SAP Commerce” … We can create Shopping Sites.
Example =
[Link]
[Link]
[Link] =====
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
Q2 = Why to use “SAP Commerce”?
Step 1 = “SAP Commerce” delivered for us as “Suite (or) Package”
Step 2 = Install “SAP Commerce”
After installing … We get ===>
~80% Site … ~80% Code … ~80% Fun … === Ready to use
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
Q3 = What is “SAP Commerce Cloud”?
Finally –
By using “SAP Commerce” we can create shopping sites &&
After that if we use “SAP provided cloud” for “build … hosting …”
then it’s “SAP Commerce Cloud”.
“SAP Commerce Cloud” ===
CCv1 = Private Cloud
CCv2 = Public Cloud
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
Q4 = What is “SAP Spartacus (or) SAP Composable Storefront”?
Scenario 1 = Let’s say “Reliance Site” developed using “SAP Comm” then –
Here –
FED && BED are together. Means its “Tightly Coupled Architecture”.
So … It’s time to move towards “Loosely Coupled Architecture”.
Means – Separating “Frontend && Backend”
This concept is called “Headless eComm”.
Headless eComm we can achieve (or) do in many ways.
But SAP preferred “Headless eComm” solution = SAP Spartacus
SAP Spartacus now called as “Composable Storefront”.
===> So … If we go with “SAP Composable Storefront” then we can: -
1] Headless eComm
2] Separating FED & BED
3] Loosely Coupled Architecture
4] SAP Spartacus = Lean … Angular JS storefront
5] 100% API Driven … SPA … PWA … SEO … Focus Dev … Scalable … ===
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
Scenario 2 = Let’s say “Reliance Site” developed using “Composable
Storefront (or) Spartacus” with “SAP Comm” then –
Here ===>
FED [UI] = Spartacus (or) Composable Storefront
BED [Logic & Data] = “SAP Comm”
Data Exchange between “FED && BED” happens with “OCC Services”.
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
So === Now we have “[1] JSP Storefront … [2] Composable Storefront …”
Q5 = Challenges with “JSP Storefront”?
1] Accelerator [ACC] Storefront [Based on JSP technology]
2] ACC Storefront is deprecated
That means – In coming days, SAP will not support this ACC storefront.
3] Frontend [FE] & Backend [BE] are tightly coupled
4] Browser makes requests to server which retrieve the page structure and
executes controllers -- facades -- services to process and retrieve the
information needed to render the view.
Most of the state is kept on the server-side.
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
=== Spartacus (or) Composable Storefront
1] Angular-based Java script Single page Storefront
2] Loosely couple [Separating FE & BE]
=== What does it mean “Separating FE & BE”?
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link]
Q = What is the SAP Spartacus (or) SAP CS?
1st ===
~90% of the clients are using “ACC Storefront”.
ACC Storefront === Deprecated.
Q = What is the alternative?
SAP recommended solution = SAP Spartacus (or) SAP CS
2nd ===
JSP = Server-Side Technology
Angular = Client-Side Technology
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
3rd ===
Let’s say --- Reliance company saying … We are using “SAP Comm”.
That means --- Their Architecture ===
FED [UI] … BED [Logic + Data] … are together.
FED … BED … are part of “SAP Comm”.
FED … BED … are Tightly coupled (or) Monolithic architectural.
=== But now a days transformation journey is moving towards “Loosely
coupled (or) Decoupled” architecture.
(Or) It’s time to separate “FED … BED …”
Separating “FED … BED …” === This concept is called “Headless eComm”.
Headless eComm we can achieve in many ways.
But SAP recommended solution for Headless eComm: -
==== SAP Spartacus (or) SAP CS ==== Loosely coupled architecture.
SAP Spartacus (or) SAP CS ====
1] Loosely coupled architecture (or) Decoupled architecture
2] Headless eComm “Separate FED [UI] … BED [Logic … Data …]”
3] Angular based JS Storefront … Client-Side Technology …
4] Gives set of the feature libs [Cart … Checkout … Product … Order …]
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
Let’s say ---
Reliance company saying … We are using Spartacus with “SAP Comm”.
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
“SAP Comm” by default provides lots of OCC Services.
Q = Where can we see “SAP Comm” provided “OCC Services” Info?
[Link]
Note = Up to SAP Comm Version 1905 then use below URL for Swagger =
[Link]
From SAP Comm Version 2005 then use below URL for Swagger =
[Link]
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
Q = How "SAP Spartacus (or) Composable Storefront" Works with SAP
Commerce Cloud?
1st = Key Components of SAP Composable Storefront Architecture?
Angular Core = Manages routing, state, and API requests through services.
• Routing: Manages navigation b/w pages like PDP, Cart, and Checkout.
• State Management: Uses RxJS Observables to handle application state
and synchronize data across components.
• Dependency Injection: Provides centralized services for managing data
and interactions.
• Change Detection: Automatically updates the UI when new data is
available, ensuring a dynamic user experience.
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
SAP Commerce OCC API = Processes business logic, retrieves data, and sends
responses to Angular services for further rendering.
Styling (SCSS Framework) = Provides consistent, responsive styling for Comp.
• SAP Spartacus / composable storefront uses SCSS for styling, offering pre-
built themes that align with SAP Commerce branding.
• Businesses can customize themes to reflect their unique identity,
ensuring consistent design across platforms.
UI Components = Handles user interactions, triggers API calls, and dynamically
renders responses.
• Angular-based reusable components like product search, cart summary,
and checkout forms.
• Components dynamically render data fetched from backend APIs,
providing an interactive and responsive user interface.
2nd = Step-by-Step Interaction between the Components?
Step 1 = User Interaction in the UI
• A user interacts with a UI component (e.g., clicks a “Search” button, views
a product, or adds an item to the cart).
• The UI component triggers a method or event, such as onSearch(),
onAddToCart(), or onNavigate().
Step 2 = Component Calls an Angular Service
• The UI component delegates the API request to an Angular service.
• Example: - Search box component calls ProductSearchService to fetch
search results. Component might use a function like: -
[Link](query);
Step 3 = Angular Service Constructs the API Request
• Service uses Angular’s HttpClient to construct and send the API request.
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
• It resolves the endpoint dynamically using OccEndpointsService.
• Example of a product search API call:
GET /occ/v2/{baseSiteId}/products/search?query=laptop
• Example Angular service -
Step 4 = SAP Commerce OCC API Processes the Request
• SAP Commerce OCC API receives the request, applies the required
business logic (e.g., personalization, promotions, search filters), and
retrieves the relevant data from the backend.
Step 5 = Response Sent to Angular Service
• OCC API returns the data (usually as a JSON payload) to Angular service.
• Example response for a product search: -
Step 6 = Service Updates UI Component State
• Angular service updates UI component’s state using Observables or Subjects.
• Example: -
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
Step 7 = UI Component Dynamically Renders Data
• Angular data binding ensures UI component dynamically gets fetched data.
• Example (HTML template for a product list): -
Step 8 = SCSS Styles Applied
• SCSS applies to components - Ensure consistent design & responsiveness
3rd = Example Flow – “Add to Cart” [Scenario = User add a product to their cart]
Step 1 = UI Interaction
• User clicks “Add to Cart” on a product page.
• AddToCartComponent captures click event & calls CartService method.
Step 2 = Service Constructs API Request
• CartService sends a POST request to the OCC API:
Step 3 = OCC API Processes Request
• SAP Comm BED validates the request, checks inventory, and update cart.
• A JSON response with the updated cart summary is sent back.
Step 4 = Service Updates Component
• CartService updates the state with the new cart data. Example: -
Step 5 = Dynamic Rendering
• CartComponent updates dynamically to show updated cart data. Example
Step 6 = Styling – Ensure Cart summary is styled stable with storefront theme.
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1
UI Components = Login Comp, Register Comp, My Account Comp, Cart Comp…
Router = / [Home Page], /cart [Cart Page], /checkout [Checkout Process] …
State Management = CartStore, ProductStore, UserStore …
Spartacus Core = @spartacus/core … styles … storefront … assets …
CMS = CMS Core Comp, CMS Pages, Slot Configuration, BO Configuration …
Services = API Services, UI Services, CMS Services, Routing Services …
Styling = Theming, Comp Level Styles, Responsive Design, Custom CSS …
For “SAP Commerce Cloud” / “SAP Spartacus” – Contact – ChennaReddyTraining@[Link] 1