关于前端:SAP-Commerce-Cloud-Accelerator-的响应式-Theme-介绍

7次阅读

共计 1261 个字符,预计需要花费 4 分钟才能阅读完成。

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 目录。

正文完
 0