@bloomreach/brx-spartacus-library

Bloomreach Spartacus Library

The Bloomreach Spartacus Library enables SAP Commerce Cloud customers Bloomreach Content (replacing SmartEdit) and Discovery capabilities on top of SAP Commerce Cloud stack. The Bloomreach Spartacus Library interacts with the following:

• Page Model API
• Bloomreach Angular SDK
• Spartacus Storefront
• Spartacus Core Library
• Spartacus Assets
• Spartacus Styles

Components

• Category highlight
• Spartacus banner
• Spartacus product facet navigation
• Spartacus product carousel
• Spartacus product details page
• Spartacus product grid
• Spartacus searchbox
• Spartacus search results

Getting Started

• Build a Spartacus Storefront App by following the instructions here
• Once done with the previous step proceed with the following:

Installation

To get the SDK into your project with NPM:

npm install @bloomreach/brx-spartacus-lib

And with Yarn:

yarn add @bloomreach/brx-spartacus-lib

Usage

The following code snippets render a simple page with a Spartacus banner component:

src/app/app.module.ts

In the NgModule metadata, you'll need to import BrxSpartacusLibModule and provide all the necessary variables in environment variables: see here for the full environment variables configuration documentation.

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { BrxSpartacusLibModule } from '@bloomreach/brx-spartacus-lib';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrxModule } from './brx/brx.module';
import { SpartacusModule } from './spartacus/spartacus.module';
import { NewsPageComponent } from './pages/news-page/news-page.component';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    NewsPageComponent
  ],
  imports: [
    CommonModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    HttpClientModule,
    AppRoutingModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
    SpartacusModule,
    BrowserTransferStateModule,
    BrxModule,
    BrxSpartacusLibModule.forRoot({ ...environment }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.ts

In the app-root component, you'll need to pass the configuration and Content components mapping into the br-page component inputs.

import {
  Component,
  Inject,
  InjectionToken,
  OnInit,
  Optional,
} from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { BrPageComponent } from '@bloomreach/ng-sdk';
import { Page } from '@bloomreach/spa-sdk';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { OutletPosition } from '@spartacus/storefront';
import { Request } from 'express';
import { Observable } from 'rxjs';
import { filter, tap } from 'rxjs/operators';
import { SpartacusBannerComponent } from '@bloomreach/brx-spartacus-lib';
import { HttpErrorResponse } from '@angular/common/http';
import { PageContext, RoutingService } from '@spartacus/core';

export const ENDPOINT = new InjectionToken<string>('brXM API endpoint');

@Component({
  selector: "app-root",
  template: `
    <ng-container *ngIf="pageContext$ | async as pageContext">
        <br-page
            [configuration]="configuration"
            [mapping]="mapping"
            (httpError)="onBrxHttpError($event)"
            (state)="setVisitor($event)"
        >
            <ng-template let-page="page">
                <app-header></app-header>
                    <div *ngIf="!pageContext.id.includes('search')">
                    <ng-container brComponent="main"></ng-container>
                    </div>
                    <div *ngIf="pageContext.id.includes('search')">
                    <ng-container brComponent="top"></ng-container>
                    <div class="ProductListPageTemplate">
                        <div class="ProductLeftRefinements">
                        <ng-container brComponent="left"></ng-container>
                        </div>
                        <div class="ProductListSlot">
                        <ng-container brComponent="right"></ng-container>
                        </div>
                    </div>
                    <ng-container brComponent="bottom"></ng-container>
                    </div>
                <app-footer></app-footer>
            </ng-template>
        </br-page>
    </ng-container>
  `,
})
export class AppComponent {
configuration: BrPageComponent['configuration'];

  outletPosition = OutletPosition;

  mapping = {
    SpartacusBanner: SpartacusBannerComponent
  };

  page?: Page;

  brxHttpError?: HttpErrorResponse;

  pageContext$?: Observable<PageContext>;

  private navigationEnd: Observable<NavigationEnd>;

  constructor(
    router: Router,
    private routingService: RoutingService,
    @Inject(ENDPOINT) endpoint?: string,
    @Inject(REQUEST) @Optional() request?: Request
  ) {
    this.configuration = {
      debug: true,
      endpoint,
      request,
      endpointQueryParameter: 'endpoint',
      path: router.url,
    } as BrxComponent['configuration'];

    this.navigationEnd = router.events.pipe(
      filter((event) => event instanceof NavigationEnd)
    ) as Observable<NavigationEnd>;
  }

  ngOnInit(): void {
    this.navigationEnd.subscribe((event) => {
      this.configuration = { ...this.configuration, path: event.url };
      this.brxHttpError = undefined;
      this.pageContext$ = this.routingService.getPageContext().pipe(
        tap((pageContext) => console.log('[BrxComponent.PageContext]: ', pageContext))
      );
    });
  }

  setVisitor(page?: Page): void {
    this.configuration.visitor = page?.getVisitor();
  }

  onBrxHttpError(error: HttpErrorResponse): void {
    this.brxHttpError = error;
  }
}

Mapping

The br-page component provides a way to link Angular components with the custom built Content Spartacus ones. You'll need to pass the mapping property which maps the component type with its representation.

import { SpartacusBannerComponent } from '@bloomreach/brx-spartacus-lib';

export class AppComponent {
  mapping = {
    SpartacusBanner: SpartacusBannerComponent
  };
}

Configuration

The Enviroment Variables to be confirured are as follows :

Property	Required	Description
endpoint	yes	The Content endpoint.
smEndPoint	yes	The Discovery endpoint.
smSuggestionEndPoint	yes	The Discovery Suggestion endpoint.
accountId	yes	The Discovery account ID.
domainKey	yes	The Discovery domain key.
authKey	yes	The Discovery auth key.
smPathwaysRecommendationsEndPoint	yes	The Discovery Pathways and Recommendations endpoint.

Example

export const environment = {
  endpoint: 'https://...../pages',
  smEndPoint: 'https://....',
  smSuggestionEndPoint: 'https://suggest.xyzz.com/api/',
  accountId : "1234",
  domainKey : "abc_123",
  authKey : "etdr235dfh",
};

License

Published under Apache 2.0 license.