page template 不包含 layout 或者 design information.

content slot 在頁面上的具體位置，以及 layout 和 design 的選擇，必須在前端指定。

Creating New Pages and Components

Spartacus 是一個單頁面的應(yīng)用程序，但它仍然使用頁面的概念來區(qū)分應(yīng)用程序內(nèi)的不同視圖。 Spartacus 頁面來自 CMS，由插槽和組件構(gòu)成。 頁面包含插槽，插槽包含組件。 為了組織公共插槽和組件，Spartacus 支持頁面模板。 頁面模板包含布局以及可全局使用的組件，例如頁眉和頁腳部分。

Spartacus 從 CMS 接收每個頁面，其中包含一個插槽和組件列表，該列表用于呈現(xiàn)相應(yīng)的組件。

Creating a New Page

Spartacus 中的頁面基于使用負(fù)責(zé) API 從 SAP Commerce 后端獲取的 CMS 頁面。 來自 SAP Commerce 端的數(shù)據(jù)定義了元數(shù)據(jù)，如 url、標(biāo)題等，以及頁面的結(jié)構(gòu)。 結(jié)構(gòu)意味著可用的部分類型以及分配給這些部分的 CMS 組件。 Spartacus 接收此信息并為該結(jié)構(gòu)提供真正的組件，包括邏輯、ui、響應(yīng)式設(shè)計、樣式等。由于這種定義的方法，它需要 2 個步驟來創(chuàng)建新的 Spartacus 頁面。 首先，需要在 SAP Commerce 端創(chuàng)建 CMS 頁面。 其次，需要創(chuàng)建 Spartacus 端的組件并將其分配給 CMS 組件。

要在 Spartacus 中創(chuàng)建新頁面，首先需要在 CMS 中創(chuàng)建相關(guān)頁面。

SmartEdit 提供了一個直觀的向?qū)?#xff0c;您可以使用它為內(nèi)容目錄創(chuàng)建類別、內(nèi)容、電子郵件和產(chǎn)品頁面。您還可以向頁面添加限制，以指定在何種條件下向客戶顯示頁面。

SmartEdit 提供了一個直觀的向?qū)韼椭鸀閮?nèi)容目錄創(chuàng)建頁面。您可以創(chuàng)建類別、內(nèi)容、電子郵件和產(chǎn)品頁面。創(chuàng)建頁面時，您可以選擇創(chuàng)建主頁面或變體頁面。

主頁(Primary page)是始終向所有用戶顯示的默認(rèn)版本。您創(chuàng)建的所有變體頁面都基于主頁面。您不能為主頁分配限制。當(dāng)不存在變體頁面或不存在與當(dāng)前顯示條件匹配的變體頁面時，即顯示條件不滿足應(yīng)用于現(xiàn)有的時間、用戶組、類別等限制規(guī)則時，顯示主頁面變體頁面。

變體頁面(viration page)基于主頁面，但添加了限制。限制指定在何種條件下顯示變體頁面，例如當(dāng)屬于特定組的用戶查看頁面時，或者當(dāng)用戶在指定日期期間選擇頁面并且存在要在指定日期顯示的變體頁面時.您可以為變體頁面添加類別、時間、用戶組和其他限制。您可以添加到變體頁面的限制類型取決于頁面的類型。

創(chuàng)建頁面時，您應(yīng)該注意以下事項：

• 如果主頁尚不存在，則您無法創(chuàng)建變體頁面。 變體頁面必須基于主頁面。
• 您只能為類別和產(chǎn)品頁面類型創(chuàng)建一個主頁。
• 您可以為內(nèi)容頁面類型(content page type)創(chuàng)建多個主頁面。
• 您只需要為內(nèi)容頁面指定一個頁面標(biāo)簽(page label)，并且它在內(nèi)容目錄版本中必須是唯一的。 您在主頁上指定一個頁面標(biāo)簽，它會被所有關(guān)聯(lián)的變體頁面繼承。
• 您可以基于單個主頁面創(chuàng)建多個變體頁面。
• 您必須向變體頁面添加至少一個限制。

SAP 建議您將頁面添加到目錄的暫存版本，以便您以后可以將更改與目錄的在線版本同步。

具體的步驟可以參考這個頁面

作為第一步，讓我們從 SAP Commerce 端定義開始。創(chuàng)建一個新的 CMS 頁面需要為不同類型的類型創(chuàng)建多個實例。我們先談?wù)勥@些類型。

• 模板 Template：模板定義了頁面的各個部分。
• ContentPage：它是頁面本身。它包含諸如 url、應(yīng)使用哪個模板、標(biāo)題等值。 url 存儲在這種類型的屬性“標(biāo)簽”上。
• ContentSlot：這是可以分配給 section 的類型，負(fù)責(zé)內(nèi)容本身。它自己沒有內(nèi)容，但可以將組件分配給插槽。該組件包含基于 Spartacus 方分配的內(nèi)容。
• CMS 組件：標(biāo)準(zhǔn)商務(wù)系統(tǒng)中有多種 CMS 組件可用，也可以創(chuàng)建新類型。如果不需要特殊屬性，則可以使用通用 CMSFlexComponent 類型來創(chuàng)建組件實例。
• ContentSlotForPage：此類型僅處理將 ContentSlot 實例分配給 ContentPage 實例的部分。部分由這種類型的“位置”屬性處理。

也可以通過 Impex 完成創(chuàng)建。

創(chuàng)建這些實例的 Impex 始終具有相同的結(jié)構(gòu)，并且可以重復(fù)用于創(chuàng)建新的 CMS 頁面。 只需根據(jù)您的需要修改內(nèi)容。 它也可以在后臺手動完成，但我建議使用 impex 并將其導(dǎo)入 HAC。 只需登錄，轉(zhuǎn)到控制臺選項卡和 ImpEx 導(dǎo)入并粘貼修改后的 impex 內(nèi)容。 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 中創(chuàng)建新頁面后，Spartacus 會自動添加它，無需任何配置。 Spartacus 中頁面的 URL 與 CMS 標(biāo)簽相同。

Creating a New Component

要在 Spartacus 中創(chuàng)建新組件，首先需要在 CMS 中創(chuàng)建相關(guān)組件。您可以通過將組件類型添加到內(nèi)容槽來創(chuàng)建組件。添加組件類型時，會出現(xiàn)組件編輯器供您定義組件的屬性。 您可以定義的屬性取決于組件所基于的組件類型。 創(chuàng)建組件后，它會出現(xiàn)在“添加組件”面板的“保存的組件”選項卡中，可供您和其他用戶添加到目錄的其他頁面。

創(chuàng)建組件時，您可以在組件編輯器中指定組件的屬性。 它由以下三 (3) 個選項卡組成：

• 內(nèi)容 Content：允許您指定組件的名稱和內(nèi)容。 您可以在此處指定的內(nèi)容取決于組件所基于的組件類型。 例如，創(chuàng)建 Paragraph 組件時，可以指定文本或 HTML 代碼，創(chuàng)建簡單的橫幅組件時，可以指定要顯示的圖像以及外部或內(nèi)部 URL 等。
• 基本信息 Basic Info：顯示組件的 ID，以及組件創(chuàng)建和上次修改的日期和時間。
• 可見性 Visibility：允許您更改組件的可見性并為其分配限制，如下所示：

(1)顯示組件設(shè)置允許您隱藏可見組件并使隱藏組件可見。 請注意，如果您處于高級編輯模式，則只能使隱藏的零部件可見。
(2)限制編輯器允許您添加、編輯和刪除限制。 請注意，如果可見性設(shè)置為 OFF，則限制不適用。

由于組件的內(nèi)容根據(jù)其所基于的組件類型而有所不同，因此在描述每個組件類型的文檔中描述了指定組件的內(nèi)容。

具體步驟參考這個鏈接

在 CMS 中創(chuàng)建新組件后，需要將其映射到新的 Angular 組件。

以下示例顯示了如何映射新的愿望清單組件。 在這種情況下，愿望清單組件具有以下文件結(jié)構(gòu)：

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

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

此邏輯會在 CMS 中的任何位置注入 WishlistComponent。

Static Pages

您還可以通過創(chuàng)建靜態(tài)頁面來創(chuàng)建帶有自定義組件的自定義頁面。

以下過程描述了如何使用愿望清單組件創(chuàng)建靜態(tài)愿望清單頁面。

(1) 創(chuàng)建靜態(tài)頁面和靜態(tài)路由。

以下示例在 Wishlist-page.module.ts 中創(chuàng)建了一個愿望清單頁面：

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) 將組件添加到頁面，就像添加任何常規(guī) Angular 組件一樣。

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

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

總結(jié)

以上是生活随笔為你收集整理的如何给 SAP Spartacus Storefront 创建新的页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。