Spartacus, Angular Based storefront for SAP Commerce Cloud

1.Introduction

Spartacus is an angular based framework for SAP commerce cloud. It is a framework for PWA apps developed by SAP for their Commerce platform. It is currently in pre-alpha stage of the de.

Spartacus talks to SAP Commerce Cloud exclusively through the Commerce REST API.The strong point about this solution is the new storefront will no longer be part of the e-commerce platform. Since both UI and Backend systems are decoupled we can upgrade both the platform and the storefront code separately without any need of rewriting the templates, because API interfaces will be the same.

Some of the key features of Spartacus are:

— An open source storefront based on JS frameworks and tools.

— A single page application with PWA features.

— The storefront is customizable and extendible both at run and build time.

— Merge new features from releases into your storefront.

— Decoupled and upgradable architecture.

— You can build custom libraries as well to re-use your component in multiple sites.

— Libraries are provided with OOTB components which are completely separated so you can dictate whatever you want or extend

2. Architecture

Spartacus has a decoupled architecture that means storefront itself act as a separate entity which on top of its OOTB features can have custom features. It interacts through REST API with SAP Commerce Cloud or any other SAP, non-SAP tool which makes it an independent framework. It allows front-end developers to no longer understand the backend technology, the only interaction they need is through web service layer which makes development, testing and deployment of an individual platform much easier.

Image Reference: – https://blogs.sap.com/2019/01/08/introduction-to-spartacus/

Each functionality exists as a separate module in Angular. You need to create a separate site page in Angular code base if a new page is created in Hybris system.

Technologies used to build Spartacus:

— For JS storefront:
Angular 6.1.8, TypeScript 2.9 and sass

— For reactive programming, state management and styling:
RxJS 6.3.3, Ngrx 6.1 and Bootstrap 3.2.2

— For unit testing:
Jasmine, Karma and Protactor

3. Installation

Prerequisites:

— js >= 10.14.1 -> Download installer and install from https://nodejs.org/en/download/

— Angular cli v7.2.1 -> install angular using command – npm install -g @angular/cli

— yarn >= 1.9.4 -> Download installer and install from https://yarnpkg.com/lang/en/docs/install/#windows-stable

1. Backend Installation:

The Spartacus JavaScript Storefront uses SAP Commerce Cloud for its back end and makes use of the sample data from the B2C Accelerator electronics storefront.

1. Install, initialize and start a new instance of SAP commerce 1808, using b2c_acc_plus recipes refer – https://help.hybris.com/1808/hcd/8c46c266866910149666a0fe4caeee4e.html

2. Import spartacus_sample_data.impexwhich you can download here: https://help.hybris.com/1808/api/spartacus/spartacus_sample_data.impex

3. Configure OCC client using following impex

Refer below link for more installation Details- https://help.hybris.com/1808/hcd/627c92db29ce4fce8b01ffbe478a8b3b.html#loio4079b4327ac243b6b3bd507cda6d74ff

2. Angular application Installation:

1. Creating an angular application:

Step 1 :

Create a new Angular application with the name mystore

Generate an angular application using command

ng new mystore –style=scss –routing=true

Step 2:

Access store directory using command

cd mystore

2. Installing peer dependencies to storefront:

Step 1:

Add the following dependencies to the dependencies section of {mystore}/package.json:

Step 2:

Install dependencies using command

yarn install

3. Adding the storefront dependencies

Step 1:

Create Add dependencies using command

The storefront libraries are not yet released, so we are using the @next tag to install the latest pre-alpha version that is available.

4. Importing Spartacus Storefront in our angular application

Step 1:-

Open mystore/src/app/app.module.ts and import Spartacus add below import

import { StorefrontModule } from ‘@spartacus/storefront’;

Step 2:-

Add the StorefrontModule to the import section of the NgModule decorator:

imports: [BrowserModule, StorefrontModule],

5. Configuring the storefront

Step 1 :–

Configure the storefront, use the withConfig method on the Storefront Module

Using above configuration that your storefront can communicate with your SAP Commerce back end

6. Adding storefront component

Step 1:-

Open mystore/src/app/app.component.html and replace the entire contents of the file with the following line:

<cx-storefront>Loading…</cx-storefront>

Step 2:-

Import the styles from the @spartacus/styles library by opening mystore/src/styles.scss and adding the following line:

(Rename file extension mystore/src/styles.css to styles.scss)

@import “~@spartacus/styles/index”;

Check mystore/src/app/app.module.ts file

Check mystore/src/app/app.component.html file

Check file mystore/src/styles.scss

Check all file config in mystore/angular.json

7. Build and start application

Step 1:-

Validating the backend

Validate back end instance running, Check service response https://localhost:9002/rest/v2/electronics/cms/pages

Step 2:-

Accept the security exception in your browser if you are running a development instance with a self-signed HTTPS certificat

Step 3:-

Starting storefront application

Start application using command ng serve

Open browser and access storefront using URL http://localhost:4200/

4.Customizing and Extending Spartacus

1. Customising Spartacus storefront Styles

Spartacus allow you to customize the styles of Spartacus, in angular storefront. We can override global css elements in storefront application i.e. mystore/styles.css

1. Add custom css variables to styles.scss

2. Add css variables to specific elements or components (i.e. y-add-to-cart)

1. Change header primary colour to Blue

We can override global css classes in our angular application style file

Open mystore/styles.scss

Output:-Header element colour changed to blue.

2. Change other root element colour to green and change minicart component colour to orange and change border-radius to 30%

Open mystore/styles.scss add below code

Output: – Changedminicart component style, root element colour changed to green

2. Customising componentsThe ability to replace a component, using so-called outlets. We intend to have outlets for pages, page templates, CMS slots, component (types) or any fragments that we’ve marked as an outlet.

1. Override the search component

Override the SearchBoxComponent using an ng-template, Add below code in \mystore\src\app\app-componet.html

cxOutletRef=”” takes a string parameter which can map to component or fragment

cxOutletPos=”” parameters is adjest position of component

Output: – Changed SearchBoxComponent

3. Creating new Component

SAP Commerce provides the webservices to deliver the information about the component configuration to the Angular storefront.

This information contains a list of components and their details grouped by the content slots.

Spartacus renders the components in the browser, so it should know what SAP Commerce component corresponds to what Angular component. This mapping is pre-configured for the list of standard out-of-the-box components.

Example: – Create simple custom component to print a copyright with automatically updated current year.

Step 1: –Define a new WCMS component, called CopyrightComponent.

Step 2: –Build, restart server and update system

Step 3: – create an instance and assign the component to the slot

After the change, the Angular Storefront will receive the updated JSON, with our component in the FooterSlot

Frontend Configuration

Step 4: –Now create new angularcomponent in storefront

Create component using command

ng g c copyright

Step 5: –Configure copyright component class

open copyright/copyright.component.ts

Create a new method getText to replace ${currentYear} with the current year on the fly.

Step 6: –Configure view copyright.component.html

Step 7: –Register new component in object mapping

register our new component in mapping object, this can be done when the root storefront module StorefrontModule is initialized.

Add cmsComponents attribute in withConfig and add selector for copyright component

Open mystore/app/app.module.ts and add

cmsComponents :{

CopyrightComponent: { selector: ‘app-copyright’ }

}

Your file look like

Output

4. Creating new CMS Page

Working of CMS pages build in angular storefront: –

If we create a WCMS page at Hybris system side, we need to add this page in the Angular code too. The system is not capable yet to pull new pages from the WCMS automatically.

To create same page in angular storefront we have two components, one for page level and second for Page Layout

For Page template, we need a JSP file with an HTML template, the same thing in Spartacus, we need to have an Angular component to provide an HTML template.

page component and page layout component. The layout contains the slot definitions.

The Angular component y-dynamic-slot injects the components according to the Hybris Commerce Cloud component maps to Angular component mapping.

For example,

LoginPageComponent is an Angular page component with a template defined in login-page.component.html that includes layout component LoginPageLayoutComponent using a tag ‘y-login-page-layout‘.

The layout page template defines the backbone of HTML page in login-page-layout.component.html.

Below steps explains how to create a new page in angular storefront.Here we will create a new page in angular storefront – FAQ page

Step 1: – Create two components, faq-page and page-layout.

Using command

ng g c my-page

ng g c static-page-layout

Step 2: – Create two modules, Using command

ng g m my-page

ng g m static-page-layout

Step 3: – Defines the page label and a path in my-page.module.js

Step 4: – my-page.component.js defines the template

Step 5: – Define view template my-page.component.html

The slot names should be the same as used at the Hybris server side (WCMS). For each slot, the storefront retrieves the content (in form of the JSON structure). The FAQ page we use in this demo is built with the template where below slots are used.