SAP 电商云 Spartacus UI 产品搜索结果的设计明细

简介: SAP 电商云 Spartacus UI 产品搜索结果的设计明细

我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面:

http://localhost:4000/electronics-spa/en/USD/search/sony

结果可以分为两大部分:

(1) 左边的 ProductLeftRefinements

以及右边的:SearchResultsListSlot


本文介绍左边的 ProductLeftRefinements 区域内的设计。

入口 Component 的 selector 是:cx-product-facet-navigation

这个 Component 分为三部分,我们重点学习第三部分:cx-facet-list.

所在的 project 为 storefrontlib.

在 SSR 返回的结果里,cx-facet-list 的节点明明有值:

但为什么在客户端执行的时候,这个节点又重新渲染一次了?

注意,此时的 cx-facet-list 是空的:

这个重新渲染的现象,可能和这篇文章描述的场景有关:在服务器端渲染完毕的 Angular Component,在客户端还会重新渲染一次吗?

相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
29 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
2月前
|
存储 数据管理 数据处理
SAP CRM 里 Attachment 搜索的实现逻辑介绍
SAP CRM 里 Attachment 搜索的实现逻辑介绍
21 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
31 0
|
2月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
27天前
|
数据库
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
17 5
|
27天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
27天前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
10 0
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0