SAP Spartacus layout设计原理

layout包含sections，sections包含slot.

文件路径：C:\Code\SPA\spartacus\projects\storefrontlib\src\recipes\config\b2c-layout-config.ts

Layout，section和slot的定义都在b2c-layout-config.ts里：

import { LayoutConfig } from '../../layout/config/layout-config';export const b2cLayoutConfig: LayoutConfig = {// deferredLoading: {//   strategy: DeferLoadingStrategy.DEFER,//   intersectionMargin: '50px',// },layoutSlots: {header: {lg: {slots: ['SiteContext','SiteLinks','SiteLogo','SearchBox','SiteLogin','MiniCart','NavigationBar',],},slots: ['PreHeader', 'SiteLogo', 'SearchBox', 'MiniCart'],},navigation: {lg: { slots: [] },slots: ['SiteLogin', 'NavigationBar', 'SiteContext', 'SiteLinks'],},footer: {slots: ['Footer'],},LandingPage2Template: {pageFold: 'Section2B',slots: ['Section1','Section2A','Section2B','Section2C','Section3','Section4','Section5',],},ContentPage1Template: {slots: ['Section2A', 'Section2B'],},CategoryPageTemplate: {pageFold: 'Section2',slots: ['Section1', 'Section2', 'Section3'],},ProductListPageTemplate: {slots: ['ProductLeftRefinements', 'ProductListSlot'],},ProductGridPageTemplate: {slots: ['ProductLeftRefinements', 'ProductGridSlot'],},SearchResultsListPageTemplate: {slots: ['Section2','ProductLeftRefinements','SearchResultsListSlot','Section4',],},SearchResultsGridPageTemplate: {slots: ['Section2','ProductLeftRefinements','SearchResultsGridSlot','Section4',],},ProductDetailsPageTemplate: {lg: {pageFold: 'UpSelling',},pageFold: 'Summary',slots: ['Summary','UpSelling','CrossSelling','Tabs','PlaceholderContentSlot',],},CartPageTemplate: {slots: ['TopContent', 'CenterRightContentSlot', 'EmptyCartMiddleContent'],},AccountPageTemplate: {slots: ['BodyContent', 'SideContent'],},LoginPageTemplate: {slots: ['LeftContentSlot', 'RightContentSlot'],},ErrorPageTemplate: {slots: ['TopContent', 'MiddleContent', 'BottomContent'],},OrderConfirmationPageTemplate: {slots: ['BodyContent', 'SideContent'],},MultiStepCheckoutSummaryPageTemplate: {slots: ['TopContent', 'BodyContent', 'SideContent', 'BottomContent'],},CheckoutLoginPageTemplate: {slots: ['RightContentSlot'],},},
};

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP Spartacus layout设计原理相关推荐

SAP Spartacus 重用组件cx-table的设计原理
cx-table在SAP Spartacus尤其是B2B feature里有着广泛的用途: 它是一个shared Component,布局实现文件:table-component.html: 其中表格 ...
SAP Spartacus B2B页面Budget页面的设计原理
打开SAP Spartacus My Company菜单,第一个banner即为Budgets页面的入口: http://localhost:4200/powertools-spa/en/USD/or ...
SAP Spartacus自定义指令cxOutlet的工作原理
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
SAP Spartacus Page Layout学习笔记
文档地址: https://sap.github.io/spartacus-docs/page-layout/#outlet-position Spartacus is based on a sing ...
SAP Spartacus 里的 icon 设计
同 SAP Fiori 一样,SAP Spartacus 里也有大量的自定义 icon 设计,比如下图的 iconTypes.RESET: 需要调用 iconLoader 获取 RESET icon ...
SAP Spartacus popover Component css 的重用设计
按照需求,我们需要在SAP Spartacus B2B 页面的 List header 和Card header两处,同时显示info icon, 因此,有必要设计一个统一的icon style,然后 ...
SAP Spartacus B2B User 页面的数据读取逻辑设计
点击SAP Spartacus B2B的Users页面后: 触发selector: 看到user 列表: B2B user模块,从设计上说,位于Spartacus工程项目的feature-libs文件 ...
SAP Spartacus User form通过label标签的实现原理
第一次见到这个有点诧异,居然是通过label实现的: 上述页面可以从SAP Spartacus User list,点击某个user进入明细页面开始编辑: 看到这个ng-reflect-name=ro ...
SAP Spartacus 的页面设计思路
CMS提供了page structure,但不提供clear layout definition. 所谓CMS page structure,即CMS只提供了一个有序清单,包含了slots和Compo ...

SAP Spartacus layout设计原理

SAP Spartacus layout设计原理相关推荐

最新文章

热门文章