专栏首页Jerry的SAP技术分享SAP Spartacus的Component映射
原创

SAP Spartacus的Component映射

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>
      <table
        class="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>
              <input
                type="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 { }

运行时效果:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于jasmine里debugElement.query和fixture.detectChanges的依赖关系

    由此可见,在fixture.detectChanges()之前,我们是无法使用fixture.debugElement.query获取UI元素实例的。

    Jerry Wang
  • Angular rxjs fromEvent使用的一个例子

    scan 操作符的工作原理与数组的 reduce 类似。它需要一个暴露给回调函数当参数的初始值。每次回调函数运行后的返回值会作为下次回调函数运行时的参数。

    Jerry Wang
  • HTML table标签和其子标签如td,td等不同区域focus然后回车的行为差异

    试了一下,发现td获得不到焦点。网上查了一下,发现csdn这个帖子:说td获取不到焦点。

    Jerry Wang
  • AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>ng-repeat di...

    庞小明
  • [Python]写给Dr.Wu的简单爬虫例子

    这次要爬的数据来自网站:http://www.qlaee.com/zhuanlist.jsp?flag=3&p=1&columnumber=302&codemy...

    wOw
  • 浅谈PHP之ThinkPHP框架使用详解

    Thinkphp框架其精髓就在于实现了MVC思想,其中M为模板、V为视图、C为控制器,模板一般是公共使用类,在涉及数据库时,一般会跟数据表同名,视图会和控制器类...

    砸漏
  • MVC基本开发介绍 (1)列表展示

    现在如果用.net 的解决方案来做网站或者是网站的后台管理系统,MVC 应该是比较流行的。

    _淡定_
  • SpringBoot(十六):Thymeleaf使用

    这里举例使用thyme leaf的:赋值,拼接,if判断,unless判断,for 循环,URL,三目运算,switch 选择(后面继续添加) 页面代码

    低调小熊猫
  • table合并单元格colspan和rowspan

    最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,...

    令仔很忙
  • (8)打鸡儿教你Vue.js

    达达前端

扫码关注云+社区

领取腾讯云代金券