# connectors

包含：

- site.connector.ts
- site.adapter.ts
- converters.ts

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

## converters.ts

還是從 `site-context` 平級目錄匯入：

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

建立幾個 normalizer 的 injection token：

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

convertor 負責把資料模型從後臺格式轉換成 UI 模式：
![](https://img-blog.csdnimg.cn/img_convert/35b93980bba29ad529c4e756bc2c6450.png)

## site.adapter.ts ( SiteAdapter)
是一個純虛擬函式：
![](https://img-blog.csdnimg.cn/img_convert/22c4c53bce08abb385280396a5919c74.png)

在 core 的 occ 資料夾裡，SiteAdapter 被 OCCSiteAdapter 實現：
![](https://img-blog.csdnimg.cn/img_convert/c91f80245a0fb1a135c51d2a011b4996.png)

## site.connector.ts (SiteConnector)

使用了透過建構函式注入的 SiteAdapter 對應的方法。

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

# events

這裡出現了第二個 module：
![](https://img-blog.csdnimg.cn/img_convert/a5c5d85e30e64aa1f5451e3f4541c162.png)

## site-context-event.module.ts

空的 module：

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

## site-context-event.builder.ts (SiteContextEventBuilder)

全部的匯入資訊：
![](https://img-blog.csdnimg.cn/img_convert/993fa1a069c88cc4cddbab8324f3cbf0.png)

這裡注入了標準的 ActionSubject，來自 `@ngrx/store`：
![](https://img-blog.csdnimg.cn/img_convert/4e5051537264299a8728d4c974b5343f.png)

### register 方法

```typescript
  protected register(): void {
    this.registerSetLanguage();
    this.registerSetCurrency();
  }
```
### registerSetLanguage

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

下面是詳細的除錯細節。

該 `ActionSubject` 透過建構函式引數注入：
![](https://img-blog.csdnimg.cn/img_convert/6d03945bba64d79151b83e98a327a160.png)

執行時，set Active Language action 觸發了：

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

payload 為 `en`：

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

在 language.service.ts 裡，丟擲了 action：`SiteContextActions.SetActiveLanguage(isocode)`
![](https://img-blog.csdnimg.cn/img_convert/52dc5ea70f04c6e1594dca14a21bcaa9.png)

為什麼 event builder 可以接收到呢？透過這個 `OfType`：
![](https://img-blog.csdnimg.cn/img_convert/8410a0e64e04453bd9bd5a62c3911098.png)

en 引數似乎是從瀏覽器位址列 url 提取的：
![](https://img-blog.csdnimg.cn/img_convert/5e1415dfaa565f66029a022bc99d3e45.png)

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

我們可以透過定義上下文屬性(如 `baseSite`、語言和貨幣)來配置應用程式。當我們將這些屬性的值附加到店面URL時，Storefront 將基於這些值進行配置。

例如，當使用者訪問https://localhost:4200/electronics-spa/en/USD/時，應用程式將載入electronic -spa `base-site`，將站點語言設定為英語(en)，並將貨幣設定為美元(USD)。

上下文屬性還為語言和貨幣下拉選單設定預設值，可以使用它們動態地更改店面的上下文。

預設情況下，context 不會出現在Spartacus的店面URL中。

有的客戶可能希望有上下文出現在店面URL，作為一種最佳化SEO的方式，或為維護URL與以前的店面的相容性。例如，客戶可能希望搜尋機器人根據URL中的語言和貨幣對店面的不同版本進行分類。或者客戶可能從另一個店面遷移到Spartacus，該店面URL中包含上下文，您希望保持以前建立的頁面排名。

要在URL中包含上下文，需要在app.modules.ts的context屬性中新增urlParameters屬性。示例如下:
 
```typescript
 context: {
    baseSite: ['electronics-spa'],
    urlParameters: ['baseSite', 'language', 'currency']
  },
```

SAP 電商雲 Spartacus UI 根據 url 設定 site context 的具體例子

相關文章