Hybrismart
SOLR Search Promo engine Tools Backoffice Platform Other
. . .
SOLR Search Promo engine Tools Backoffice Platform Other

Spartacus, Angular-based Javascript Storefront for SAP Commerce Cloud

Category: Uncategorized Author: 28 October 2018 2 comments
UPDATE, Nov 19. Recently, 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. In EPAM, we have our implementation of PWA ready to be integrated with SAP Commerce. However, unlike the products listed above, both are commercial offerings, and licensing is built around proprietary rights. Also we need to create an instance and assign the component to the slot (Impex):
$contentCatalog=electronicsContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Online])[default=$contentCatalog:Online]

INSERT_UPDATE CopyrightComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;template
;;CopyrightComponent;Copyright Component;CopyrightComponent;Copyright © 2000-${currentYear} by ABC, Inc., or related companies. All rights reserved.

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];cmsComponents(uid,$contentCV)
;;FooterSlot;CopyrightComponent
After the change, the Angular Storefront will receive the updated JSON, with our component in the FooterSlot, but it will not be displayed yet (because there is no Angular component for that): Now let’s create an Angular component for CopyrightComponent:
ng g c copyright
That will add a files in our Angular project: The next step is to implement client side logic and template: copyright.component.ts: Here we replace ${currentYear} with the current year “on the fly”.
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { AbstractCmsComponent } from '@spartacus/storefront';

@Component({
selector: 'app-copyright',
templateUrl: './copyright.component.html',
styleUrls: ['./copyright.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CopyrightComponent extends AbstractCmsComponent {
public getText(): string {
return this.component.template.replace('${currentYear}', (new Date()).getFullYear().toString());
}
}
The module refers to the template, copyright.component.html:
<p [innerHtml]="getText()"></p>
We need to register our new component in mapping object, this can be done when the root storefront module StorefrontModule is initialized:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { StorefrontModule } from '@spartacus/storefront';
import { CopyrightComponent } from './copyright/copyright.component';

@NgModule({
declarations: [
AppComponent,
CopyrightComponent
],
imports: [BrowserModule, StorefrontModule.withConfig({
server: {
baseUrl: 'https://localhost:9002',
},
cmsComponentMapping: {
CopyrightComponent: 'app-copyright',
}
})],
entryComponents: [CopyrightComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
After making these changes, we’ll see our copyright component in the footer.

Changing Component Layout

Let’s try to modify the title of the product, by adding some text before and after. First, we need to check what outlet is used for this block: We are interested in the section “ng-container *cxOutlet=”outlets.TITLE”. The method ‘outlets’ is defined as “return ProductDetailsComponent.outlets” here. All we need to remember is this name: ProductDetailsComponent.TITLE.
<cx-storefront>Loading...</cx-storefront>

<ng-template [cxOutletRef]="pdpOutlets.TITLE" let-product>
<div class="y-product-details__item-name">[[[{{product?.name}}]]]</div>
<div class="y-product-details__item-code">[[[ID {{product?.code}}]]]</div>
</ng-template>
So, at the website we’ll see the changed TITLE area.  

Other Considerations

Service Workers, SSR and offline mode

Currently, the framework doesn’t support PWA spec in full. Offline mode, server-side rendering and service workers, and add-to-home-screen are not supported yet, but the work is in progress. Spartacus also doesn’t use IndexedDB – in-browser database engine to help with the offline mode.

Multi-site support

It is still on roadmap too. You can specify the site id in the storefront configuration is provided, but it is too basic. The server-side code is capable to determine it automatically, and this is expected to be in the Angular storefront too.

Checkout

The current version supports only one checkout flow in the storefront. Basically, the entire checkout process is defined in the checkout component and the whole flow is define in storefront code. For the reference, the traditional Spring/JSP-based storefront used to have a checkout framework and several CMS sites can have different checkouts within one shared storefront code base.

Conclusion

Spartacus looks very promising, even in its pre-alpha version. Of course, many things will change until it is released officially as stable and production ready. No one disputes that SPA/PWA is the future of web applications, a next step in getting apps closer to perfection. They are fast, the interface is unified. Possibly you remember how slow the progress come into our life when not supported in full by large players on the market. The large companies tend to avoid experimenting even with the non-critical components.  For example, some time ago, many large car manufacturers kept installing cassette players in their cars, years after the iPod revolution. It is good to see that SAP is moving in the right direction toward openness, cutting-edge technologies, and innovations. For developers, learning Spartacus will help their career: Angular storefront will inevitably replace the current JSP-based accelerator. Both for developers and businesses: “Early bird catches the worm.”.  

2 Responses

  1. boufnichel

    boufnichel

    Reply

    29 October 2018 at 08:04

    Thanks a lot Rauf

  2. Marcelo Alcantara

    Marcelo Alcantara

    Reply

    31 October 2018 at 00:46

    Great overview and article. I wonder how effective the Hybris CMS will integrate with the new frontend.

Leave a Reply