SAP Spartacus: a small, but practical overview

by

SAP Spartacus is a open-source system gave by SAP to creating customer facing facade sites. It was written in Angular as a bunch of libraries that give a wide range of functionalities.

Being an open-source project with a major local area, permits every individual to give criticism and answers for normal issues.

Regardless of working out of the crate, it very well may be additionally overhauled and redone to suit the client’s requirements.

In this article, a specialized outline of the center parts of the Spartacus framework will be given.

Here are the aspects that will be covered:

  • Architecture
  • Technologies
  • Key features: Layout customization, Multi-store configuration, SSR, PWA
  • Pros & Cons

SAP Spartacus template homepage

Architecture:

The Storefront, one of the basic components of Spartacus, is decoupled from the SAP Commerce Cloud, yet it depends on its REST APIs to appropriately work. This permits a total partition of worries in regards to frontend and backend improvement.

The format is as of now set up to have a responsive way of behaving, freely of the gadget type (mobile/tablet/desktop).

SAP Spartacus Architecture

Technologies:

Spartacus was mainly written using Angular, Typescript, SASS, RxJS, NgRX, and Bootstrap.

For unit testing, it uses Jasmine and Karma.

As for code quality, it uses Prettier and TSLint.

For bundling purposes, Webpack is used.

Key features:

Let’s talk about some of the most important features of Spartacus:

  • Layout customization
  • Multi-store configuration
  • SSR
  • PWA

Layout customization:

The Spartacus retail facade is made out of countless Javascript parts that are planned to CMS parts. The CMS parts, thusly, are parts given by the SAP Commerce Cloud CMS and they address the substance utilized in the customer facing facade.

This sort of planning can be altered so one can have his parts delivering explicit substance where it’s ideal. A model is make a more perplexing footer for certain pictures or web-based entertainment links**.**

The part unambiguous business rationale or styling can likewise be altered.

The retail facade can in this manner be redone in various ways:

  • Component customization
  • Styling customization
  • SmartEdit’s library customization

Component customization:

This approach comprises in giving a custom Angular part that supersedes a current CMS part. Thusly, every spot that has the CMS part will rather have our custom part.

This should be possible in two distinct methodologies:

  • Giving a CMS part design in our custom Angular part.
  • Utilizing outlets.

In the first approach, we start by making our custom Angular part. In its module, we should import the ConfigModule and call withConfig strategy expects a setup object, where we characterize which CMS parts we need to supersede.

We can likewise give custom part benefits. In the accompanying bit, we are superseding the CheckoutReviewOrder part with our custom one, while likewise giving a custom CheckoutDeliveryService.

Component customization config inside our custom component module

The official documentation does not provide a list of all the CMS components that exist, so in order to find the component names, we must use the information present in the network tab of the browser.

A simple way of finding a specific component is to first inspect the HTML code to find the location where the component exists and then use its position attribute to search the component name in the network tab.

Below we searched for the component related to the product list. We inspected the code and found that the ProductGridSlot has a single component named ProductGridComponent, which in turn is the component we wanted to override.

cx-page-slot component in the inspected HTML

Some of the attributes available in the network tab for the ProductGridSlot

In the second approach, using outlets, we place our custom components inside ng-template tags with the cxOutletRef directive to link our components with the outlets we want to replace. We can even use the cxOutletPos directive to change the position in which our components appear.

In the snippet below, we have our custom component referencing the header outlet and placing the component before the header. The cxOutletRef values can be obtained by inspecting the HTML DOM tree (using the position attribute inside the cx-page-slot components like in the previous example).

Header outlet being overridden with our custom header component

Styling customization:

With respect to styling, we can make our own CSS rules to style the retail facade as we want. These principles can be applied in various ways: the first is to change worldwide SCSS factors that influence the entire site (for instance, changing the essential tone to green with the -cx-variety essential variable). To know which factors to utilize, review the :root selector in the HTML of the program. Altering worldwide factors should be finished in the styles.css document, ideally inside the body selector, to try not to utilize the !important catchphrase.

The other is to apply styles to explicit pieces of the site, either utilizing our custom parts or utilizing CMS part/opening class selectors.

In the last option, we can for example apply a red foundation to each cx-truck item part and apply different guidelines to their kids, as so:

SCSS styling for the cx-cart-item component

SmartEdit:

Notwithstanding the two customization approaches introduced above, there is one extra called SmartEdit.

The SmartEdit library is one of the numerous Spartacus libraries that can be utilized to tweak your customer facing facade. It is set up in the smart-alter feature.module.ts document. Given the URL we characterized, we can get to the UI through the program to begin altering the look and feel of our customer facing facade.

With the assistance of a Basic Edit or Advanced Edit usefulness, the client can conclude which components a page ought to have, and as per the pattern in which they ought to show up. Extra styling can likewise be applied with CSS classes.

Each page has a bunch of openings with parts that store information. For instance, each page can have a NavigationBarSlot that thus has a bunch of parts for route purposes.

The actual substance (parts/spaces/pages) is overseen in the SAP CX BackOffice (link below), so the progressions made in the SmartEdit need to likewise be reflected in the backend. The group liable for the BackOffice characterizes what pages will exist and what parts will be available in the retail facade. This is effortlessly finished with the SAP CX BackOffice UI.

SmartEdit’s Advanced Edit

I18N customization:

Spartacus retail facade has its substance given by the CMS, yet the text from the retail facade marks (like texts in buttons) is put away in discrete records, which considers custom interpretations to abrogate them.

Setting up internationalization is a straightforward cycle. One can either utilize the predefined English interpretations or simply utilize some custom language interpretations or even join them both. In the last case, the predefined interpretations should be given before the custom ones.

The custom language interpretations are typically put away in JSON documents.

The accompanying piece outlines the utilization of two custom interpretations: English and German. They come from two JSON documents, where each key is planned to the separate worth interpretation.

i18N configuration

After defining the translations, they can be used in the HTML or the Typescript code.

If used in the HTML, the cxTranslate pipe must be invoked like so:

If used in the Typescript, the TranslationService has a translate method that receives a string as input and returns an Observable that can be subscribed to in the HTML or in the Typescript.

Retrieving translations in the Typescript

Multi-store configuration:

In a scenario in which we have multiple stores with different attributes or layouts, we can use the multi-site configuration provided by Spartacus. The storefront can be configured according to some context properties, such as base site, language, and currency. These values are used in the storefront URL to configure a given store website.

For instance, http://localhost:4200/store1/en/GBP/ means that we are accessing the store whose base site is store1 with the English language and the currency set to GBP.

This configuration is made in the spartacus-configuration.module.ts file. All we need to do is provide the SiteContextConfig object as follows:

Multi-site configuration

We’ll then have two base sites, with two languages: English and German with two currencies: GBP and USD.

Multi-store styling can also be done. After setting up the SiteContextConfig, the main app-root component stores the base site as a CSS class.


App-root component with store/site class name

With this class, we can create custom CSS rules for each individual store. They can be stored wherever we want, but preferably we should store them in the styles folder, inside a sub-folder for each store.

For instance, we can specify different colors for the header of each store.

SCSS for multiple stores

Server-Side Rendering:

Spartacus gives server-side delivering highlights that permit us to deliver the customer facing facade content on the server side, consequently accelerating the stacking system of the pages and giving us more SEO focuses.

Empowering SSR should be possible in two or three different ways, either by running a solitary order or by physically setting everything up. We present the order underneath since it’s the easiest interaction:

ng add @spartacus/schematics – – ssr

After this, everything is finished and no further arrangement is required.

Note: SSR can likewise be crippled at times, for example,

  • Having a CMS part that requires customized input
  • Having a CMS part that needn’t bother with to be more performant through SSR
  • Having a CMS part that collaborates with outside administrations and has some level of idleness or it isn’t significant for ordering/social sharing.

Progressive Web Applications:

Progressive Web Application support can be added to Spartacus as well by running the following command:

ng add @spartacus/schematics –pwa

After the development phase is done, just run the build command:

ng build –prod

Finally, to ensure that everything is up and running, you can use the http-server library to serve the application, by running:

http-server ./dist/your-app

Note: it can either be installed with npm or just executed with npx

Pros & Cons:

Subsequent to working with Spartacus, there are two or three advantages and disadvantages one ought to be aware of, which help in choosing whether to utilize Spartacus or not.

Professionals:

  • Responsive out of the crate.
  • Ideal for projects with minor changes and customizations connected with internet business.
  • Consistent joining with SAP CommerceCloud and other BE administrations

Cons:

  • For greater ventures, the customization cycle can be troublesome. Not all things be tweaked as we need. A few pieces of the design are simply editable as per the construction that comes from the CMS.
  • Confounding documentation or absence of it.
  • At times, it’s elusive the right name of the CMS part/page space we need to supersede.
  • In spite of the fact that Spartacus is open-source, we really want to purchase a SAP Hybris permit.

Conclusion:

As of now, you ought to now be acclimated with SAP Spartacus and with a portion of the center highlights it presents. This was a more specialized outline of the stage where we attempted to cover the main viewpoints.

On the off chance that the stars referenced above outweight the cons for your venture prerequisites, Spartacus is a decent system for building web based business retail facade applications