如何给 SAP Spartacus Storefront 创建新的页面
page template 不包含 layout 或者 design information.
content slot 在頁面上的具體位置，以及 layout 和 design 的選擇，必須在前端指定。
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;/ourbestsellerINSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV) ;;Section2A-ZBestseller;Section 2A Slot for Bestseller Page;true;ZBestsellerComponentINSERT_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>總結
以上是生活随笔為你收集整理的如何给 SAP Spartacus Storefront 创建新的页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 结婚对自己的的祝福语
- 下一篇： 奉使至申