头图

Design principles of SAP e-commerce cloud Spartacus UI page layout

JerryWang_汪子熙
中文

Each UI of Spartacus is divided into different sections, and each section is composed of several slots. Each slot can contain one or more CMS Component.

I once wrote a article which introduced it in detail.

Take homepage as an example, its implemented HTML location: projects\storefrontlib\src\layout\main\storefront.component.html

Look at this header area:

The slots allocated for this header area are defined in the file layout-config.ts:

After the CMS Components contained in these slots are rendered at runtime, the displayed content is shown in the highlighted area in the following figure:

The customer can decide which of these slots to display and which are not to be displayed through configuration, and to exchange the relative positions of the slots.

For example, I let the header area only display a Sitelogo:

The final effect is as follows:

I used to print out the slot id and component id of each area on the UI for debugging purposes, as shown in the following figure:

More original articles by Jerry, all in: "Wang Zixi":

阅读 648

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
828 声望
1.6k 粉丝
0 条评论
828 声望
1.6k 粉丝
文章目录
宣传栏