一些讨论链接：https://stackoverflow.com/questions/62157099/how-to-customize-lower-level-components-in-spartacus/

需求

I’m trying to customize the ProductListItemComponent and the ProductGridItemComponent in order to add some more functionality like a Stock counter.

解决方案

You are right! You can’t customize ProductListItemComponent or ProductGridItemComponent via remapping it like a CMS Component, you should customize it over higher lever CMS Component - ProductListComponent.

从产品层面解决：Enable outlet for “product tile”: ProductListItemComponent and ProductGridItemComponent

需求issue：
https://github.com/SAP/spartacus/issues/4231

Introduce dynamic loading of static components similarly to CMS component loading

架构

Currently we have two approaches to customise the default experience that Spartacus brings:

Spartacus 提供了两种 UI 扩展方式

CMS components are rendered based on the CMS component type and the JS component which is mapped to it.
Outlets provide a mechanism to replace or amend a component.

CMS components are only used for bigger pieces of the screen that must be controlled by business (either in SmartEdit or using personalisation).

其中，CMS Component提供了粗粒度的，从业务层面驱动和控制的屏幕定制化。

Outlets could be applied in a more fine-grained way, but they pollute the code. This is why they’ve been only used so-far in a generic way, i.e. when a page, slot or component is rendered dynamically.

而outlet提供了更加细粒度的定制化方式，付出的代价就是，outlet是侵入式的，因此污染了部分代码。因此，只出现在当 SAP Spartacus 的 page, slot 或者 Component 被动态渲染时。

愿景

Instead of adding a large number of outlets to the code base, we like to introduce a concept that can be applied to any static component; very similar to how we map a CMS component to a JS component, we could map any JS component.

技术调整

理想很丰满，现实很骨感。

Dynamic components seems not to be the first class citizens in the Angular’s world.

Dynamic Component 不是 Angular 里的一等公民。

You can create a component dynamically thanks to Angular API, but then you have to maintain manually all the following operations for the life of the component:

update inputs
calculate input’s changes
trigger the lifecycle hook ngOnChanges (related to above)
trigger change detection markForCheck
subscribe to outputs and trigger callbacks
bind DOM attributes
bind DOM events

这个前沿性的研究，记录在这个链接Introduce dynamic loading of static components similarly to CMS component loading里。

关于 SAP Spartacus low level Component的customization相关推荐

SAP Spartacus维护CMS Component到Angular Component的源代码位置
Spartacus界面上的banner,如下图所示,对应着HTML源代码里的cx-banner标签: cx-banner下面是cx-generic-link: 这个cx-generic-link包含一 ...
如何找到 SAP Spartacus 里某个 Component TypeScript 编译后生成的 JavaScript 位置
需求如何找到触发该网络请求的准确代码位置? 从 initiator 里查看调用栈上下文,一点头绪也没有. 找到触发该网络请求的控件的 selector:cx-register 在 Storefron ...
SAP Spartacus Unit List Component的设计明细 - UnitListComponent
Unit list Component 源代码: 这个service是依赖注入的: this.service指向unit list specific service class: 在这个specifi ...
SAP Spartacus后台CMS Component和Angular Component的映射关系
a skeleton using CMS Components from backend: ConfigModule.withConfig({cmsComponents: {SimpleRespons ...
SAP Spartacus单元测试里Component实例的创建细节
启动命令:ng test storefrontlib 单元测试里,使用TestBed创建Component实例的源代码: 首先在Chrome开发者工具里找到单元测试用例的实现源代码: 在_karma_ ...
SAP Spartacus 的 Banner Component 请求
我在我的自定义Component里将observable数据用console.log打印出来: 这些banner的typecode都为SimpleResponsiveBannerComponent: ...
SAP Spartacus Delivery Mode Component单元测试的Mock设计图
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWra ...
SAP Spartacus 懒加载 Customized CMS Component 的问题
Lazy-loaded overriden or custom CMS Components SAP Spartacus 有两种 lazy load 方式: CMS-driven lazy loadi ...

关于 SAP Spartacus low level Component的customization

需求

解决方案

架构

愿景

技术调整

关于 SAP Spartacus low level Component的customization相关推荐

最新文章

热门文章