Spartacus默認的購物車界面：

https://github.com/SAP/spartacus-bootcamp/blob/master/sparta0/src/app/components/cart.component.ts

新建一個CartComponent，對Spartacus標準的CartDetailsComponent進行擴展：

import { Component } from '@angular/core'; import { CartDetailsComponent } from '@spartacus/storefront';@Component({selector: 'app-cart',templateUrl: './cart.component.html',styleUrls: ['./cart.component.scss'] }) export class CartComponent extends CartDetailsComponent {onChange(entryNumber, event) {this.activeCartService.updateEntry(entryNumber, event.target.value);}}

界面元素如下：

<ng-container *ngIf="cart$ | async as cart"><ng-container *ngIf="entries$ | async as entries"><div *ngIf="cart.totalItems > 0" class="cart-details-wrapper"><cx-spinner *ngIf="!(cartLoaded$ | async)"></cx-spinner><tableclass="table table-striped"[class.loading]="!(cartLoaded$ | async)"><thead><tr><th scope="col">#</th><th scope="col">Image</th><th scope="col">Code</th><th scope="col">Name</th><th scope="col">Manufacturer</th><th scope="col">Price</th><th scope="col">Quantity</th><th scope="col">Total</th></tr></thead><tbody><tr *ngFor="let entry of entries; index as i"><td>{{ i + 1 }}</td><td><a[routerLink]="{ cxRoute: 'product', params: entry.product } | cxUrl"><cx-media[container]="entry.product.images?.PRIMARY"format="thumbnail"></cx-media></a></td><td>{{ entry.product.code }}</td><td>{{ entry.product.name }}</td><td>{{ entry.product.manufacturer }}</td><td>{{ entry.basePrice?.formattedValue }}</td><td><inputtype="number"[value]="entry.quantity"(change)="onChange(entry.entryNumber, $event)"/></td><td>{{ entry.totalPrice.formattedValue }}</td></tr><tr><td colspan="7"></td><td class="table-active"><strong>{{ cart.totalPriceWithTax.formattedValue }}</strong></td></tr></tbody></table></div></ng-container> </ng-container>

在NgModule里，使用ConfigModule將CartComponent對應的Angular Component替換成我們自定義的CartComponent：

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CartComponent } from './cart.component'; import { ConfigModule, CmsConfig, UrlModule, FeaturesConfigModule, I18nModule } from '@spartacus/core'; import { CartSharedModule, CartCouponModule, PromotionsModule, MediaModule, SpinnerModule } from '@spartacus/storefront'; import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms';@NgModule({declarations: [CartComponent],imports: [CartSharedModule,CommonModule,CartCouponModule,RouterModule,MediaModule,UrlModule,PromotionsModule,FeaturesConfigModule,I18nModule,FormsModule,SpinnerModule,ConfigModule.withConfig({cmsComponents: {CartComponent: {component: CartComponent,},}} as CmsConfig)],entryComponents: [CartComponent] }) export class ComponentsModule { }

運行時效果：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的通过 SAP Spartacus 的 Component 映射机制，更改默认购物车 Cart 页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。