關鍵字

CPQ，Product Configuration，Product Configure，Product Variant

變體是在某些方面彼此不同但基於相同基本模型的產品。 變體的一個示例是 T 恤的顏色和尺寸。 在 Spartacus 中啟用變體功能，並在 SAP Commerce Cloud 中配置產品後，客戶可以在店面中選擇具有他們選擇的變體（或多個變體）的產品。

啟用 variant 的程式碼:

ConfigModule.withConfig(<CmsConfig>{
      cmsComponents: {
        ProductVariantSelectorComponent: {
          component: ProductVariantSelectorComponent,
          guards: [ProductVariantGuard],
        },
      },
    }),
 

具有變體的產品需要在 /page 響應中包含 ProductVariantSelectorComponent CMS 元件，並且需要在頁面上呈現它們。

搜尋 home theater：

url：

custom Angular Component：cx-configure-product‘

url：http://localhost:4000/electronics-spa/en/USD/configure/vc/product/entityKey/CONF_HOME_THEATER_ML

http://localhost:4000/electronics-spa/en/USD/configure/vc/product/entityKey/CONF_HOME_THEATER_ML

在這個 template 裡面：ProductDetailsPageTemplate

執行時的 Summary content slot：

summary 裡的 Component：

僅當 configurable 為 true 才顯示：

打印出來：

owner type 硬編碼成 product：

這是標準的介面：

http://localhost:4000/electronics-spa/en/USD/configure/vc/product/entityKey/CONF_HOME_THEATER_ML

執行時打印出來的 pipe 的輸入和輸出資料：

上面的是已經進到 configuration 明細頁面後打印出來的。不對，重新找。

這個才是正確的：

把程式修改一下：

判斷是否是 route 配置：

只要 command 物件有 cxRoute，就被認為是 route command：

根據 route 名稱從 route configure 裡拿到配置：

  getRouteConfig(routeName: string): RouteConfig {
    const routeConfig = this.config?.routing?.routes;

    const result = routeConfig && routeConfig[routeName];
    if (!routeConfig || result === undefined) {
      this.warn(`No path was configured for the named route '${routeName}'!`);
    }
    return result;
  }

path: configure/vc/:ownerType/entityKey/:entityKey

把 path 裡的變數 place holder 用實際值進行替換：

最後結果：

新增到購物車之後：

URL 如下：

http://localhost:4000/electronics-spa/en/USD/configure/vc/cartEntry/entityKey/0?forceReload=true&resolveIssues=false