SAP Commerce Cloud Accelerator 的响应式 Theme 介绍
SAP Commerce Cloud Accelerator 为 B2B、B2C、金融和电信等行业店面解决方案提供完全响应的店面实施。
Commerce Cloud Accelerator 包括一个完整的响应式店面实施,默认情况下为 B2B、B2C、金融服务加速器以及电信和公用事业加速器启用。项目实施人员无需单独配置桌面和移动店面;
根据用于查看页面的设备,网站页面会自动以四种尺寸(移动设备、平板电脑、台式机和超宽桌面)之一呈现。
下一张图片分别显示了台式机、平板电脑和手机尺寸的相同产品列表页面。
响应式店面目前仅适用于 B2B、B2C、金融服务加速器以及电信和公用事业加速器。 桌面版本仍可用于其他加速器实施。
关于 Accelerator 的主题
Commerce Cloud 提供了两个包含店面颜色和字体定义的主题。 B2C 店面默认使用 alpha(蓝色)主题,B2B 店面使用 lambda(黑色)主题。
主题使用 Less 来构建响应式店面页面。 您可以使用这些主题作为自己的起点,甚至可以从头开始创建新主题。
主题文件地址:
C:\Code\H2011\hybris\bin\custom\yb2bacceleratorstorefront\web\webroot_ui\responsive\theme-lambda\images
Commerce Cloud Accelerator 的响应式实施并未定义 Accelerator 桌面实施中包含的所有 WCMS 组件。 但是,没有任何限制可以阻止将这些组件添加到响应式页面。 功能齐全的响应页面使用已定义的 WCMS 组件。开发人员可以通过参考 /yacceleratorstorefront/web/webroot/WEB-INF/views/responsive/cms/ 文件夹中的文件来查看为响应式定义了哪些组件。 如果需要未实现的组件,开发人员可以在此目录中提供 JSP 定义。
SAP Commerce Cloud Accelerator 主题使用店面 UI 元素的变量,以便可以快速更改颜色。 例如,<@text-color>
变量定义文本颜色,<@link-color>
变量定义链接文本颜色。 SAP Commerce Cloud Accelerator 带有两个主题:alpha(蓝色)和 lambda(黑色)。
两个主题中使用的颜色在 variables.less 文件中定义,该文件位于 /hybris/bin/modules/base-accelerator/yacceleratorstorefront/web/webroot/WEB-INF/_ui-src/responsive/lib/ybase-0.1.0/less
目录。 特定主题中使用的颜色在 theme-variables.less 文件中定义,该文件位于 /hybris/bin/modules/base-accelerator/yacceleratorstorefront/web/webroot/WEB-INF/_ui-src/responsive/themes/ <主题名称>/less
目录。
相关文章
- [SAA + SAP] 21. SQS
- 113. 授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节
- SAP UI5 初学者教程之五:视图控制器初探 试读版
- SAP S/4HANA Cloud 系统集成的一些场景介绍
- how is SAP UI5 configuration.js loaded in the runtime
- SAP Cloud for Customer页面根据后台数据响应的刷新原理介绍
- SAP Spartacus 的基于outlet 的页面扩展
- SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式
- SAP Commerce Cloud ( 电商云 ) 路由路径的自定义配置与开发
- 如何使用SAP Cloud for Customer OData服务创建Lead
- SAP Cloud for Customer里的服务请求(Service Request)路由(Route)实现原理
- 如何在SAP Cloud for Customer的Silverlight UI中找到后台错误的明细
- SAP Cloud for Customer的employee创建会自动生成Business partner
- SAP Cloud for Customer的Contact和Account的从属关系
- 微信开发系列之四 - 将SAP C4C的数据更改通知发送到微信公众号上
- SAP BTP 上 workflow 和 Business Service 的 project 管理
- 如何使用 Node.js 访问 SAP HANA Cloud 数据库里的数据
- 一个典型的使用 SAP Cloud Application Programming 模型开发的 Fiori 应用
- SAP Analytics Cloud和Cloud for Customer之间的Single Sign on配置
- SAP Marketing Cloud功能简述(五) : 销售计划管理
- 使用jMeter测试通过SAP ID Service认证的SAP Cloud API
- SAP CRM 里 Lead 通过工作流自动创建 Opportunity 的原理讲解