关于 SAP Spartacus low level Component的customization

简介: 一些讨论链接: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里。

相关文章
关于 Spartacus ProdutList Component Service model$ 的填充逻辑
关于 Spartacus ProdutList Component Service model$ 的填充逻辑
|
JavaScript 前端开发
什么是 Spartacus 的 Video Component
什么是 Spartacus 的 Video Component
|
6月前
|
消息中间件 存储 监控
什么是 SAP CRM Middleware Component 里的 PRODUCT_R3_ADAPTER
什么是 SAP CRM Middleware Component 里的 PRODUCT_R3_ADAPTER
|
6月前
|
UED
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
|
6月前
|
机器学习/深度学习 供应链 监控
Spartacus 产品主数据的 stock level 字段
Spartacus 产品主数据的 stock level 字段
Spartacus 2211 无法在文件夹下使用 ng g component 创建新的 Component
Spartacus 2211 无法在文件夹下使用 ng g component 创建新的 Component
Spartacus 2211 无法在文件夹下使用 ng g component 创建新的 Component
|
6月前
|
存储 缓存 前端开发
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
|
6月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
6月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
6月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用