如何給 SAP Spartacus Storefront 創建新的頁面詳情 - saprfc,頁面佈局,前端,javascript 註銷博客

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>

註銷博客

註銷博客

博客 / 詳情