# 關鍵字

CPQ，Product Configuration，Product Configure，Product Variant

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

啟用 variant 的程式碼:

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

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

搜尋 `home theater`：

![](https://img-blog.csdnimg.cn/img_convert/486ef203585e295cf21a4a7e71d9e55f.png)

url：

![](https://img-blog.csdnimg.cn/img_convert/e48449ce133033be0beecd4bc9ca62d1.png)

![](https://img-blog.csdnimg.cn/img_convert/df70b5ac35c46a08e5cbad2b260481d1.png)

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
開啟之後是這樣：
![](https://img-blog.csdnimg.cn/img_convert/5a80b4d1cac397c3bd37eb4d754bb748.png)

在這個 template 裡面：ProductDetailsPageTemplate
![](https://img-blog.csdnimg.cn/img_convert/7dab9f774708e52cfe51b3a208416126.png)

![](https://img-blog.csdnimg.cn/img_convert/fa71ac0147dc8e6163c68bb14de95ad1.png)

執行時的 Summary content slot：
![](https://img-blog.csdnimg.cn/img_convert/363d92ba26675286f8434e360e2c1db1.png)

summary 裡的 Component：
![](https://img-blog.csdnimg.cn/img_convert/eeceecc9a5193978e436bfe404638656.png)

![](https://img-blog.csdnimg.cn/img_convert/e5b0bee666b2bcc5d2315c9a6eb9db0e.png)

僅當 configurable 為 true 才顯示：
![](https://img-blog.csdnimg.cn/img_convert/0b9f1e7d9149c448f672fe796af389e0.png)

列印出來：

![](https://img-blog.csdnimg.cn/img_convert/f69b34537a8fe55e3a3944a8ec0d0683.png)

![](https://img-blog.csdnimg.cn/img_convert/4e7b9690fc7fedf6dfb8d7362cf74a54.png)

owner type 硬編碼成 product：

![](https://img-blog.csdnimg.cn/img_convert/947cc283986b6a998c675cff1a21ebeb.png)

![](https://img-blog.csdnimg.cn/img_convert/50668b72b3baa250dd0904150e310d2e.png)

這是標準的介面：
![](https://img-blog.csdnimg.cn/img_convert/e856e5561bef30fe862e5338851fcd7d.png)

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

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

![](https://img-blog.csdnimg.cn/img_convert/f69078207d35db243c5f42e96721fdac.png)

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

這個才是正確的：
![](https://img-blog.csdnimg.cn/img_convert/c108d1db2a27457dc3e543b2711ab445.png)

把程式修改一下：

![](https://img-blog.csdnimg.cn/img_convert/12cbc15968c9664e5256536033ab54d4.png)

![](https://img-blog.csdnimg.cn/img_convert/7a11156c3aa7a4d6b2ac4cf1b40a448f.png)

判斷是否是 route 配置：
![](https://img-blog.csdnimg.cn/img_convert/c29b412aafdfd6f95f7347154fd7269d.png)

![](https://img-blog.csdnimg.cn/img_convert/17385cf12423c767087fdbc86287ee2f.png)

只要 command 物件有 cxRoute，就被認為是 route command：
![](https://img-blog.csdnimg.cn/img_convert/dcb663f13095aa110b80bed144243c1d.png)

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

![](https://img-blog.csdnimg.cn/img_convert/996dccdf88c55ee0b9f71a765f0cf9d2.png)

```typescript
  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;
  }
```

![](https://img-blog.csdnimg.cn/img_convert/0ef966e71c2507999ade3d565c64983f.png)

![](https://img-blog.csdnimg.cn/img_convert/4d190b7b2fb9e5d7d6ded14935bada3d.png)

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

![](https://img-blog.csdnimg.cn/img_convert/bf7d0f80ac9f007e9f97468d4d4da975.png)

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

![](https://img-blog.csdnimg.cn/img_convert/9256f402e6869f3d91194b2b2c3bedcb.png)

最後結果：
![](https://img-blog.csdnimg.cn/img_convert/9a177cbef2c3a81711c3730bb2035e33.png)

新增到購物車之後：

![](https://img-blog.csdnimg.cn/img_convert/38b00595fae9edceb014563f35165c00.png)

URL 如下：

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

SAP 電商雲 Spartacus UI Configurable Product 的頁面設定

相關文章