如何定制化SAP Spartacus的页面布局

新建一个Layout Module，源代码如下：

import { NgModule } from '@angular/core';
import { ConfigModule } from '@spartacus/core';
import { LayoutConfig } from '@spartacus/storefront';@NgModule({declarations: [],imports: [ConfigModule.withConfig({layoutSlots: {header: {lg: {slots: ['SiteContext','SiteLogin','MiniCart','SiteLogo','NavigationBar','SearchBox',],},}}} as LayoutConfig),]
})
export class LayoutConfigurationModule { }

上述代码，给header区域定义的slots顺序如下：

然后在app module里启用该layout module即可：

最后运行时的效果：

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

如何定制化SAP Spartacus的页面布局相关推荐

如何定制化SAP Spartacus的页面路由Route
新建一个Route module: import { NgModule } from '@angular/core'; import { ConfigModule, OccConfig, Routin ...
SAP Spartacus 的页面布局
官方文档 Spartacus 基于单页面应用程序设计模式,但仍有页面呈现在店面中. "页面"的概念是网络的关键并且无法避免:页面由 URL 标识.由搜索引擎索引.通过社交媒体共享. ...
如何定制化SAP Spartacus的购物车图标
SAP Spartacus默认的购物车图标如下图所示: 使用如下的css代码对其外观进行修改: /* You can add global styles to this file, and also ...
SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑
这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...
SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
通过 Feature Level 动态控制 SAP Spartacus 的页面显示
ng-container 标签只在 design time 可见,运行时会完全从渲染出的 HTML 源代码里被移除.通过 ng-container 加上 SAP Spartacus 自定义实现的 cx ...
SAP Spartacus login 页面看不到 UI 控件的问题解决
问题截图:Login 页面下面是空的我直接修改 Spartacus-core.js 不现实: 因为我没有能力去修改对应的 source code map 文件: 这个 getDetails 只是一个 ...
SAP Spartacus CMS 页面加载逻辑和性能的优化
https://github.com/SAP/spartacus/issues/3649 SAP Commerce Cloud CMS 页面加载的一些优化点: Payload of the CMS p ...
如何在SAP Spartacus category 页面里拿到当前的category信息
需求 https://stackoverflow.com/questions/59950572/how-to-access-the-current-categorydata-in-a-category ...

如何定制化SAP Spartacus的页面布局

如何定制化SAP Spartacus的页面布局相关推荐

最新文章

热门文章