如何给 SAP Spartacus Storefront 创建新的页面

Creating New Pages and Components

Spartacus 是一个单页面的应用程序，但它仍然使用页面的概念来区分应用程序内的不同视图。 Spartacus 页面来自 CMS，由插槽和组件构成。 页面包含插槽，插槽包含组件。 为了组织公共插槽和组件，Spartacus 支持页面模板。 页面模板包含布局以及可全局使用的组件，例如页眉和页脚部分。

Spartacus 从 CMS 接收每个页面，其中包含一个插槽和组件列表，该列表用于呈现相应的组件。

Creating a New Page

Spartacus 中的页面基于使用负责 API 从 SAP Commerce 后端获取的 CMS 页面。 来自 SAP Commerce 端的数据定义了元数据，如 url、标题等，以及页面的结构。 结构意味着可用的部分类型以及分配给这些部分的 CMS 组件。 Spartacus 接收此信息并为该结构提供真正的组件，包括逻辑、ui、响应式设计、样式等。由于这种定义的方法，它需要 2 个步骤来创建新的 Spartacus 页面。 首先，需要在 SAP Commerce 端创建 CMS 页面。 其次，需要创建 Spartacus 端的组件并将其分配给 CMS 组件。

要在 Spartacus 中创建新页面，首先需要在 CMS 中创建相关页面。

SmartEdit 提供了一个直观的向导，您可以使用它为内容目录创建类别、内容、电子邮件和产品页面。您还可以向页面添加限制，以指定在何种条件下向客户显示页面。

SmartEdit 提供了一个直观的向导来帮助您为内容目录创建页面。您可以创建类别、内容、电子邮件和产品页面。创建页面时，您可以选择创建主页面或变体页面。

主页(Primary page)是始终向所有用户显示的默认版本。您创建的所有变体页面都基于主页面。您不能为主页分配限制。当不存在变体页面或不存在与当前显示条件匹配的变体页面时，即显示条件不满足应用于现有的时间、用户组、类别等限制规则时，显示主页面变体页面。

变体页面(viration page)基于主页面，但添加了限制。限制指定在何种条件下显示变体页面，例如当属于特定组的用户查看页面时，或者当用户在指定日期期间选择页面并且存在要在指定日期显示的变体页面时.您可以为变体页面添加类别、时间、用户组和其他限制。您可以添加到变体页面的限制类型取决于页面的类型。

创建页面时，您应该注意以下事项：

• 如果主页尚不存在，则您无法创建变体页面。 变体页面必须基于主页面。
• 您只能为类别和产品页面类型创建一个主页。
• 您可以为内容页面类型(content page type)创建多个主页面。
• 您只需要为内容页面指定一个页面标签(page label)，并且它在内容目录版本中必须是唯一的。 您在主页上指定一个页面标签，它会被所有关联的变体页面继承。
• 您可以基于单个主页面创建多个变体页面。
• 您必须向变体页面添加至少一个限制。

SAP 建议您将页面添加到目录的暂存版本，以便您以后可以将更改与目录的在线版本同步。

具体的步骤可以参考这个页面

作为第一步，让我们从 SAP Commerce 端定义开始。创建一个新的 CMS 页面需要为不同类型的类型创建多个实例。我们先谈谈这些类型。

• 模板 Template：模板定义了页面的各个部分。
• ContentPage：它是页面本身。它包含诸如 url、应使用哪个模板、标题等值。 url 存储在这种类型的属性“标签”上。
• ContentSlot：这是可以分配给 section 的类型，负责内容本身。它自己没有内容，但可以将组件分配给插槽。该组件包含基于 Spartacus 方分配的内容。
• CMS 组件：标准商务系统中有多种 CMS 组件可用，也可以创建新类型。如果不需要特殊属性，则可以使用通用 CMSFlexComponent 类型来创建组件实例。
• ContentSlotForPage：此类型仅处理将 ContentSlot 实例分配给 ContentPage 实例的部分。部分由这种类型的“位置”属性处理。

也可以通过 Impex 完成创建。

创建这些实例的 Impex 始终具有相同的结构，并且可以重复用于创建新的 CMS 页面。 只需根据您的需要修改内容。 它也可以在后台手动完成，但我建议使用 impex 并将其导入 HAC。 只需登录，转到控制台选项卡和 ImpEx 导入并粘贴修改后的 impex 内容。 Impex 看起来像这样：

$contentCatalog=electronics-spaContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Staged])[default=$contentCatalog:Staged]
$siteResource=jar:de.hybris.platform.spartacussampledataaddon.constants.SpartacussampledataaddonConstants&/spartacussampledataaddon/import/contentCatalogs/electronicsContentCatalog
 
###### Components and Pages ######
 
INSERT_UPDATE CMSFlexComponent;$contentCV[unique=true];uid[unique=true];name;flexType
;;ZBestsellerComponent;ZBestsellerComponent;ZBestsellerComponent
 
# Create the missing pages
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
;;ZBestseller;Bestseller Page;ContentPage1Template;/ourbestseller
 
INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;Section2A-ZBestseller;Section 2A Slot for Bestseller Page;true;ZBestsellerComponent
 
INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;Section2A-ZBestseller;Section2A;ZBestseller;Section2A-ZBestseller
 
#Language settings
$language=en
INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];title[lang=$language]
;;ZBestseller;Our Bestseller

在 CMS 中创建新页面后，Spartacus 会自动添加它，无需任何配置。 Spartacus 中页面的 URL 与 CMS 标签相同。

Creating a New Component

要在 Spartacus 中创建新组件，首先需要在 CMS 中创建相关组件。您可以通过将组件类型添加到内容槽来创建组件。添加组件类型时，会出现组件编辑器供您定义组件的属性。 您可以定义的属性取决于组件所基于的组件类型。 创建组件后，它会出现在“添加组件”面板的“保存的组件”选项卡中，可供您和其他用户添加到目录的其他页面。

创建组件时，您可以在组件编辑器中指定组件的属性。 它由以下三 (3) 个选项卡组成：

• 内容 Content：允许您指定组件的名称和内容。 您可以在此处指定的内容取决于组件所基于的组件类型。 例如，创建 Paragraph 组件时，可以指定文本或 HTML 代码，创建简单的横幅组件时，可以指定要显示的图像以及外部或内部 URL 等。
• 基本信息 Basic Info：显示组件的 ID，以及组件创建和上次修改的日期和时间。
• 可见性 Visibility：允许您更改组件的可见性并为其分配限制，如下所示：

(1)显示组件设置允许您隐藏可见组件并使隐藏组件可见。 请注意，如果您处于高级编辑模式，则只能使隐藏的零部件可见。
(2)限制编辑器允许您添加、编辑和删除限制。 请注意，如果可见性设置为 OFF，则限制不适用。

由于组件的内容根据其所基于的组件类型而有所不同，因此在描述每个组件类型的文档中描述了指定组件的内容。

具体步骤参考这个链接

在 CMS 中创建新组件后，需要将其映射到新的 Angular 组件。

以下示例显示了如何映射新的愿望清单组件。 在这种情况下，愿望清单组件具有以下文件结构：

然后你可以在 wishlist.module.ts 中映射愿望清单组件，如下所示：

/*...*/
imports: [
  ConfigModule.withConfig({
    cmsComponents: {
      YOUR_NEW_COMPONENT_TYPE: {
        component: WishlistComponent // The class of your Angular component
      }
    }
  })
]

此逻辑会在 CMS 中的任何位置注入 WishlistComponent。

Static Pages

您还可以通过创建静态页面来创建带有自定义组件的自定义页面。

以下过程描述了如何使用愿望清单组件创建静态愿望清单页面。

(1) 创建静态页面和静态路由。

以下示例在 Wishlist-page.module.ts 中创建了一个愿望清单页面：

import { RouterModule, Routes } from '@angular/router';
 import { CmsPageGuard } from '@spartacus/storefront';
 /*...*/

 const staticRoutes: Routes = [{
   path: 'wishlist',
   component: WishlistPageComponent // Custom page component,
   canActivate: [CmsPageGuard]
 }];

 /*...*/
 imports: [RouterModule.forChild(staticRoutes)];

(2) 将组件添加到页面，就像添加任何常规 Angular 组件一样。

在以下示例中，组件添加到 wishlist-page.component.html 中：

<!-- Selector of the component to use -->
   <wishlist-component></wishlist-component>