# H-47 我的最愛 Supplier 比較頁

> [name=Tony Fan]
###### tags: `H我的最愛` `頁面分析`

## API 清單

No | API | Desc | 執行順序 | 執行條件 | 參考
---|---------|----------------------------|----------|---------------------------------------|------
1 | [URI-A-02](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) | prepare 多語標籤 | 1 | page init | [附註-多語標籤](#多語標籤)
2 | [L01](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API) | 取得Favorite資料(指定ID篩選) | 1 | page init | 無
3 | [URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ) | SEO資料 | 1 | page init | [附註-SEO資料](#SEO資料)

## 原頁面網址
- https://www.taiwantrade.com/favoriteSuppliercompare


## 原頁面 URL 解析
* `${domain}/favoriteSuppliercompare`
* domain: 網域
* 方法：POST
* Form (x-www-form-urlencode):
* favoriteType=SUPPLIER
* rowIds=[供應商ID]
* rowIds=[供應商ID]
* rowIds=...

## 頁面解說圖

### 頁面區塊說明
以區塊方式說明使用到的 API


<div id="B_H-47-01"></div>

* H-47-01
* 共用區塊: Header Service元件, 參考[`A-01 Header元件分析`](https://hackmd.io/aA5DMa_GTQqoolRC2B8ohw)
* 導頁判斷機制：當登入的使用者是BU身份，必須導頁到BU。參考[頁面邏輯說明 導頁](#導頁)
* H-47-02
* 同 H-47-01，Header Service元件中取得常駐列(Perma Column)的部分

<div id="B_H-47-03"></div>

* H-47-03

1. Contact Supplier：導入 [H46A Contact Us(SUPPLIER)頁](https://hackmd.io/s65KlB15Sr2gyRe4IIW7CA?view)
* [多語標籤](#多語標籤): contactsupplier
* 機制：至少要選擇1筆供應商，且必須小於`ContactLimit`(目前是20)，否則跳出警告，或是disable按鈕
* 導入URL：https://{domain}/contact/SUPPLIER?contactType=SUPPLIER&supplierIds%5B[供應商ID]%5D=[語系ID]&supplierIds...
* [參數] 請參見 [頁面欄位說明 H-47-04 checkbox](#C_H-47-04_1)
* e.g.: https://www.taiwantrade.com/contact/SUPPLIER?contactType=SUPPLIER&supplierIds%5B601090%5D=42&supplierIds%5B601090%5D=42

2. Subsrcibe：導入[URI-J-05~08 電子報訂閱(SupplierAlert)](https://hackmd.io/MxreXOYmTUys_YNE2JGaPQ)
* [多語標籤](#多語標籤): ez_subscribe
* 機制：可複選但至少要選擇1筆供應商，否則跳出警告，或是disable按鈕
* 導入URL：https://{domain}/taiwantradeAlert/subscribeCompany?supplierIds=[供應商ID],...
* [參數] 請參見 [頁面欄位說明 H-47-04 checkbox](#C_H-47-04_1)
* e.g.： https://www.taiwantrade.com/taiwantradeAlert/subscribeCompany?supplierIds=65,169225

3. Remove：刪除比較選項
* [多語標籤](#多語標籤): remove
* 機制：可複選但至少要選擇1筆供應商，否則跳出警告，或是disable按鈕
* 使用：由於此頁面不會儲存任何選項到資料庫，因此僅從頁面中刪除項目即可

* H-47-04
* 透過 [頁面Form參數`rowIds`](#原頁面-URL-解析) ，用Array的型態帶入 [L01](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API) 取得Compare供應商資料
* 列表項目對應參考：[頁面欄位說明 H-47-04](#H-47-04)
* 頁面效果，除了標題欄，每次以有左右滾動(Scroll)查看的效果顯示三欄。

* H-47-05
* 同 H-47-03

### 頁面欄位說明
區塊中使用到的欄位對應

#### H-47-04

透過 [頁面Form參數`rowIds`](#原頁面-URL-解析) ，用Array的型態帶入 [L01 - 取得Favorite資料](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API)

window.headerEntry.getMyFavoritesByIds('SUPPLIER',[rowIds])

將Output結果依序顯示於此區塊中，對應API欄位與多語標籤如下：

<div id="C_H-47-04_1"></div>

1. checkbox：
- 標題欄 [多語標籤](#多語標籤): `selectall`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)： `id` 和 `languageId`
- 在 [區塊 H-47-03](#B_H-47-03) 中，勾選的checkbox用`id` 作為[供應商ID]，用`languageId`作為[語言ID] 導入按鈕所執行的動作
- 可以用hidden input儲存，或是用html data tag例如下(xsl)：

            <input type="checkbox" class="selected-supplier" data-language-id="{field[@name='languageId']}" value="{field[@name='id']}" />

2. Supplier：
- 標題欄 [多語標籤](#多語標籤): `supplier`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`companyName`
- 超連結：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`url`

3. Business Type：
- 標題欄 [多語標籤](#多語標籤): `businesstype`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`businessType`
4. No. of Employee：
- 標題欄 [多語標籤](#多語標籤): `employee`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`employee`

5. Certification：
- 標題欄 [多語標籤](#多語標籤): `certification`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`certifications`

6. Headquarters：
- 標題欄 [多語標籤](#多語標籤): `headquarter`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`headquarter`

7. Factory Location：
- 標題欄 [多語標籤](#多語標籤): `factorylocation`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`location`

8. Main Export Market：
- 標題欄 [多語標籤](#多語標籤): `mainmarkets`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`mainMarket`

9. Brand：
- 標題欄 [多語標籤](#多語標籤): `brand`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`companyBrand`

10. Main Export Products：
- 標題欄 [多語標籤](#多語標籤): `ez_mainexportproducts`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`mainMarket`

11. Overseas Branches：
- 標題欄 [多語標籤](#多語標籤): `overseasbranches`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`branchName`

12. checkbox：同1

## 頁面邏輯說明

請見 [頁面解說圖 頁面欄位說明](#頁面欄位說明) 各欄說明

以下僅列出特別需要注意的頁面邏輯

### 導頁

載入頁面時，如果POST進來沒有任何的 rowIds 參數，則導回 [H-46 我的最愛 Supplier 列表頁](https://hackmd.io/TZO1EHOTR7GJ1ZOp7xILlw)：
- https://{domain}/favoriteProductlist

### SEO資料
比照AEM舊案，在HEAD TAG 內植入的SEO資料

參考 [API URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ)

General類的頁面代碼 指定為 COMPARE_SUPPLIER_LIST

## 附註
### 多語標籤

需要多語標籤，請參考下圖圖示所表示的參數`code`值 透過 [多語標籤 API](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) 取得翻譯名稱。
取得後，請參考頁面欄位說明或是以下圖示，填入所需的標籤`code`對應的`name`

以下列出此頁面所需的所有`code`：
- contactsupplier
- ez_subscribe
- remove
- selectall
- supplier
- businesstype
- employee
- certification
- headquarter
- factorylocation
- mainmarkets
- brand
- ez_mainexportproducts
- overseasbranches