SAP Spartacus layout设计原理
时间:2022-07-25
本文章向大家介绍SAP Spartacus layout设计原理,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
layout包含sections,sections包含slot.
文件路径:C:CodeSPAspartacusprojectsstorefrontlibsrcrecipesconfigb2c-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'],
},
},
};
- 利用旧版Android漏洞的E-Z-2-Use攻击代码已在Metasploit发布
- Android Studio你不知道的调试技巧
- Android 数据绑定框架DataBinding,堪称解决界面逻辑的黑科技
- 汽车黑客:没有Security就没有Safety
- Android 自定义View高级特效,神奇的贝塞尔曲线
- Android二维码扫描开发(一):实现思路与原理
- 说一道简单的BCTF题 – 分分钟而已
- 安全扫描工具Nmap引擎理解文档
- AppFuse项目笔记(1)
- 电子商务系统ShopNC多个漏洞(可暴力 getshell)
- 利用Google爬虫DDoS任意网站
- 极客都应该知道的Linux技巧
- 酷似感冒,变色龙病毒可在WiFi接入点间感染
- Linux下的常见错误配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android ListView实现无限循环滚动
- ignite:一个漂亮的多用户SS/SSR面板
- FreshRSS:开源免费的RSS阅读器
- 使用snap快速安装RocketChat你的聊天服务器
- CuteOne:一款基于Python3的OneDrive多网盘挂载程序,带会员/同步等功能
- Baidu Sitemap Generator在PHP7无法生成XML的解决方法
- MFC实现的Socket通信
- 128-在线翻译
- C语言CGI编程二 - 编写cmd后门
- android 获取视频第一帧作为缩略图的方法
- Flutter利用注解生成可自定义的路由的实现
- Android实现随意拖动View效果的实例代码
- Kotlin的枚举与异常示例详解
- Android自定义View的使用及其原理知识点总结
- Android中Window的管理深入讲解