SAP 電商雲 Spartacus UI 去除 Checkout 頁面 header 和 footer 區域的幾種方法介紹

1 distraction-free checkout

如何移除 checkout 頁面的 footer 和 header

方法1 - 把 checkout CMS page 的header 和 footer slot 删除即可

可以直接在 Backoffice 或者 SmartEdit 裡手動删除，也可以建立 Impex 删除。這樣 Hybris Re-initialize 的時候，這些 Impex 腳本可以重用。

所有的 checkout 頁面，包括 shipping address，delivery mode 等頁面，都需要删除。

這個步驟做完之後，我們仍然能夠在左上角，看到一個 Hi XXX 的字段：

這個字段位于一個名叫 SiteLogin 的 content slot 内，該 slot 包含了一個 cx-login component.

注意，這個内容資訊并非來自 Commerce Cloud CMS 背景，而是屬于 Spartacus Static Configuration 的一部分。

這個 static 配置定義在 Spartacus 代碼這個位置：

現在我們需要把這個靜态配置移到 CMS Component 裡。

(1) 在 SiteLogin slot 添加類型為 flexType 的 CMSFlexComponent：LoginComponent.

給包括 checkout pages 在内的所有頁面都添加這個 Component assignment 關系。

(2) 對于 PreHeader slot 和 HamburgerMenuComponent 重複上述的操作。

pages besides the checkout pages.

(3) 從 SpartacusConfigurationModule. 中删除 static 配置，即 …defaultCmsContentProviders 相關代碼。

方法2 - 複寫頁面模闆 MultiStepCheckoutSummaryPageTemplate 的 header 和 footer section

使用如下代碼将這兩個區域設定為 [] 即可：

provideConfig({
layoutSlots: {
MultiStepCheckoutSummaryPageTemplate: {
header: {
slots: [],
},
footer: {
slots: [],
},
},
},
} as LayoutConfig),           

複制

這種簡單粗暴的方法，使我們失去了在 CMS 裡控制頁面布局的可能性。有一種折中的方案，即使用另一種 content slot 集合。

provideConfig({
layoutSlots: {
MultiStepCheckoutSummaryPageTemplate: {
header: {
slots: [‘CheckoutHeader’],
},
footer: {
slots: [‘CheckoutFooter’],
},
},
},
} as LayoutConfig),           

複制

開發 header

ng g m spartacus/my-storefront ng g c spartacus/my-storefront --export ng g m spartacus/my-storefront/my-desktop-header

使用 MyStorefrontComponent 擴充 StorefrontComponent

把後者的 .html 檔案裡的内容全部拷貝到前者的 .html 檔案裡。

将 StorefrontComponentModule import 區域的值拷貝到 MyStorefrontModule.

@NgModule({
imports: [
CommonModule,
RouterModule,
GlobalMessageComponentModule,
OutletModule,
OutletRefModule,
PageLayoutModule,
PageSlotModule,
KeyboardFocusModule,
SkipLinkModule,
MyDesktopHeaderModule,
],
declarations: [MyStorefrontComponent],
exports: [MyStorefrontComponent],
})
export class MyStorefrontModule {}           

複制

以上是 my-storefront.module.ts 的值。

然後将 MyStorefrontModule 導入 AppModule. 将 app.component.html 檔案裡的 cx-storefront 替換成 app-my-storefront.

既然現在我們對 app-my-storefront 有 100% 的控制權了，就可以随意修改其 html 檔案裡的内容了。

<ng-template [cxOutlet]=”StorefrontOutlets.STOREFRONT” cxPageTemplateStyle>
<ng-template cxOutlet=”cx-header”>
<header
cxSkipLink=”cx-header”
[cxFocus]=”{ disableMouseFocus: true }”
[class.is-expanded]=”isExpanded$ | async”
(keydown.escape)=”collapseMenu()”
(click)=”collapseMenuIfClickOutside($event)”
>
<app-my-desktop-header></app-my-desktop-header>
</header>
<cx-page-slot position=”BottomHeaderSlot”></cx-page-slot>
<cx-global-message
aria-atomic=”true”
aria-live=”assertive”
></cx-global-message>
</ng-template>
<main cxSkipLink=”cx-main” [cxFocus]=”{ disableMouseFocus: true }”>
<router-outlet></router-outlet>
</main>
<ng-template cxOutlet=”cx-footer”>
<footer cxSkipLink=”cx-footer” [cxFocus]=”{ disableMouseFocus: true }”>
<cx-page-layout section=”footer”></cx-page-layout>
</footer>
</ng-template>
</ng-template>           

複制

我們仍然期望我們 header 區域的某些部分可以在 CMS 裡被編輯，比如 links 和 navigation bar.

是以我們在這些位置，放置 cx-page-slot component.

這個 slot Component 的作用是，渲染在 CMS 裡被配置設定給某個 slot 的 Component.

<div class=”top-header py-2”>
<div class=”container”>
<div class=”row justify-content-between align-items-center”>
<cx-page-slot position=”SiteLinks”></cx-page-slot>
<div>
Download our application. <a><u>Find out more</u></a>
</div>
<cx-page-slot
class=”d-flex align-items-center”
position=”SiteContext”
></cx-page-slot>
</div>
</div>
</div>
<div class=”container”>
<div class=”row justify-content-between align-items-center”>
<cx-generic-link [url]=”’/’”><img src=”assets/logo.png” /></cxgeneric-
link>
<cx-page-slot position=”NavigationBar”></cx-page-slot>
<cx-searchbox></cx-searchbox>
<div class=”header-icons”>
<cx-generic-link [url]=”{ cxRoute: ‘login’ } | cxUrl”
><cx-icon [cxIcon]=”’USER’”></cx-icon
></cx-generic-link>
<cx-generic-link [url]=”{ cxRoute: ‘wishlist’ } | cxUrl”
><cx-icon [cxIcon]=”’EMPTY_HEART’”></cx-icon
></cx-generic-link>
<cx-mini-cart></cx-mini-cart>
</div>
</div>
</div>           

複制

以上是檔案 my-desktop–header.component.html 的内容。

為了讓這個模闆能夠工作，我們需要在 MyDesktopHeaderModule 裡導入一些 dependencies.

@NgModule({
imports: [
CommonModule,
GenericLinkModule,
SearchBoxModule,
PageSlotModule,
MiniCartModule,
IconModule,
UrlModule,
],
declarations: [MyDesktopHeaderComponent],
exports: [MyDesktopHeaderComponent],
})
export class MyHeaderModule {}           

複制

一切完成後，新的 header 區域如下圖所示：

這是因為新的 header structure 同預設的 Spartacus style 不比對。

修改 styles.scss 的值：

//change the default font
@import url(“https://fonts.googleapis.com/css?family=Raleway:100,300,400,500
,700,900&display=swap&subset=latin-ext”);
$font-family-base: “Raleway”, sans-serif;
$styleVersion: 4.2;
// remove default styles for the header section and some components
$skipComponentStyles: (header, cx-mini-cart);
@import “~@spartacus/styles/index”;
// define color variables
:root {
--cx-color-secondary: #f1f2f3;
--cx-color-primary: #43464e;
}           

複制