Use Angular dependency injection to customize the ProductAdapter of SAP Spartacus

Create a new MyProductAdapter, inherited from SAP Spartacus ProductAdapter, and return some fake data:

import { Injectable } from '@angular/core';
import { Product, ProductAdapter, ScopedProductData } from '@spartacus/core';
import { Observable, of } from 'rxjs';

const PRODUCT = {
  code: '300938',
  name: 'Jerry Product'
};

@Injectable()
export class MyProductAdapter extends ProductAdapter {
  load(productCode: string, scope?: string): Observable<Product> {
    console.log('My product adapter called!');
    return of(PRODUCT);
  }
  loadMany?(products: ScopedProductData[]): ScopedProductData[] {
    console.log('My product adapter loadMany called!');
    return [{ code: '300938', scope: '', data$: of(PRODUCT) } as ScopedProductData];
  }
}

In the app module, inject my custom adapter:

In this way, SAP Spartacus will call my own MyProductAdapter to return the product master data when running:

Call stack: ProductLoadingService

To get more original articles by Jerry, please follow the public account "Wang Zixi":