SAP Commerce Cloud = “SAP Comm” + Cloud

“SAP Commerce” [New name] === “SAP Hybris” [Old Name]

Q1 = What is “SAP Comm”? (or) What is the purpose of “SAP Comm”?

Let’s say – We have requirement to developing the “Shopping sites (or)
eComm Sites” then we can use “SAP Comm”.
That means – By using “SAP Comm” – We can create “Shopping sites”.

Example =
https://www.croma.com/
https://www.reliancedigital.in/
https://www.shoppersstop.com/
https://www.lenovo.com/us/en/
===

Contact Us = [email protected]
Q2 = Do we need to create these sites from scratch?
Ans = No need.
Then what?
Right now – we are planning to use “SAP Comm”.
This “SAP Comm” provides templates [called as “recipes”].
We need to install these recipes.
After installation –
“80% Site is ready … 80% Code is ready … 80% Fun is ready” –
which is suitable for client [Example = Reliance].
Then what we do next?
We take these results [80% Site … 80% Code … 80% Fun …] as
base & do client [Example = Reliance] specific changes on top
of this = ~20%.

Example =

Contact Us = [email protected]
Q = What does it mean --- “80% Site … 80% Code … 80% Fun” is ready?

Q = What does it mean – we do client specific changes = ~20%?

Left Side = OOTB [Given for us] Right Side = Croma [Client specific]

Contact Us = [email protected]
Scenario =

Note = By using “SAP Comm” – we can develop eComm Site (or) Shipping site
easily.
Hence “SAP Comm” is called “eComm Solution / Software”.
Also -- “SAP Comm” === eComm Sol / Soft + PCM Software

Contact Us = [email protected]
PCM = Product Content Management Software.
You take any eComm / Shopping site – There will be 2 important things: -
1) Product

Contact Us = [email protected]
2) Content

Conclusion =
“SAP Comm” providing solution for “Content Manage” = Smart Edit.
“SAP Comm” providing solution for “Product Manage” = Product Cockpit.
=== “SAP Comm” = eComm Sol / Soft + PCM Software.

Contact Us = [email protected]
SAP Commerce Cloud = “SAP Comm” + Cloud
“SAP Comm” = eComm Sol / Soft + PCM Software

Q = SAP Commerce Cloud consists?

1) MS Azure = Used to host our Cloud Build Platform that builds all using SAP
Commerce [Formally known as SAP Hybris Commerce]
2) IaaS = This runs the SAP Cloud Platform
3) SAP Commerce Cloud Portal = It’s a self-service portal, where you can
manage, maintain, build, and deploy our SAP Commerce Cloud solution.

Contact Us = [email protected]
SAP Commerce Cloud = (1) CCv1 [Private] (2) CCv2 [Public]
Q = What are the “SAP Commerce Cloud – Available Features”

Note = SAP Comm 6.7 (or) Above only – Will support “SAP Commerce Cloud”.
SAP Comm Cloud = Currently the CCV2 version: -
1) Drives digital transformation
2) Enables you to function as an omni-channel business, delivering
contextual customer experiences and unifying customer processes.
Q = Benefits with “SAP Comm Cloud” [CCv2]?
1) Public Cloud Infrastructure
2) Elastic scaling to meet operational metrics and traffic rushes
3) Self-service Environment management
4) Disaster Recovery and Backup
5) Flexible Deployment [CI] Continuous Integrations

Contact Us = [email protected]
SAP Comm Installation?
Note = We install he “SAP Comm” for development (or) demo purpose.
System Requirements =

SAP Comm Version (or) Docs? =

https://help.sap.com/docs/
https://help.sap.com/docs/SAP_CX
https://help.sap.com/docs/SAP_COMMERCE_CLOUD
https://help.sap.com/docs/SAP_COMMERCE

Contact Us = [email protected]
Step 1 = Download the Java 11 & install it
Note = Hybris 6.X, 1808 & 1811 = Java 8
“SAP Comm – 1905 / 2005 / 2011 / 2105” requires “Java 11”.
SAP Comm 2205 / 2211 = Java 17.
https://www.oracle.com/java/technologies/javase/jdk11-archive-
downloads.html

Note = It will ask “user name & pwd” when we click download.
Create account if you do not have with your email id.
==== Results after install Java
Results =

Contact Us = [email protected]
Now set the “Java” Path =
RMB – This PC -- Properties -- Advanced system settings -- Advanced --
Environment Variables -- New [System variables]
Variable name = JAVA_HOME
Variable Value = C:\Program Files\Java\jdk-11.0.10

= RMB – This PC -- Properties -- Advanced system settings -- Advanced --

Environment Variables -- Path [Select] – Edit & add %JAVA_HOME%\bin

Contact Us = [email protected]
Step 2 = Download “SAP Comm” software
Q = From where can we able to download “SAP Comm” software?
URL = https://launchpad.support.sap.com/#/softwarecenter/search

Note = To download the “SAP Comm” software – You need to have valid SID
with download permissions.

Step 3 = Unzip “SAP Comm” software.

“SAP Comm” software is delivered for us as a “Suite / ZIP file”.
To unzip this – We can use “7-Zip / WinZip / …”

=== Download the “7-Zip” software & install it.

URL = https://www.7-zip.org/download.html

Contact Us = [email protected]
==== Unzip the software

Results after unzip =

SAP Comm Location (or) SAP Comm Path =

E:\Softwares\Hybris-All\2005\CXCOM200500P_0-70004955
Best Practice = Try to avoid “Spaces / _ / - / …” in the Path.

Contact Us = [email protected]
So – move “SAP Comm” unzip results into proper folder. Example =

Now -- SAP Comm Path (or) SAP Comm Location = E:\rrrssoftware

Step 4 = Set the “ANT” Path

In “SAP Comm” we have lots of code (or) In “SAP Comm” we write code.
This code we need to do the build [compile].
For build purpose – We can use software like “ANT / Maven / ….”.
Right now – Let’s use ANT tool for build purpose.
Bcoz – ANT is part of “SAP Comm” software [No need to download
separately].

Q = Where can we see the ANT details?

Contact Us = [email protected]
Now set the ANT Path =
RMB – This PC -- Properties -- Advanced system settings -- Advanced --
Environment Variables -- New [System variables]
Variable name = ANT_HOME
Variable Value = E:\rrrssoftware\hybris\bin\platform\apache-ant

RMB – This PC -- Properties -- Advanced system settings -- Advanced --

Environment Variables -- Path [Select] – Edit & add %ANT_HOME%\bin

Contact Us = [email protected]
Step 5 = Set the admin user password
Note = Please open “build.gradle” file in Notepad++

Step 6 = Install the “SAP Comm” (or) Install the Recipe.

Before install recipe =

Q = How to install the recipe?

Syntax = E:\rrrssoftware\installer>install.bat -r cx

Contact Us = [email protected]
E:\2205\rrrssoftware\SAPComm\hybris\config\localextensions.xml ===

Because all these extensions we get the sample site with functionalities.
That means --- We can change the functional scope [By adding exts (or) By
removing exts] with “localextensions.xml”.

Contact Us = [email protected]
E:\2205\rrrssoftware\SAPComm\hybris\config\local.properties ===

Properties = Key – Value Paris.

Step 7 = Do the Build

For build purpose – We can use “ANT / Maven / …”.
Bcoz – ANT is part of “SAP Comm” software.
Syntax = E:\rrrssoftware\hybris\bin\platform>ant clean all

Note = We can also use “E:\rrrssoftware\hybris\bin\platform>ant all

Contact Us = [email protected]
Step 8 = Do the Initialization [INIT] = Create DB tables [Cart … Order … User…
Product … Catalog …]
Syntax = E:\rrrssoftware\hybris\bin\platform>ant initialize

Before performing initialization – Data folder is almost empty.

Conclusion = “SAP Comm” by default comes with “HSQL DB”.

Contact Us = [email protected]
Scenario = We are noticing that, “SAP Comm” Hybris Server Start up is taking
more time.
That means --- C:\rrrssoftware\hybris\bin\platform>Hybrisserver.bat [This is
taking lots of time].
Q = How to speed up (or) decrease the Hybris Server Start up time?
Sol 1 = Turn off Cronjobs [Default Cronjobs]
Cronjob == It’s a program runs background.

Sol 2 = Remove unused Tenants

Contact Us = [email protected]
Sol 3 = Remove Web Socket Jar file

Note = After doing above 3 solutions…

Do the build “ant clean all” + Start the server [Hybrisserver.bat] and
check the server start up time / speed.
This improves almost 40% – 50% time.

Scenario = How to see the “SAP Comm” hybris server logs?

Contact Us = [email protected]
Step 9 = Start the Server
Syntax = E:\rrrssoftware\hybris\bin\platform>hybrisserver.bat

Q = Where can we see the Hybris Server Configuration Details?

Q = Where can we see the Hybris Server Details?

Contact Us = [email protected]
Step 10 = Results [Q = What we get after “SAP Comm” installation?]

10.1 = 3 Sample B2C Sites: -

https://localhost:9002/yacceleratorstorefront/?site=apparel-uk

https://localhost:9002/yacceleratorstorefront/?site=apparel-de&clear=true

Contact Us = [email protected]
https://localhost:9002/yacceleratorstorefront/?site=electronics&clear=true

10.2 = 1 Sample B2B Site: -

https://localhost:9002/yb2bacceleratorstorefront/?site=powertools
https://localhost:9002/yb2bacceleratorstorefront/powertools/en/USD/logi
n

Contact Us = [email protected]
10.3 = Backoffice: -
URL = https://localhost:9002/backoffice/
User = admin Password = admin1234

Q = What is the purpose of Backoffice?

1) It’s UI tool
2) It connects to DB [HSQL DB / HANA DB / My SQL / …]
3) We can see the tables
4) We can see the table data – records
5) We can perform DB CURD operations [Insert / Delete / …]
6) ===
Contact Us = [email protected]
10.4 = HAC [Hybris Administrative Console]: -
URL = https://localhost:9002/login
admin admin1234

10.5 = SmartEdit [ Content Management Tool used by “Content Managers”]:

URL = https://localhost:9002/smartedit/
admin admin1234

Contact Us = [email protected]
10.5 = Product Cockpit [ Product Management Tool used by “Product
Manager”]: -

Adaptive Search

ASM = Can see customer 360-degree view information.

https://localhost:9002/yacceleratorstorefront/?site=apparel-uk&asm=true

CS Cockpit and ==========

Contact Us = [email protected]
Note = After installation of the “SAP Comm” –

Q = What are the challenges with above?

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

Contact Us = [email protected]
Now – It’s time sperate “FE & BE”.
Separating “FE & BE” --- This concept is called “Headless eComm”.
We can achieve / can implement this “Headless eComm” in many ways.
Note = SAP preferred Headless eComm Sol = Spartacus [Angular]
Q = What is the Spartacus?
1] Open Source 2] Angular-based Java script Single page Storefront
3] Loosely couple [Separating FE & BE] 4] ===
==== What does it mean “Separating FE & BE”?

Contact Us = [email protected]
Let’s understand the power of the OCC Services (or) Power of the “Headless
eComm” [Separating FE & BE]?

After installation –
We have 2 storefronts: -
1] ACC Storefront [JSP]
2] SPA Storefront [Angular]

Contact Us = [email protected]
Scenario = Eclipse (or) How to import the code into Eclipse?
“SAP Comm” provides lots of code (or) In “SAP Comm” we write code.
In C Lang – We use “Turbo C” editor for writing the code.
In Java – We use “Eclipse / Notepad ++ / IntelliJ / …” for writing the code.
In “SAP Comm” – We can use any editor to write the code [Eclipse].
We can use any Editor [Eclipse / IntelliJ / Notepad / …] for coding.

Download Eclipse & Install it.

URL = https://www.eclipse.org/downloads
Note = You can download any version.

Contact Us = [email protected]
Results = After install Eclipse

Open the Eclipse & Install the Plug-In [& then restart Eclipse]

Disable Build Automatically

Contact Us = [email protected]
Now -- Open Eclipse -- Import the Code

Results after import code =

Contact Us = [email protected]
Q = Who can able to download “SAP Comm” software?
1) SAP Employee
2) SAP Commerce Customer
3) SAP Commerce Implementation Partner

==== SAP Comm 2011 / 2105 & SAP Comm 2205

Contact Us = [email protected]
Spartacus =
Angular-based JavaScript Single Page Storefront for “SAP Comm Cloud”.
SAP Comm Cloud offering 2 toolsets =
1) For mobiles – Mobile SDK [iOS & Android]
2) Responsive storefront template
Note = Spartacus is the next step to provide better CX.
Technologies & concepts used in mobile web development today: -
1st = Native application good for mobiles & website for desktops.
Challenge = We need to maintain minimum 4 different systems: -
1] Mobile Apps of iOS 2] Mobile Apps for Android
3] Web Apps for Mobiles 4] Web Apps for Desktops
Next = Mobile & Desktop versions were merged into a single responsive
website [SPA] = RWD.
This reduced number of different code bases from 4 to 3.
Challenge = Installing new apps is a challenge for many people &
big stores afford separate native apps for Android & iOS.
Next = Cross-platform development tools for native apps.
Example = PhoneGap, Apache Cordova, React Native and …
Challenges = Native apps limitation -- Web browser in accessing
hardware [Clipboard, Sensor and …]
Also -- JavaScript to speed up performance & critical parts of web
applications.
Next = In 2015, Google went public with an exciting new approach to
app development, called as a “progressive web app [PWA].
Contact Us = [email protected]
Progressive Web Applications [PWA]?
PWA is not a framework (or) toolset, it is a concept [set of features].
No exact definition of what is PWA & difficult to say if your app is PWA-
enabled or not.
Set of features you need to implement in your app to get next level CX: -
• Progressive Enhancement = App runs in as many Env as possible
• Responsive User Interface = App adapts to various input methods [touch,
speech and …] and output methods [different screen sizes, vibration,
audio, braille displays and …].
• Connectivity-Independence = App works well offline and with
intermittent or low-bandwidth connectivity
• App-like UI = App adopts UI elements of native platforms.
• Continuous updates (“freshness”) = Auto update apps to new versions
• Secure Communication = App is served and communicates via HTTPS, to
prevent snooping and attacks
• App Discovery = Meta-data such as W3C web app manifests enables
search engines to find web apps.
• Push interaction (“re-engagement”) = Features such as push
notifications actively keep users up-to-date
• Natively Installable = On some platforms, you can install a web app so
that it feels like a native app [icon on home screen and …]. All without
going through a native app store.
• Linkability = Easily share apps via URLs & run them without install.
Finally -- If you need to have a native app having only the PWA, then you can
create it from PWA using https://www.pwabuilder.com/

Contact Us = [email protected]
 For Windows = It generates .appx & send it to Windows Dev Center.
For Google = It creates a Java wrapper app, which includes your PWA.
You compile this project in Android Studio, and upload the package to
Android Dev Center.
For Apple = It generates an XCode project. After compiling, you can send
the package to Apple Store.

PWA Storefronts
Any e-commerce solution can be implemented from scratch by using any
PWA-ready framework or mobile UI library.
Challenges = Take more time & resources than using specialized product.
Specialized solutions help us to release a product faster. Example: -
• Divante VUE STOREFRONT = This storefront was developed for
Magento2, Magento1, Pimcore. This product looks mature, flexible
and well-built, but you need to make significant changes to get it
worked with SAP Commerce Cloud. MIT License.
• SAP Spartacus = Developed by SAP specifically for SAP Commerce
Cloud. Officially presented in October 2018.
• Google Polymer Storefront = Polymer framework is a powerful tool,
but the storefront implementation is very basic and trivial.
Note = E-Point announced their own implementation of PWA storefront,
a headless React.js accelerator storefront with all PWA advantages
(100% on Google Lighthouse), ready and pre-integrated for SAP Hybris /
Commerce base apparel UK catalog.

Contact Us = [email protected]
SAP Spartacus Details
• It’s a FWK for PWA apps developed by SAP for their Commerce
• Its Angular storefront is supposed to replace JSP-based Accelerator
• Spartacus storefront is no longer part of the e-commerce platform. With
decoupled nature, we can upgrade both the platform and the storefront
code separately.
• Technology / FWK / Libraries: -

Accelerator Storefront Spartacus Storefront

JSP based storefront Angular-based JavaScript
Browser makes requests to server The front-end is loaded on the
which retrieve the page structure browser & page structure and
and executes controllers -- facades layout is retrieved from the server
-- services to process and retrieve (unless it has a static layout).
the information needed to render Spartacus Components are used
the view. Most of the state is kept to build the page on the client
on the server-side. side & they execute OCC Calls to
the server to retrieve data
needed for rendering. State is
kept on the Client side.

Contact Us = [email protected]
Monolithic SAP Commerce Cloud Decoupled (or) Headless eComm
Architecture. SAP Spartacus Architecture.

Contact Us = [email protected]
Distribution = Template Code Distribution = Libraries
Contact Us = [email protected]
• Spartacus Is –
o It's a free JavaScript [Angular based] Storefront for SAP Commerce
Cloud [SCC]. Activates Progressive Web App [PWA].
o It's a replacement for accelerator templates that are included in SCC
releases
o It uses modern web technologies and frameworks
o It's decoupled from the platform = Meaning it runs on its own
separate server node
o It communicates with the platform only through REST APIs.
o Upgradable & Extendable = Designed to be upgradable and
maintain full extendibility.
o Progressive = Fully compliant with PWA standards.
o Open Source = Developed by SAP with huge community support.
o Modern = Uses the latest technology to keep technical debt low
o PWA in Spartacus enables: -
▪ Supports = Mobile, Tablet, Desktop & Wide-desktop
▪ Improved performance = PWA speeds up online pages that
improve UX and conversion rates
▪ Mobile-first = Leverage native capacities of mobile, push
notifications, home-screen access & full screen mode.
▪ Works on all devices and platforms = Each PWA works on all
browsers, no matter the operating system or device.
o Advantages =
Open-source Upgradable CMS-Driven
Configurable routing SEO attributes SSR support
PWA support Continuous delivery
100% API Driven (OCC—> Spartacus —> SAP Commerce)
Focused development

Contact Us = [email protected]
• Q = Can we run Spartacus & an Accelerator storefront at the same time?
= Yes
• Q = Accelerators will be deprecated? = Yes [Eventually]
• Q = How can we migrate to a Spartacus-based storefront?
There is no direct way to migrate from an Accelerator storefront to the
Spartacus. So, it would take time to move an Accelerator-based
storefront to Spartacus.

• Q = Effort of switch to Spartacus?

• Q = Reasons to move Project Spartacus?

1) Decoupled Architecture 2) Open Source
3) Upgradable and Extensible 4) CMS-Driven
5) Supported by SAP Commerce Cloud Automation

Contact Us = [email protected]
Spartacus Architect?
• Consists of 3 key modules =

• Spartacus libraries provide storefront with core FWK that includes: -

Homepage Product details Categories page
Search functionality Adding items to cart Cart page
Checkout Order history Adding to Cart
• Technology stack: -
Angular X.Y.Z TypeScript X.Y Sass YYY
RxJS X.Y.Z Ngrx X.Y Bootstrap X.Y.Z
Jasmine Karma Protactor
Github Webpack NPM
• For each website page, we need to have an angular template.
Example = If we create a page in CMS Cockpit / SmartEdit, then we will
need to ask developers to add this page in the Angular code too.

Contact Us = [email protected]
Q = Spartacus Libraries version details: -
https://sap.github.io/spartacus-docs/docs-archive/
https://sap.github.io/spartacus-docs/release-information/
Q = SAP Spartacus & SAP Comm – Features compatibility?
https://sap.github.io/spartacus-docs/feature-release-versions/
Q = SAP Spartacus support?
Developers =
https://stackoverflow.com/questions/tagged/spartacus-storefront
Problem / Bug [If your company have SAP Comm Cloud] =
https://launchpad.support.sap.com/#incident/create
Comment / Feedback / Non-Technical Q =
https://join.slack.com/t/spartacus-storefront/shared_invite/zt-
jekftqo0-HP6xt6IF~ffVB2cGG66fcQ
Q = Demo Site / Public Instance?
https://spartacus-demo.eastus.cloudapp.azure.com/electronics-
spa/en/USD/
https://spartacus-demo.eastus.cloudapp.azure.com/apparel-uk-
spa/en/GBP/
https://spartacus-demo.eastus.cloudapp.azure.com/powertools-
spa/en/USD/
Q = How to Contributing to the Spartacus Storefront?
https://sap.github.io/spartacus-docs/contributing-to-the-spartacus-
storefront/
Contact Us = [email protected]
Q = How to see Spartacus Source Code?
https://github.com/SAP/spartacus
Q = Does Spartacus require SAP Commerce Cloud?
Spartacus mainly designed to work with SAP Commerce Cloud.
It is also possible to use Spartacus with other systems. See below: -
https://sap.github.io/spartacus-docs/connecting-to-other-systems/
Q = What version of SAP Comm Cloud is required to work with Spartacus?
Recommended version = SAP Commerce Cloud 1905 / Higher.
Spartacus does partially work with 1811 & 1808 as well as 6.7
Q = Does Spartacus integrate with any other SAP Solutions / Products?
Yes. Example = https://sap.github.io/spartacus-docs/integrations/
Q = Can I customize Spartacus?
Yes. We never customize Spartacus code directly – rather, we override or
replace styling and code. This approach allows ease of upgradability.

Contact Us = [email protected]
SAP Commerce with Spartacus Installation?
“SAP Comm” [2205/2211] Install “SAP Comm” Spartacus Installation
Step 1 = Download the Java 17 & Step 1 = Same
install it. After install … set the Path.

Step 2 = Download “SAP Comm” Step 2 = Same

software

Step 3 = Unzip “SAP Comm” Step 3 = Same

software [using 7-zip] & move into
proper folder.

Step 4 = Set the “ANT” Path Step 4 = Same

[Extra Step] = NA [Extra Step] = Add Spartacus Data
1] === Download Link
https://github.com/SAP/spartacus/
releases/download/storefront-
4.1.0/spartacussampledata.2105.zi
p

2] === Unzip &

Contact Us = [email protected]
 Rename As = spartacussampledata

3] === Create custom folder inside

bin & Move “spartacussampledata”

4] === “custom.properties” Copy

Paste inside

5] === Copy cx recipe

Paste & rename as = cx-for-spa

Step 5 = Set admin user password Step 5 = Set admin user password

[Extra Step] = NA [Extra Step] =

Uncomment spartacussampledata
Contact Us = [email protected]
 Set Java 17 [Optional – If Step 1 –
Set Java 17 [Optional – If Step 1 –
Java Path is already set with 17]
Java Path is already set with 17]
E:\2205\rrrssoftware\SAPComm\hy
E:\2205\rrrssoftware\SAPComm\hy
bris\bin\platform>[Open below file]
bris\bin\platform>[Open below file]

Step 6 = Install the “SAP Comm” (or) Step 6 = Install the “SAP Comm” (or)
Install the Recipe. Install the Recipe.

E:\2205\rrrssoftware\SAPComm\in E:\2205\rrrssoftware\SAPComm\in
staller>install.bat -r cx staller>install.bat -r cx-for-spa

Step 7 = Do the Build Step 7 = Same

E:\2205\rrrssoftware\SAPComm\hy
bris\bin\platform>ant clean all

Contact Us = [email protected]
Step 8 = Do the Initialization [INIT] Step 8 = Same
E:\2205\rrrssoftware\SAPComm\hy
bris\bin\platform>ant initialize

Step 9 = Start the Server Step 9 = Same

E:\2205\rrrssoftware\SAPComm\hy
bris\bin\platform>hybrisserver.bat

Step 10 = Results Step 10 = Results

Contact Us = [email protected]
Step 11 = Import OCC credentials Step 11 = Import OCC credentials
NA

Verify OAuth client successfully: -

=== Perform “hAC – Update”

Contact Us = [email protected]
Q = What “spartacussampledata” Ext contains?

Note = We can use our own sample data or recipe as long as it includes
Exts that support OCC APIs like commercewebservices.

Contact Us = [email protected]
 If we do not need all these sample stores, then we can comment them
out in your recipe’s build.gradle file.
Spartacus Sample Data extension copies data from other storefronts, so
at minimum, electronicsstore extension is required.
We can also use apparelstore & powertoolstore.
Q = Explain how the Electronics-Spa base site is created?

• Note = During system INIT / Update, the importContentCatalog function

does the following: -
o Creates a new catalog
o Synchronizes [samplestore]ContentCatalog:Staged to
[samplestore]-spaContentCatalog:Staged
o Performs some cleaning
o Imports the content catalog from impex
o Synchronizes spaContentCatalog:staged to :online
o Gives permission to the cmsmanager to do the synchronization
o Imports email data

Contact Us = [email protected]
• CMS Changes Specific to the Spartacus Project =
As [samplestore]ContentCatalog:Staged is synchronized to
[samplestore]-spaContentCatalog:Staged, So the initial data is the same
in both content catalogs.
But, to make Spartacus work better, the -spa versions contain different
CMS data in “[samplestore]-spaContentCatalog”.
• Removing Unused Pages, Content Slots and CMS Components =
Spartacus does not contain all of the pages that are found in Accelerator.
The unused pages, content slots, and CMS components are removed
from the [samplestore]-spaContentCatalog.
You can check the cleaning.impex file for each base site in the
resources/spartacussampledata/import/contentCatalogs/electronicsCo
ntentCatalog folder to see what is removed.
• Replacing the JspIncludeComponent with the CMSFlexComponent =
JspIncludeComponent allows you to include JSP code. We will not have
JSP in Spartacus Angular-based application. A new type of component,
Called CMSFlexComponent, was added in SAP CC 1905.
Note = Spartacus supports JspIncludeComponent For backwards
compatibility.
• Adding Data into the CmsSiteContext Enum = It is a dynamic Enum & that
contains the available site context. Spartacus has two site contexts:
language and currency.

Contact Us = [email protected]
• Replacing the Homepage Preview Image
• Adding a SiteContext Slot with New Components to Each Template =
2 new components [LanguageComponent & CurrencyComponent] have
been added into this SiteContext slot.

• Updating the MiniCartSlot =

MiniCartSlot in electronicsContentCatalog contains 2 components =
OrderComponent & MiniCart.
In Spartacus, OrderComponent is not used & removed from
MiniCartSlot.
• Adding CMSlink Components to a New SiteLinks Slot =
Spartacus header now contains 3 CMSlink components = “HelpLink,
ContactUsLink & SaleLink [Newly added]”.
• Making the Product Details Page CMS-Driven =
ProductDetails template adding another ProductSummarySlot slot,
which contains the following CMS components: -
ProductIntroComponent ProductImagesComponent
ProductSummaryComponent VariantSelector … AddToCart
• Making CMS Changes Related to Checkout
• Adjusting the Searchbox Component Configuration =
• Updating Page Labels to Start with a Forward Slash
• Updating the Breadcrumb in Spartacus
• Adding a SignOutLink in My Account
• Adding More Content to the “Not Found” Page
• Creating New CMS Pages = Sale, Help, ContactUs, ForgotPassword …
Contact Us = [email protected]
Q = Explain what is there in Sample Configuration Properties?

• Sample custom properties file is given for development & evaluation

purposes. We need to review below properties in real time: -

• CORS (Cross-Origin Resource Sharing) = Defines a way for “browser &

server” -- To decide which cross-origin requests for restricted resources
can or cannot be allowed. Certain Spartacus functionality, such as
checkout and consent management, may not work properly if CORS OCC
REST API settings are not configured properly in SCC.
In SCC back end, these headers can be configured in a generic fashion by
using a CorsFilter. Project properties (or) ImpEx can be used to configure
these for each node.
Contact Us = [email protected]
Q = Explain Swagger UI?
Hybris (or) SAP Commerce REST API templates (OCC templates) are
documented in Swagger in OpenAPI format.
It provides a well-structured approach to see the list of all available resources
and learn details on how to use, integrate, and update APIs.
Swagger provides information in 2 data format = “XML & JSON”, the most
popular data types for communication among clients.
Note = When developing a custom REST solution, there are no limitations
with data formats.
https://storefront-api.p1.store.net.sap/rest/v2/swagger-ui.html
URL = https://localhost:9002/occ/v2/swagger-ui.html

Contact Us = [email protected]
Spartacus Installation [Using 4.x Libraries] -- For B2C =
Angular CLI = Version 12.0.5 or later, < 13.
Yarn = Version 1.15 or later.
Node.js = The most recent 14.x or 16.x version is recommended.
Step 1 = Download & Install Node
https://nodejs.org/en/download

(OR)
https://nodejs.org/en/download/releases/

Q
= How to check installation successful? =
Open “Command Window” as Administrator:

Contact Us = [email protected]
Step 2 = Download & Install Yarn
Note = Yarn is an automated build tool. When we changing the code and save
-- yarn will do a build of application and deployed.
URL = https://classic.yarnpkg.com/en/docs/install/#windows-stable

Q = How to check installation successful?

Open “Command Window” as Administrator:

Step 3 = Install Angular CLI – Latest version.

npm install -g @angular/cli === Install Latest Version
npm install -g @angular/cli@v12-lts = Windows
npm install -g @angular/cli@^12 = Mac

Contact Us = [email protected]
Step 4 = To configure angular CLI to always use yarn over npm

This setting will be stored in <YOUR_HOMEDIR>/.angular-config.json

Step 5 = Download Visual Studio (or) Eclipse & Install it

URL = https://code.visualstudio.com/Download#

After Install ===

Contact Us = [email protected]
Step 6 = Setting up new Angular app (or) Creating new Angular App?
C:\spartcusdemo>ng new chennarrrsspastore --style=scss
? Would you like to add Angular routing? Yes

Step 7 = Add Dependencies that Spartacus need in order to be Spartacus.

Now we use Spartacus schematics, so that it will automatically add the
required libraries instead of manually adding them.
ng add @spartacus/schematics --pwa

Contact Us = [email protected]
Step 8 = Open the code [Spartacus code] in Visual Studio Editor?

Step 9 = Make sure your Hybris (or) SAP Commerce Server is running

Contact Us = [email protected]
Step 10 = Build & Test – Check if everything is working

Step 11 = Go to the code & do below changes: -

Contact Us = [email protected]
Step 12 = Results
=== Now we have 2 sites
1] Accelerator storefront [JSP]
2] Spartacus storefront [Angular JS]

Both are connected to same “SAP Comm” backend.

Contact Us = [email protected]
ACC – B2C – Home Page =

Spartacus - B2C - Home Page =

Contact Us = [email protected]
ACC – B2C – Search Results Page =

Spartacus – B2C - Search Page =

Contact Us = [email protected]
ACC – B2C – Category Page [PLP] =

Spartacus – B2C - Category Page =

Contact Us = [email protected]
ACC – B2C – Product Details Page [PDP] =

Spartacus – B2C - Product Details Page =

Contact Us = [email protected]
ACC – B2C – Cart Page =

Spartacus – B2C - Cart Page =

Contact Us = [email protected]
Note = Above Cart [ACC Site Cart & Spartacus Site Cart] information we should
see in Backend [SAP Comm].

Cart Entries ===

Contact Us = [email protected]
ACC Checkout with Login [Login with ID – Checkout (or) Guest – Checkout]

Spartacus – B2C - Checkout with Login [Login with ID – Checkout]

Contact Us = [email protected]
Note = Right now, we don’t see the “Guest Checkout” in Spartacus.
Q = How to enable (or) bring the “Guest Checkout”?

=== Now we can see the “Guest Checkout” button.

Contact Us = [email protected]
ACC – B2C – “Sign In / Register” =

Spartacus – B2C - “Sign In / Register” =

Contact Us = [email protected]
ACC – B2C – Checkout =

Spartacus – B2C – Checkout =

Contact Us = [email protected]
Note = In case of ACC storefront – If we get below error after entering the
payment – Next

Solution = [ hAC URL = https://localhost:9002/login ]

website.electronics.https = https://localhost:9002/yacceleratorstorefront

Contact Us = [email protected]
ACC – B2C – Place Order =

How to fix this error? -- For now – Let’s assign the tax value at the Cart level.

Contact Us = [email protected]
ACC – B2C - Order No = 4003

SPA – B2C - Place Order [Order No = 4004] =

Contact Us = [email protected]
Now – Let’s Go to Backend [SAP Comm] & verify the orders: -

Order Entries =

Contact Us = [email protected]
ACC – B2C – My Account =

SPA – B2C - My Account =

Contact Us = [email protected]
ACC – B2C – Order History =

SPA – B2C - Order History =

Contact Us = [email protected]
ACC – B2C – Order Details

SPA – B2C - Order Details =

Contact Us = [email protected]
ACC – B2C – Cancel Order =

SPA – B2C - Cancel Order =

Contact Us = [email protected]
Note (or) Conclusion =
ACC Storefront [Site] –
1] User = [email protected]
2] Order = 4003 3] Carts = 4007
4] Products = 553637 5] Content 6] ===

SPA Storefront [Site] –

1] User = [email protected]
2] Order = 4004 3] Carts = 4008
4] Products = 553637 5] Content 6] ===

Contact Us = [email protected]
Q1 = Can [email protected] also login “SPA Site”
= Yes
Q2 = Can [email protected] uses ACC Cart in “SPA Site”?
= No

Contact Us = [email protected]
Q3 = Can [email protected] uses ACC Order in “SPA Site”?
= Yes

Contact Us = [email protected]
After installation –
[1] ACC – B2C – Electronics Sample Site
https://localhost:9002/yacceleratorstorefront/?site=electronics

ACC – B2C – Apparel Sample Site

https://localhost:9002/yacceleratorstorefront/?site=apparel-uk

https://localhost:9002/yacceleratorstorefront/?site=apparel-de

Contact Us = [email protected]
[2] SPA – B2C – Electronics Sample Site
http://localhost:4200/

SPA – B2C – Apparel Sample Site

http://localhost:4200/apparel-uk-spa/en/GBP/

Contact Us = [email protected]
Q = How to enable both “Electronics Site ... Apparel UK Site ...”?

Contact Us = [email protected]
Note = Electronics ACC Site (or) SPA Site by default supporting “4 Languages
& 2 Currencies”.

Details Are = Go to -- Website -- Base Store [Is having – Lang … Curr …]

Contact Us = [email protected]
After installation –
ACC – B2B – Powertools Sample Site
https://localhost:9002/yb2bacceleratorstorefront/?site=powertools
https://powertools.local:9002/yb2bacceleratorstorefront/powertools/en/U
SD/login
https://localhost:9002/yb2bacceleratorstorefront/powertools/en/USD/login

SPA – B2B – Powertools Sample Site

http://localhost:4200/powertools-spa/en/USD/

Contact Us = [email protected]
SPA – B2B Challenges =

In B2B website [Powertools] – Add to cart is failing

Bcoz – As per the OOTB both “B2C SPA & B2B SPA” can’t be together.

Q = What is the solution for this?

Sol1 =

Sol2 = Do the customization to have both [B2C … B2B …] together.

Contact Us = [email protected]
 Spartacus B2C Setup Spartacus B2B Setup
Pre = Setup “SAP Comm” Pre = Same
Step 1 = Download & Install Node Step 1 = Same
Step 2 = Download & Install Yarn Step 2 = Same
Step 3 = Install Angular CLI – Latest Step 3 = Same
version
Step 4 = To configure angular CLI to Step 4 = Same
always use yarn over npm
Step 5 = Download Visual Studio (or) Step 5 = Same
Eclipse & Install it
Step 6 = Setting up new Angular app
Step 6 = Same [Syntax] =
(or) Creating new Angular App? E:\2205\rrrssoftware>ng new
chennarrrsspastore --style=scss
Step 7 = Add Dependencies that Step 7 = Lil difference
Spartacus need in order to be
Spartacus.
Select --
Organization - Administration
Organization - Order Approval
Product - Bulk Pricing
Product Config - CPQ Config

Step 8 = Open the code [Spartacus Step 8 = Same

code] in Visual Studio Editor
Step 9 = Make sure your Hybris (or) Step 9 = Same
SAP Commerce Server is running
Contact Us = [email protected]
Step 10 = Build & Test – Check if Step 10 = Same
everything is working
Step 11 = Go to the code & do below Step 11 = Go to the code & do below
changes changes

Step 12 = Results Step 12 = Results

Note = Spartacus does not support B2C and B2B storefronts running together
in a single storefront application.
If we install “Organization - Administration … Organization - Order Approval
…” then B2C storefront will load but it will not work properly.
Step 7 = B2B

Contact Us = [email protected]
Step 11 = [B2B] Go to the code & do below changes: -

Q = How to verify what versions of Spartacus / Angular libraries installed?

Contact Us = [email protected]
Testing B2B Sites Features =
Step 1 = Go to backoffice & find “B2B Customer Group” User. Reset PWD.

Step 2 = Come to site & Place Order

URL = http://localhost:4200/powertools-spa/en/USD/login
Home page with Login =

Contact Us = [email protected]
After login – Home page & My-Account [For B2B Customer Group] =

Category Page & Add Items to Cart =

Contact Us = [email protected]
Cart Page =

Checkout Page =

Contact Us = [email protected]
Order Review Page =

Order Confirmation Page =

Contact Us = [email protected]
Order History Page =

Step 3 = Now go to “SAP Comm” backoffice & Verify orders are reached

Contact Us = [email protected]
Scenario = My-Account For “B2B Customer Group” assigned: -
Go to “SAP Comm” Backoffice – B2B Commerce – B2B Customers –
Assign “B2B Customer Group” -- Save

Results =

Contact Us = [email protected]
My-Account For “B2B Approver Group” assigned: -
“SAP Comm” Backoffice --

Contact Us = [email protected]
My-Account For “B2B Admin Group” assigned: -

Contact Us = [email protected]
Note = We can define “baseUrl … prefix … features.level … context and …”
inside spartacus-configuration.module.ts.
Q = Explain Adding Spartacus Core Libraries & Features to Angular Project
(or) Angular App?
Syntax = ng add @spartacus/schematics@latest
===> ng add @spartacus/schematics@latest --baseUrl https://spartacus-
demo.eastus.cloudapp.azure.com:8443/ --baseSite=electronics-spa --ssr
===> Various options that can use with the ng add: -
• baseUrl = Sets the base URL of your CX OCC back end.
• baseSite = List of base site(s) to use with Spartacus.
• currency … language = List of the curr … lang to use in Spartacus
• urlParameters = List that represents the order of site-context
parameters, such as ['baseSite', 'language', 'currency']
• occPrefix = Sets the OCC API prefix, such as /occ/v2/
• useMetaTags = Determines whether or not to configure the baseUrl and
mediaUrl in the meta tags from index.html.
• featureLevel = Sets the application feature level. Default value is same
as version of the Spartacus packages you are working with.
Example = The featureLevel for @spartacus/[email protected] is 3.2
• overwriteAppComponent = Overwrites the content of
app.component.html. The default value is true.
• pwa = Includes PWA features when building the application
• ssr = Includes the server-side rendering (SSR) configuration
• lazy = Installs lazy loading for each feature modules. Default value is true.
• project = Allows us to specify the project that we want to configure our
Spartacus App. The default is the workspace default project.

Contact Us = [email protected]
Scenario = If any CORS Challenges then execute below ImpEx from hAC: -

Contact Us = [email protected]
Q: What is Spartacus?
• It's a free JavaScript [Angular based] Storefront for SAP Commerce Cloud
[SCC]
• It's a replacement for accelerator templates that are included in SCC
• Also, it uses modern web technologies and frameworks
• It's decoupled from the platform = Meaning it runs on its own separate
server node
• It communicates with the platform only through REST APIs
• With this developer no longer needs to understand the backend
technology
• It’s open-source project. It's available from Github & we can download
source code freely
URL = https://github.com/SAP/spartacus

• It publishes as a set of libraries. With these libraries that you create your
storefront app.
Take published Spartacus libraries, import them into your custom app,
you change styling and you add features, and then you publish your
Contact Us = [email protected]
 owned, branded storefront and you serve that. When your Spartacus
based storefront is running, it pulls products and content from the
backend as needed.

• It’s Single page application [SPA] with Progressive Web App [PWA]
features
SPA Meaning = A single HTML page loads & rest of it is driven by code.
This gives inherently good performance because Spartacus only loads
parts of the page that require updating. The entire page is not reloaded
every time something changes.
It allows great UX because it's fast but also you have control everything
in the UI.
Search indexing or SEO is still supported.

Contact Us = [email protected]
• Q = Why use Spartacus? = It allows quickly create & engaging PWA
storefront for SCC. That results in a delightful CX, and that results in an
increase in conversion, and revenue
• Q = Benefits of Spartacus? = It's free. Just use it [No license to sign]. Not
for sale.
o Libraries are upgradable = So our new features take advantage of
them right away

o Its configurable = Styling and many other features

o Its extendable = We can add features / customize comp. & hide if

any not required

o It’s decoupled & scalable

o It comes with many OOTB features

Contact Us = [email protected]
o It's fast to develop

o It’s PWA

o It supports search indexing or SEO

o It's driven by CMS & supports smart editing

o It can be built with Commerce Cloud version 2 [CCV2]

o Providing frequent updates to libraries
o Spartacus Storefront has many OOTB Features: -
Home page Search Categories
Product details Cart page Adding to cart
Checkout Order history
o Testing URL for Spartacus =
https://spartacus-demo.eastus.cloudapp.azure.com/electronics-
spa/en/USD/

Contact Us = [email protected]
Q = Choosing Which Storefront to Use for Your SAP Commerce Cloud
Solution?

Note = If SAP Comm Version 1905 then use below URL for Swagger =
https://localhost:9002/rest/v2/swagger-ui.html
If SAP Comm Version 2005 / More then use below URL for Swagger =
https://localhost:9002/occ/v2/swagger-ui.html

Contact Us = [email protected]
Q = Why configurable routing important? =
We would like to have our URL’s: -
• Stateful URL’s = Shareable URL’s & Opens anywhere
Example = http://localhost:4200/electronics-spa/en/USD/p/816780
• Pretty URLs = Human readable & don’t contain any special chars
• SEO = Improve Search Engine Optimization
• Migration = Old solution have well indexed routes & we can move those
to Spartacus
Note: - Spartacus also supports “Step – by – Step” migration.
Means, some pages we can have in old solution & some pages we can
have in Spartacus.
Q2 = What are SEO Guidelines?
• Use keywords = Eg: - /digital-cameras/compact/
• Use hyphens as word separators =
Eg: - /digital-cameras/ instead of /digital%20cameras/
• Use lowercase = Eg: - /digital-cameras/ instead of /Digital-Cameras/
• Keep URLs short = Eg: - /p/1981415/pl60-sliver instead of
/products/awe/cool/digital-cameras/samsung/1981415/pl60-sliver
Note: - This contradicting “1st Guideline = Use Keywords”. So, keep
balancing.
Q = What are the key characteristics of “Routing in Spartacus”?
• It’s based on Angular Router
• Some routes come from the backend [Content pages]
• Some are configured in Spartacus [Non-Content Pages = Product &
Category pages]
• Possibility to override / extend this configuration

Contact Us = [email protected]
Q = What are the Spartacus Installation Possibilities?
• StackBlitz = This is online code editor. Allows us to quickly install the
applications & demo. So, this is not so good for “Day-Day” coding
• Manual Installation = Use package manager to install manually. This is
time consuming
• Schematics = This is angular features & allows us to install lots of
required dependencies & adds code
Q = Explain how to “Enabling Context” in the Storefront URL?

Every site in CMS can have different set of those parameters [BaseSite,
Language & Currency].

Q = Why do we need to add “Context” to URL?

URL to be sharable [To Others / Friends] & Also Meet SEO Requirements.

Contact Us = [email protected]
Q = How to configure this Context?

Note: - 1) Parameters order matters

2) Possible to add custom parameters
3) Same could be configured in Backend [SAP Commerce]
4) This is Best Practice
Q = How to add “custom” parameters in URL?

Contact Us = [email protected]
Q = How to get “context” from Backend [SAP Commerce]?

Q = What is the best Practice for creating a new Content Page?

• Use ng generate page
• Use Angular Routing
• Use the CMS
• Create html page & configure its URL address in http server settings
Q = What command do you use to quickly install the Spartacus app?
• ng new @spartacus/schematics
• yarn install
• ng generate spartacus
• ng add @spartacus/schematics
Q = Which of the following is a legacy route for the category page?
• /c/:categoryCode
• **/c/:categoryName/:categoryCode
• **/category/:categoryCode
• **/c/:categoryCode

Contact Us = [email protected]
Scenario = Let’s understand how the Spartacus page loading & calls?
1] Spartacus Home Page =

Contact Us = [email protected]
2] SAP Commerce OCC =
https://localhost:9002/occ/v2/swagger-ui.html

Contact Us = [email protected]
3] SAP Commerce Backoffice

Site Results =

Contact Us = [email protected]
4] SAP Commerce Code

Contact Us = [email protected]
Scenario = How to use the SAP Spartacus Demo Site instead of localhost?
Step 1 = Demo Site URL
https://spartacus-demo.eastus.cloudapp.azure.com/electronics-
spa/en/USD/

Step 2 = Do the Spartacus Configuration Module changes

Contact Us = [email protected]
Step 3 = Results

Contact Us = [email protected]
Q = Explain Spartacus Installation Types?
Manual [Legacy approach] Schematics [Preferred approach]
Local setup Local setup
Use Angular CLI to create a new Similar to manual setup.
project.
Install dependencies manually. Quick local setup.

Q = Explain Spartacus Libraries?

• Libraries rather than template code
• Spartacus consists of multiple packages
• Spartacus is published as libraries
• Libraries are published bi-weekly
• Libraries are versioned
• Customer can decide How / When to upgrade
• Published at npmjs.com

=====> Refer = https://sap.github.io/spartacus/overview.html

Contact Us = [email protected]
Q = Explain Spartacus Modules?
Module = Grouping components, directives, pipes & services that are related.
Spartacus keeps modules as small as possible. Most of the cases -- module
has only 1 component.
====> Refer = https://sap.github.io/spartacus/modules.html

Example =
https://sap.github.io/spartacus/modules/ActiveFacetsModule.html

Contact Us = [email protected]
Spartacus Recipe Modules = Offers pre-built storefront configurations.
It takes only few lines of code to create a Spartacus-based storefront.

Q = Explain CORS [Cross-Origin Resource Sharing]

• Defines a way for browser & server to decide which cross-origin requests
can (or) can’t be allowed for restricted resources.
• Cross-Origin – Means via a different Domain, Protocol, or Port.
• Certain Spartacus functionalities [like checkout / …] may not work
properly if the CORS OCC RESTful API settings are not configured
properly in SAP Commerce Clouod.
• Configure CORS for a specific application =
allowedOrigins allowedMethods allowedHeaders

Contact Us = [email protected]
Q = Explain structure of CX storefront?
<app-root
<cx-storefront
<cx-skip-link
<header
<cx-page-slot
<cx-global-message
<main
<cx-page-layout
<cx-page-slot
<cx-page-slot

Contact Us = [email protected]