如何在 SAP 电商云 Spartacus UI 中创建新的页面

Spartacus 中的页面基于使用相关 API 从 SAP Commerce 后端获取的 CMS 页面。来自 SAP Commerce 端的数据定义了元数据，如 url、标题等，以及页面的结构。结构意味着可用的部分类型以及分配给这些部分的 CMS 组件。Spartacus 接收此信息并为该结构提供真正的组件，包括逻辑、ui、响应式设计、样式等。

由于这种定义的方法，它需要 2 个步骤来创建新的 Spartacus 页面。首先，需要在 SAP Commerce 端创建 CMS 页面。其次，需要创建 Spartacus 端的组件并将其分配给 CMS 组件。

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

模板：模板定义页面的部分

ContentPage：它是页面本身。它包含诸如 url、应使用哪个模板、标题等值。url 以这种类型存储在属性“标签”上。

ContentSlot：这是可以分配给 section 的类型，负责内容本身。它自己没有内容，但可以将组件分配给插槽。该组件包含基于斯巴达克斯方分配的内容。

CMS 组件：标准商务系统中有多种 CMS 组件可用，也可以创建新类型。如果不需要特殊属性，则可以使用通用 CMSFlexComponent 类型来创建组件实例。

ContentSlotForPage：该类型只处理将 ContentSlot 实例分配给 ContentPage 实例的部分。部分由这种类型的“位置”属性处理。

创建这些实例的 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

通过导入这些行，将创建所需的实例。导入后直接可以通过定义的url调用新站点。在本例中，它将是http://localhost:4200/ourbestseller。

如果已经存在要重用的现有 CMS 组件，则可以删除 CMSFlexComponent 的创建。但是需要将现有组件分配给 ContentSlot 而不是新的 CMS 组件。在此用例中，不需要本文的第二步。

第一步，创建所有必需的 CMS 实例，我们从 Commerce 端获取具有结构的页面。在第二步中，我们定义 Spartacus 端的哪个组件是 CMS 组件的对应部分。

这很简单，可以通过配置来完成。只需创建一个新组件并将此配置添加到模块文件中即可。

   ConfigModule.withConfig(<CmsConfig>{
      cmsComponents: {
        ZBestsellerComponent: {
          component: BestsellerComponent,
        },
      },
    }),

‘ZBestsellerComponent’ 是 CMS 组件的 uid，‘BestsellerComponent’ 是 Angular 组件的类名。将此添加到配置后，组件的内容将显示在新创建的页面上。

SAP 电商云中的目录同步机制

我们知道在 Hybris 中，一个目录可以有一个目录版本(catalog version )列表。

产品目录和内容目录主要有 2 个目录版本

Staged

此目录版本的作用类似于测试目录版本，用于在进入在线目录版本之前定义目录并对其进行验证

Online

这个目录版本是用来在店面展示的。

所以在线目录版本应该始终是活动目录版本。

理想情况下，这些目录版本之间的内容不会发生变化。

同步是将目录内容从源目录版本复制到目标目录版本的过程。

当我们同步上演目录版本时，相同的上演内容将被复制到在线目录版本

我们可以通过指定源目录版本和目标目录版本来定义同步规则。

如何进行同步？

同步可以在 HMC 中完成，如下所示。

我以wearingProductCatalog 为例来说明。

搜索目录“apparelProductCatalog”

打开它，我们可以看到2个目录版本“ Staged ”和“ Online ”，我们可以看到在线版本处于活动状态。

打开暂存目录版本，然后单击目录版本选项卡。

在依赖目录版本下，右键单击并创建新的同步。

定义同步规则，源为 Staged，目标为 Online。

打开暂存目录版本并单击目录版本选项卡。

单击同步目录版本按钮。

选择源目录版本作为暂存，然后单击下一步。

将出现目标选项卡并验证目标是否符合同步规则。

点击开始并等待处理。

成功后，所有暂存版本的内容将被复制到在线版本。

注意：

1. 每当我们同步时，都会在后端创建并执行同步作业。
2. 我们也可以在驾驶舱(cockpit)中进行同步。
3. 我们可以使用CMS cockpit进行内容目录和产品 cockpit进行产品目录同步。
4. 我们甚至可以编写 cron 作业并将其配置为在一个时间间隔内运行以进行同步。