SAP Spartacus Page Layout学习笔记

文档地址：

https://sap.github.io/spartacus-docs/page-layout/#outlet-position

Spartacus is based on a single-page application design pattern, but there are still pages that are rendered in the storefront. The concept of a “page” is key to the web and cannot be avoided: pages are identified by URLs, indexed by search engines, shared through social media, stored in browser history, and so on. Pages are fundamental to end users, and to the content creation process as well.

页面被urls标识

Pages in CMS are constructed with slots and components.

CMS page通过slots和Components组织。

A page contains slots, and slots contain components. To organize common slots and components, Spartacus supports page templates. A page template contains layout and components that can be used globally, such as header and footer sections.

page包含slots，slots包含Components. 为了重用slots和Components，引入了page temolate的概念。

Page template包含layout和Component，这些Component可以被全局使用，不如用在header和footer sections里。

The CMS provides the page structure, but it does not provide a clear layout definition.

CMS只管提供page structure，不管layout定义。

The page structure only provides an ordered list of components per slot, but the slots themselves do not have meta info on how they should be rendered in the layout.

page structure只提供了基于每个slot，包含的Components是什么。但是slots自身并不知道应该如何渲染。

例子：home page slot里包含了两个Component：

但是home page slot不知道应该按照什么样的布局来显示这两个Component.

To provide layout information to the view logic, Spartacus uses a LayoutConfig configuration object to render the page slots in a given order. Additionally, you can use CSS rules to provide a specific layout.

因此，SAP Spartacus通过LayoutConfig来定义页面布局，指定page slot的渲染顺序。

看代码：

const defaultLayoutConfig: LayoutConfig = {
  header: {
    slots: [
      'TopHeaderSlot',
      'NavigationSlot'
    ]
  },
  footer: {
    slots: ['FooterSlot']
  },
  LandingPageTemplate: {
    slots: [
      'Section1',
      'Section2A',
      'Section2B'
    ]
  }
};

When page templates, slots or components are rendered dynamically rendered in Spartacus, outlets get added for each slot. Outlets can be use to replace part of a page template in Spartacus. The outlets for the slots are easy to find as their label corresponds to name of the element being wrapped.

outlet可以被用来替换Spartacus里的page template的部分内容。

下列是一个具体的使用outlet结合自定义Custom Add to Cart来替换标准ProductAddToCartComponent的例子。

<ng-template cxOutletRef="ProductAddToCartComponent">
  <div>Custom Title</div>
  <custom-add-to-cart></custom-add-to-cart>
</ng-template>

While the slots of the page layout or section layout are rendered, the page template name is added as a CSS class.

template名称作为CSS class出现在最后渲染的页面里。

Because the page layout is driven by page template codes and position names, the layout is tightly coupled to the installation data of the back end. If you decide to add or replace page templates and slot positions, you need to adjust the relevant CSS rules as well.

/**
 * The layout configuration is used to define the overall layout of the storefront.
 * The configuration includes the following aspects:
 * - breakpoint layout (AKA screen layout)
 * - Page sections slot configuration (i.e. header vs footer)
 * - page template slot configuration (i.e. landing page template vs PDP page template)
 * - deferred loading configuration
 *
 * The page slot configurations is directly related to the data in the backend. If you use the
 * Spartacus sample-data, you will have an aligned setup. However, if you introduce custom page
 * templates and/or slots, you most likely need to further adjust or replace this configuration.
 */

例子：调整Spartacus这个文件：

projects\storefrontlib\src\recipes\config\layout-config.ts

运行时就会看到两个logo和两个cart了：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oxP4pf7z-1604747065607)(https://upload-images.jianshu.io/upload_images/2085791-7224bf34235e6313.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

The Spartacus storefront is implemented using responsive design, rather than adaptive design. For storefront software development, as well as for content production, responsive design is widely accepted as being faster to implement and more cost effective.

Spartacus的实现是responsive设计，而非adaptive design.

const defaultLayoutConfig: LayoutConfig = {
  header: {
    slots: [
      'FirstSlot',
      'SecondSlot',
      'LastSlot'
      ],
    xs: [
      'LastSlot',
      'FirstSlot'
      ]
  }
};

这里的xs代表extra-small的屏幕。

A responsive-only approach cannot address all use cases for accessibility, such as the ability to re-order components. You may also need to re-order components to optimize the user experience for different devices that access your storefront. The header in Spartacus is a good example: for large screens, all elements are visible, but on small devices, some of the components are hidden behind a hamburger menu, and some components are rearranged.