SAP Spartacus后台CMS Component和Angular Component的映射关系

2020-11-15 12:32:27 39 收藏
分类专栏： Spartacus标准开发
最后发布:2020-11-15 12:32:27首次发布:2020-11-15 12:32:27
版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/109702533
版权

a skeleton using CMS Components from backend:
请添加图片描述
请添加图片描述
请添加图片描述

ConfigModule.withConfig({
      cmsComponents: {
        SimpleResponsiveBannerComponent: {
          component: MycomComponent
        },
        CartComponent: {
          component: MyCartComponent
        }
      } as CmsConfig
    }),
汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。2020年5月下旬，Jerry做了脑部肿瘤的开颅切除手术，对编程和人生又有了新的感悟。
已标记关键词 清除标记
Angular Component的加载触发时机
SAP资深技术专家Jerry Wang的分享
09-01 935
这是一个SAP Spartacus项目，我新建了一个CustomBannerComponent，用于替换标准的 CmsComponent： 运行时我看见这个Component的构造函数被触发了： 我自己实现的TypeScript Component文件自动生成了一个工厂函数： 这是我所在团队负责实现的，只不过是编译后生成的JavaScript： LaunchComponent函数触发： 要获取更多Jerry的原创文章，请关注公众号"汪子熙": ...
表情包
插入表情
还能输入1000个字符 “速评一下”
SAP Spartacus维护CMS Component到Angular Component的源代码位置
SAP资深技术专家Jerry Wang的分享
09-10 348
Spartacus界面上的banner，如下图所示，对应着HTML源代码里的cx-banner标签： cx-banner下面是cx-generic-link: 这个cx-generic-link包含一个a标签，指向一个超链接： a标签里包含cx-media, 再包含img. 这个映射关系在下图高亮处的代码被访问： /** * Return collection of component mapping configuration for specified list of *
SAP Spartacus里Commerce后台CMS Component和前台Angular的一一映射关系
SAP资深技术专家Jerry Wang的分享
10-23 41
在configuration.service.ts的config对象里查看： 路径如下： 高亮的都是CMS Component，这些key的value就是Spartacus里实现的Angular Component.看个例子： 这个BannerComponent的实现位置： 要获取更多Jerry的原创文章，请关注公众号"汪子熙": ...
SAP Spartacus Angular Component和CMS Component的映射关系
SAP资深技术专家Jerry Wang的分享
10-18 213
For each website page, you need to have an angular template. In other words, if you create a page in CMS Cockpit or SmartEdit, you will need to ask developers to add this page in the Angular code too. The system is not capable yet to pull new pages fro.
SAP Spartacus自定义Component的使用
SAP资深技术专家Jerry Wang的分享
09-01 677
(1) 使用命令行创建一个新的Angular Component： banner Component的实现： 通过构造函数参数注入cms Component data. 而Component的html实现，只是简单的显示一行字符串：This is a custom banner component (2) 在Custom Module实现里，使用第一个步骤创建的CustomBannerComponent替换原始的cmsComponent： 最后运行时的效果如下： 要获取更多Jerry的原创文章，请
SAP Spartacus注入自定义的CurrentProductService
SAP资深技术专家Jerry Wang的分享
09-17 798
import { Component, OnInit } from '@angular/core'; import { ActiveCartService, Product } from '@spartacus/core'; import { CurrentProductService } from '@spartacus/storefront'; import { Observable } from 'rxjs'; @Component({ selector: 'app-mycom', temp
SAP Spartacus cms-components.service.ts里的config.cmsComponents
SAP资深技术专家Jerry Wang的分享
10-07 302
// we use defer, to be sure the logic below used to compose final observable // will be executed at subscription time (with up to date state at the time, // when it will be needed) this.config.cmsComponents里维护了所有cms Component和SAP Spartacus An
SAP Spartacus的ComponentFactory和ComponentFactoryResolver
SAP资深技术专家Jerry Wang的分享
09-07 526
新建一个Component： import { Component, ComponentFactory, ComponentFactoryResolver, OnInit } from '@angular/core'; import { OutletPosition, OutletService } from '@spartacus/storefront'; import { MycomComponent } from './mycom/mycom.component'; @Component({ se
前端打包利器webpack里utils.cssLoaders的工作原理调试
SAP资深技术专家Jerry Wang的分享
12-26 819
要获取更多Jerry的原创文章，请关注公众号&quot;汪子熙&quot;:
SAP Spartacus如何创建自定义route页面
SAP资深技术专家Jerry Wang的分享
09-10 652
新建一个route module： 基于这个route module创建一个新的Component： 在新建的module里，使用RouterModule定义一个新的路由规则： import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CustomPage
SAP Spartacus最后渲染出的页面和后台CMS页面元数据的一一对应
SAP资深技术专家Jerry Wang的分享
08-31 177
最后渲染出来的Spartacus的根节点：LandingPage2Template： 就是CMS page的homepage： 根节点下的cx-storefront: 就是Angular应用app.component.html里定义的cx-storefront: cx-page-slot: 这些slot是从Commerce Cloud CMS返回的： 要获取更多Jerry的原创文章，请关注公众号"汪子熙": ...
关于SAP Spartacus ManageUnitsListComponent的一些试错
SAP资深技术专家Jerry Wang的分享
12-07 64
从CMS API返回的响应能看出，CMS Component的名称：ManageUnitsListComponent： 在units.config.ts文件里维护了该CMSComponent到Angular Component的映射：UnitListComponent： 如果把上图124行改成ManageUnitsListComponent2： 最后的结果，点击units之后不会有任何内容渲染出来： 如果把ManageUnitsListComponent映射成另一个Angular Component
SAP Spartacus产品明细页面用Observable显示产品名称
SAP资深技术专家Jerry Wang的分享
09-19 577
具体实现： import { Component, OnInit } from '@angular/core'; import { ActiveCartService, Product } from '@spartacus/core'; import { CurrentProductService } from '@spartacus/storefront'; import { Observable } from 'rxjs'; import { filter, map } from 'rxjs/oper
显示SAP Spartacus每个page slot使用的Angular Component uid
SAP资深技术专家Jerry Wang的分享
11-09 31
加一行语句：<div *ngIf=“component.uid”>Jerry: {{ component.uid }} 如下图：所有slot里安放的Component uid显示如下： 注：ElectronicsHomepageProductCarouselComponent是CMS Component的名称，不是Angular Component名称。 Angular Component名称在这里：ProductCarouselComponent 更多Jerry的原创文章，尽在：
SAP Commerce Accelerator和SAP Spartacus的技术对比
SAP资深技术专家Jerry Wang的分享
11-21 54
Accelerator是Spartacus发布之前，SAP Commerce Cloud使用的Storefront实现。Accelerator是一个开箱即用的web实现模板，是Commerce平台的一部分，以源代码的方式交付给客户。客户通过一个叫做module generator的工具，基于Accelerator 模板代码生成自己的Storefront实现。Accelerator这种同Commerce平台的紧耦合关系，以及基于源代码级别的二次开发方式，给Commerce项目实施的可升级性带来很大的挑战。例如
SAP Spartacus的ProductAdapter和OccProductAdapter
SAP资深技术专家Jerry Wang的分享
09-17 846
路径：C:\Code\SPA\spartacus\projects\core\src\occ\adapters\product\occ-product.adapter.ts 通过这种机制，将SAP Spartacus加载的product同Commerce Cloud后台解耦。比如，我们可以实现一个ERPProductAdapter，然后用Angular的依赖注入，替换掉从Commerce Cloud后台取product主数据的OccProductAdapter： ...
SAP Spartacus的OccCmsPageNormalizer
SAP资深技术专家Jerry Wang的分享
09-13 517
所有经过http请求从Commerce Cloud后台到Spartacus前台渲染的数据，都会经历下列这个generic步骤： convertSource(source, injectionToken) { return this.getConverters(injectionToken).reduce((target, converter) => { return converter.convert(source, target); },
SAP Spartacus Media Component
SAP资深技术专家Jerry Wang的分享
09-03 641
Angular框架抛出的ngOnChanges hook: MediaComponent的定义： 构造函数之后，紧接着就是ngOnChanges hook的实现： media container的值： 要获取更多Jerry的原创文章，请关注公众号"汪子熙":
SAP Spartacus里的不同种类的CMS Component type
SAP资深技术专家Jerry Wang的分享
09-07 451
三种类型的CMS Component type： (1) CMS Component type (2) JspIncludeComponent(也叫FlexComponent) (3) Container Component 从Chrome开发者工具里找到ProductDetailsPageTemplate这个模板： 这个template里定义的Tabs slot和里面包含的Component： Tab container里包含的子Component： TypeCode：CMSTabParagra
如何找到Angular应用的某个directive是属于哪一个Angular module
SAP资深技术专家Jerry Wang的分享
09-10 313
Suppose I would like to use SAP Spartacus directive cxComponentWrapper in my custom Component，and error message is: Can’t bind to ‘cxComponentWrapper’ since it isn’t a known property of ‘ng-container’.\n1. This is caused by missing import. However, how ca
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页