如何在 SAP 电商云 Spartacus UI 首页的产品展示里显示视频

Spartacus UI 的 banner Component 显示的图片，最终是通过一个 selector 为 cx-media 的 Component 实现的。路径为

projects\storefrontlib\src\shared\components\media\media.component.html

虽然名称叫 media，但其代码里硬编码了只能显示 image.

为了支持 video，我们可以增强该 Component，或者直接在 Spartacus 里创建新的 VideoMediaComponent 即可，sample 代码如下：

最后的效果如下图所示：

更多Jerry的原创文章，尽在：“汪子熙”:

如何在 SAP 电商云 Spartacus UI 首页的产品展示里显示视频相关推荐

SAP 电商云 Spartacus UI Quick order 产品搜索结果页面的显示逻辑
这个结果列表,其实一直存在 form 里的,只不过不是一直 visible 而已. 什么时候显示这个 product list 呢? 当搜索结果命中的 product 个数大于1,或者 this.no ...
如何在 SAP 电商云 Spartacus UI 里新建一个页面
因为 SAP Spartacus UI 是基于 CMS 驱动的,因此流程是:我们首先在 SAP Commerce Cloud Backoffice 创建新的 content page, CMS Com ...
如何在 SAP 电商云 Spartacus UI 中创建新的页面
Spartacus 中的页面基于使用相关 API 从 SAP Commerce 后端获取的 CMS 页面.来自 SAP Commerce 端的数据定义了元数据,如 url.标题等,以及页面的结构.结构 ...
如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据
答案是采用 CmsComponentData 这个服务. 看个实际例子: CmsQuickOrderComponent 的定义,维护在 models 文件夹里: 运行时,只能访问到上图新 extend ...
SAP 电商云 Spartacus UI 如何在应用程序里捕捉到成功下单的事件
我们只需要在 app.module.ts 里注入 EventService,然后调用其 get 方法,传入 OrderPlacedEvent 即可,这个方法会返回一个 Observable: 在 Sp ...
SAP 电商云 Spartacus UI quick order 产品 live search 的实现
我们在如下图输入框里输入至少三个字符后,就会触发一个向 Commerce 后台的 product 搜索动作: form 事件的数据源就是 this.form.valueChanges. 从语义上讲,每 ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...

如何在 SAP 电商云 Spartacus UI 首页的产品展示里显示视频

如何在 SAP 电商云 Spartacus UI 首页的产品展示里显示视频相关推荐

最新文章

热门文章