SAP 電商雲 Spartacus UI Quick Order 的路由和 CMS 實作

如下圖高亮區域所示:

root

config

包含了敲擊多少個字元後,觸發 product 搜尋的配置:

import { Injectable } from '@angular/core';
import { Config } from '@spartacus/core';

@Injectable({
  providedIn: 'root',
  useExisting: Config,
})
export abstract class QuickOrderConfig {
  quickOrder?: {
    searchForm?: {
      displayProductImages: boolean;
      maxProducts: number;
      minCharactersBeforeRequest: number;
    };
  };
}

declare module '@spartacus/core' {
  interface Config extends QuickOrderConfig {}
}

      

這裡有一個最佳實踐,定義一個 abstract class,包含了配置的資料結構,再使用 declare module,填充 @spartacus/core 裡定義的 Config 接口。

在 root 檔案夾下的 module，包含了 CMS 和路由配置：

路由實作：

export const defaultQuickOrderRoutingConfig: RoutingConfig = {
  routing: {
    routes: {
      quickOrder: {
        paths: ['my-account/quick-order'],
      },
    },
  },
};
      

CMS mapping 實作：

export function defaultQuickOrderComponentsConfig() {
  const config = {
    featureModules: {
      [CART_QUICK_ORDER_FEATURE]: {
        cmsComponents: ['QuickOrderComponent', 'CartQuickOrderFormComponent'],
      },
      // by default core is bundled together with components
      [CART_QUICK_ORDER_CORE_FEATURE]: CART_QUICK_ORDER_FEATURE,
    },
  };
  return config;
}
      

13