SAP Commerce Cloud Spartacus UI footer 区域的设计模型

本文研究如下图高亮所示的 SAP 电商云 Footer 区域的设计明细。

对应的 HTML markdup 入口：cx-footer-navigation:

cx-footer-navigation 只包含了一个单独的节点：cx-navigation-ui

第二行的 node$ 是具体的数据源。

footer slot 包含两个 Components：FooterNavigationComponent

对应的 Angular Component 实现名称：FooterNavigationComponent，其 selector 正是 cx-footer-navigation：

这个 Component，使用了另一个 Angular Component：cx-navigation-ui，即 NavigationUIComponent：

NavigationUIComponent 里又使用了 cx-generic-link.

这个 NavigationUIComponent 不仅被 footer 使用，在 my account 菜单也被使用。

数据源来自 node：

三个 nav node:

是 node.children 展开的结果：

注意第 12 行 let 的用法。

简写形式：

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">({{i}}) {{hero.name}}
</div>

完整形式：

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"><div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

在这里，与 ngFor 结构指令相关的所有内容都适用于 <ng-template>。元素上的所有其他绑定和属性都适用于 <ng-template> 中的 <div> 元素。宿主元素上的其他修饰符，除了 ngFor 字符串，在元素在 <ng-template> 内移动时保持不变。在此示例中，[class.odd]=“odd” 保留在\ <div> 上。

let 关键字声明了一个模板输入变量，您可以在模板中引用该变量。此示例中的输入变量是 hero、i 和奇数。解析器将 let hero、let i 和 letodd 转换为名为 let-hero、let-i 和 let-odd 的变量。 let-i 和 let-odd 变量变为 let i=index 和 let odd=odd。 Angular 将 i 和 odd 设置为上下文index 和 odd 属性的当前值。

nav 节点下有两层 cx-generic-link：

NgForOf 提供了下列默认的 exported values：

以递归方式渲染而成：

cx-footer-navigation 下面有三个 nav 节点。

谁调用(消费)的这个 selector？

没有更外层的 HTML wrapper 了：

说明是 CMS 驱动。

footer navigation 打印出的 data：

footer area 打印出的数据：

2，2，4 的 length 正好和 footer 的实际内容吻合：

footer navigation Component 包含 footer content slot：

navigation nodes：Footer Pages

三个子节点，充分体现了 CMS 驱动的设计原则：

Twitter Link 是一个 Component，类型为 CMSLinkComponent：

对应的 Angular Component 名称为：LinkComponent

cx-link 也是 generic link 的消费者之一：

Twitter link 是一个 Component？

ID: FooterNavigationComponent

navigation node：Footer Pages

SAP Commerce Cloud Spartacus UI footer 区域的设计模型相关推荐

SAP Commerce Cloud Spartacus UI 的购物车 Cart 功能
此功能是在 TUA Spartacus 库的 1.0 版中引入的. 购物车在 TUA Spartacus 与核心 Commerce Spartacus 中的工作方式不同,需要支持产品供应以及复杂的定价 ...
SAP Commerce Cloud Spartacus UI 的 ActionClass 数据结构设计
以 CmsSetPageSuccessIndex 为例: 运行时该 Action 类包含三大字段: (1) meta (2) payload (3) type meta meta 包含的 loader ...
SAP Commerce Cloud Spartacus UI 4.0.1 版本的安装
官方文档使用命令行创建一个基于 Angular 12 的应用: ng new mystore --style=scss 务必注意 SAP Spartacus 4 以上的安装环境要求: 然后命令行调 ...
如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态
在 Storefront AppModule 构造函数里注入 ActiveCartService: private cartService: ActiveCartService, 调用其 API: c ...
SAP Commerce Cloud Spartacus UI 的高阶 reducer 设计
在 components.reducer.ts 里,loaderReducer 函数,会根据输入的 entityType,返回一阶 reducer. 然后在代码第86行,调用该一阶 reducer 进 ...
SAP Commerce Cloud Spartacus UI 修改 primary color 的方法
问题解答 The easiest and recommended way to override basic primary colors, as of version 4.0, is by cha ...
SAP Commerce Cloud Spartacus UI 读取 Component 元数据的 Action 设计
先看数据:该 page 包含了 35 个 Components: 可以看到这些 Components 属于 homepage,但是 payload 字段里,只包含了 35 个 Components 其 ...
SAP Commerce Cloud 新一代 UI Spartacus 和 Customer Data cloud 的集成
SAP Customer Data Cloud Integration Spartacus 3.2 版可用. SAP Customer Data Cloud 允许您启用自定义注册和登录,还可以管理用户 ...
SAP Commerce Cloud (电商云) UI 的懒加载功能
最近工作中处理了 SAP Commerce Cloud (电商云) UI 的一个懒加载 (Lazy Load) 功能的问题,这里把自己学到的东西做个记录. UI 懒加载,有时又称惰性加载,延迟加载,是 ...

SAP Commerce Cloud Spartacus UI footer 区域的设计模型

SAP Commerce Cloud Spartacus UI footer 区域的设计模型相关推荐

最新文章

热门文章