乐趣区

关于saprfc:如何给-SAP-Spartacus-Storefront-创建新的页面

jiezi

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>
退出移动版