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