SAP Spartacus checkout Shipping address的页面实现

shipping address维护页面的id：/checkout/shipping-address:

后台cms的请求：

layout实现：

<ng-container *ngIf="cards$ | async as cards"><h3 class="cx-checkout-title d-none d-lg-block d-xl-block">{{ 'checkoutAddress.shippingAddress' | cxTranslate }}</h3><ng-container *ngIf="!forceLoader && !(isLoading$ | async); else loading"><ng-container*ngIf="isAccountPayment || (cards?.length && !addressFormOpened);else newAddressForm"><p class="cx-checkout-text">{{ 'checkoutAddress.selectYourShippingAddress' | cxTranslate }}</p><div class="cx-checkout-btns row" *ngIf="!isAccountPayment"><div class="col-sm-12 col-md-12 col-lg-6"><buttonclass="btn btn-block btn-action"(click)="showNewAddressForm()">{{ 'checkoutAddress.addNewAddress' | cxTranslate }}</button></div></div><div class="cx-checkout-body row"><divclass="cx-shipping-address-card col-md-12 col-lg-6"*ngFor="let card of cards; let i = index"><divclass="cx-shipping-address-card-inner"(click)="selectAddress(card.address)"><cx-card[border]="true"[fitToContainer]="true"[content]="card.card"(sendCard)="selectAddress(card.address)"></cx-card></div></div></div><div class="cx-checkout-btns row"><div class="col-md-12 col-lg-6"><button class="cx-btn btn btn-block btn-action" (click)="back()">{{ backBtnText | cxTranslate }}</button></div><div class="col-md-12 col-lg-6"><buttonclass="cx-btn btn btn-block btn-primary"[disabled]="!selectedAddress?.id"(click)="next()">{{ 'common.continue' | cxTranslate }}</button></div></div></ng-container><ng-template #newAddressForm><cx-address-form*ngIf="cards.length; else initialAddressForm"[showTitleCode]="true"(backToAddress)="hideNewAddressForm(false)"(submitAddress)="addAddress($event)"></cx-address-form><ng-template #initialAddressForm><cx-address-form[showTitleCode]="true"[setAsDefaultField]="!isGuestCheckout"[addressData]="selectedAddress"cancelBtnLabel="{{ backBtnText | cxTranslate }}"(backToAddress)="hideNewAddressForm(true)"(submitAddress)="addAddress($event)"></cx-address-form></ng-template></ng-template></ng-container><ng-template #loading><div class="cx-spinner"><cx-spinner></cx-spinner></div></ng-template>
</ng-container>

这个ng-container里的else loading中的loading是一个template的id：

这个cx-spinner是一个reuse的转盘动画控件：

显示的时候，UI被锁住，continue按钮不可见。

Next按钮的实现：在next函数里

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP Spartacus checkout Shipping address的页面实现相关推荐

SAP Spartacus checkout页面的入口逻辑
checkout url: http://localhost:4200/electronics-spa/en/USD/checkout/shipping-address 首先读取checkout页面的 ...
SAP Spartacus checkout 流程使用 url 粘贴直接跳转到 delivery mode不能打开页面的原因
http://localhost:4200/electronics-spa/en/USD/checkout/delivery-mode 没有任何错误消息,白屏: 能看到向 checkoutDelive ...
如何给 SAP Spartacus Storefront 创建新的页面
page template 不包含 layout 或者 design information. content slot 在页面上的具体位置,以及 layout 和 design 的选择,必须在前端指 ...
SAP Spartacus 的基于outlet 的页面扩展
outlet 是 SAP Spartacus 提供 partners 一种将 custom UI 插入 Spartacus 标准 DOM 的一种手段. outlets get added for ea ...
SAP Spartacus checkout.reducer.ts调用时间点
输出: Jerry reducer action type: @ngrx/store/update-reducers 10:38:18.845 checkout.reducer.ts:25 Jerry ...
使用SAP Spartacus的route给标准页面维护alias入口
源代码: const CUSTOM_ROUTES: Routes = [{ path: 'custom', component: CustomPageComponent, canActivate: [ ...
SAP Spartacus读取User Address的请求发送和接收源头
先看请求响应的接收源头: 文件:projects\core\src\user\store\effects\user-addresses.effect.ts 接收应用程序发送过来的UserActions ...
SAP Spartacus 最后渲染出的页面和后台 CMS 页面元数据的一一对应
最后渲染出来的Spartacus的根节点:LandingPage2Template: 就是CMS page的homepage: 根节点下的cx-storefront: 就是Angular应用app.c ...
SAP Spartacus Org Unit User List页面的设计原理
从cx-org-unit-user-list selector出发: Component为UnitUserListComponent: 打开其html实现,里面又消费了cx-org-sub-list这 ...

SAP Spartacus checkout Shipping address的页面实现

SAP Spartacus checkout Shipping address的页面实现相关推荐

最新文章

热门文章