# H-46 我的最愛 Supplier 列表頁

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

## 重點摘要

* www的Favorite List和BU的Favorite List，頁面各種邏輯並無差異，差別只差在未登入或SU與已登入。
* 舊案把已登入買主導入BU，未登入或純供應商導入www的最愛頁面。

* 如同 `HEADER元件 Favorite Menu` 一樣，都只要靠header-service的指令就能取得最愛產品或供應商的資料與明細：

window.headerEntry.getMyFavorites()

* 由於頁面比起 `HEADER元件 Favorite Menu` 多了篩選排序分頁的功能，因此[擴充`getMyFavorites`](https://docs.google.com/spreadsheets/d/12U90GlZtqTFVemxzp5lFCv5l_eAZchVlOJN6xbRxDLI/edit#gid=785992005&range=A39:B39)來處理：

window.headerEntry.getMyFavoritesByCondition([DataType],[Show],[Sort By],[Page],[Rows])

## API 清單

No | API | Desc | 執行順序 | 執行條件 | 參考
---|---------|----------------------------|----------|---------------------------------------|------
1 | [L01](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?both#L01-%E5%8F%96%E5%BE%97%E6%9C%83%E5%93%A1%E8%B3%87%E6%96%99-API) | 取得會員資料 | 1 | page init | 無
2 | [URI-A-02](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) | prepare 多語標籤 | 2 | page init | [附註-多語標籤](#多語標籤)
3 | [L01](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API) | 取得Favorite資料(特定條件篩選) | 2 | page init | 無
4 | [L01](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%88%AA%E9%99%A4Favorite%E8%B3%87%E6%96%99-API) | 刪除Favorite資料 | None | on remove | 無
5 | [URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ) | SEO資料 | 2 | page init | [附註-SEO資料](#SEO資料)

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


- https://www.taiwantrade.com/favoriteSupplierlist?page=1&rows=2

## 原頁面 URL 解析
* `${domain}/favoriteSupplierlist`
* domain: 網域
* `${domain}/favoriteSupplierlist?page=[page]&rows=[rows]`
* domain: 網域
* page：
* API欄位：[page] ([L01 - 取得Favorite資料](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API) )
* rows：
* API欄位：[row] ([L01 - 取得Favorite資料](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API) )

## 頁面解說圖

### 頁面區塊說明
以區塊方式說明使用到的 API
<div id="B_H-46-01"></div>

* H-46-01
* 共用區塊: Header Service元件, 參考[`A-01 Header元件分析`](https://hackmd.io/aA5DMa_GTQqoolRC2B8ohw)
* 導頁判斷機制：當登入的使用者是BU身份，必須導頁到BU。參考[頁面邏輯說明 導頁](#導頁)
* H-46-02
* 同 H-46-01，Header Service元件中取得常駐列(Perma Column)的部分
* H-46-03
* Favorites
* [多語標籤](#多語標籤): watchlist
* Products
* 連結到 [H-44 我的最愛 Product 列表頁](https://hackmd.io/p3n-ty9WQXCnSiLkGemiZg?both)：https://{domain}/favoriteProductlist
* [多語標籤](#多語標籤): products
* 括號內數字：代表我的最愛產品數字，數字等同於`個人化計算`的最愛產品數字
* Suppliers
* menu項目需要 highlight效果
* [多語標籤](#多語標籤): suppliers
* 括號內數字：代表我的最愛供應商數字，數字等同於`個人化計算`的最愛供應商數字
* H-46-04
* Supplier List
* [多語標籤](#多語標籤): supplierlist

<div id="B_H-46-05"></div>

* H-46-05
1. Contact Supplier：帶入勾選項目，導入 [H46A Contact Us(SUPPLIER)頁](https://hackmd.io/s65KlB15Sr2gyRe4IIW7CA?view)
* [多語標籤](#多語標籤): contactsupplier
* 機制：可複選但至少要選擇1筆最愛供應商，且必須小於`ContactLimit`(目前是20)，否則跳出警告，或是disable按鈕
* 導入URL：https://{domain}/contact/SUPPLIER?contactType=PRODUCT&supplierIds%5B[供應商ID]%5D=[語系ID]
* [參數] 請參見 [頁面欄位說明 H-46-07 checkbox](#C_H-46-07_1)
* e.g.:https://www.taiwantrade.com/contact/SUPPLIER?contactType=SUPPLIER&supplierIds%5B601090%5D=42&supplierIds%5B601090%5D=42
2. Compare：帶入勾選項目，導入[H-47 我的最愛(SUPPLIER)比較頁](https://hackmd.io/_wOqkJP5TneUkKDv3icv6Q)
* [多語標籤](#多語標籤): compare
* 機制：可複選但至少要選擇2筆最愛供應商，且必須小於`CompareLimit`(目前是20)，否則跳出警告，或是disable按鈕
* 導入URL：https://{domain}/favoriteSuppliercompare
* 方法：POST
* Form (x-www-form-urlencode):
* favoriteType=SUPPLIER
* rowIds=[供應商ID]
* rowIds=[供應商ID]
* rowIds=...
* [參數] 請參見 [頁面欄位說明 H-46-07 checkbox](#C_H-46-07_1)
* e.g.： [POST] https://www.taiwantrade.com/favoriteSuppliercompare
* favoriteType=SUPPLIER
* rowIds=601090
* rowIds=169225
3. Subsrcibe：導入[URI-J-05~08 電子報訂閱(SupplierAlert)](https://hackmd.io/MxreXOYmTUys_YNE2JGaPQ)
* [多語標籤](#多語標籤): ez_subscribe
* 機制：可複選但至少要選擇1筆最愛供應商，否則跳出警告，或是disable按鈕
* 導入URL：https://{domain}/taiwantradeAlert/subscribeCompany?supplierIds=[供應商ID],...
* [參數] 請參見 [頁面欄位說明 H-46-07 checkbox](#C_H-46-07_1)
* e.g.： https://www.taiwantrade.com/taiwantradeAlert/subscribeCompany?supplierIds=601090,169225

4. Remove：帶入勾選項目，刪除我的最愛(SUPPLIER)
* [多語標籤](#多語標籤): remove
* 機制：可複選但至少要選擇1筆最愛供應商，否則跳出警告，或是disable按鈕
* 使用：呼叫js method，參考[規格](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%88%AA%E9%99%A4Favorite%E8%B3%87%E6%96%99-API)

            window.headerEntry.removeMyFavorites([供應商ID],'SUPPLIER',[語系ID],[供應商URL])

* [參數] 請參見 [頁面欄位說明 H-46-07 checkbox](#C_H-46-07_1)

<div id="B_H-46-06"></div>

* H-46-06
* Show：
* [多語標籤](#多語標籤): show
* API欄位：[show-by]
* 選項：
* All
* API值：(不輸入或空值)
* [多語標籤](#多語標籤): all
* Not contacted yet
* API值：false
* [多語標籤](#多語標籤): notcontactedyet
* contacted
* API值：true
* [多語標籤](#多語標籤): contacted
* Sort By：
* API欄位：[sort-by]
* 選項：
* Added Time New to Old
* API值：(不輸入或空值) 或 aNtO
* [多語標籤](#多語標籤): addedtimenewtoold
* Added Time Old to New
* API值：aOtN
* [多語標籤](#多語標籤): addedtimeoldtonew
* Contact Time New to Old
* API值：cNtO
* [多語標籤](#多語標籤): contacttimenewtoold
* Contact Time Old to New
* API值：cOtN
* [多語標籤](#多語標籤): contacttimeoldtonew

* H-46-07
* 透過 頁面URL參數(page & rows) 和 H-46-06(或09) 和 H-46-08 所選的選項，帶入 [L01](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API) 取得Favorite資料
* 列表項目對應參考：[頁面欄位說明 H-46-07](#H-46-07)

<div id="B_H-46-08"></div>

* H-46-08
* Preview:
* [多語標籤](#多語標籤): previous
* API欄位：[page]
* API值：當前頁數-1
* 總頁數>當前頁數+1，按鈕效果disable
* 頁數：
* API欄位：Rows：每頁幾筆
* API值：頁數數字
* Next：
* [多語標籤](#多語標籤): next
* API欄位：[page]
* API值：當前頁數+1
* 總頁數<當前頁數+1，按鈕效果disable
* H-46-09
* 同 H-46-05
* H-46-10
* [多語標籤](#多語標籤): `yourcansendupto` + ContactLimit(目前是20) +` contactsatonce` + '(' + [checkbox選取筆數] + ')'

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

#### H-46-07
透過 [頁面URL參數(page & rows)](#原頁面-URL-解析) 和 [頁面區塊說明 H-46-06(或09)](#B_H-46-06) 和 [頁面區塊說明 H-46-08](#B_H-46-08) 所選的選項參數，帶入 [L01 - 取得Favorite資料](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#L01-%E5%8F%96%E5%BE%97Favorite%E8%B3%87%E6%96%99-API)

window.headerEntry.getMyFavoritesByCondition('SUPPLIER',[show-by],[order-type],[page],20)

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


<div id="C_H-46-07_1"></div>

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

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

2. 公司名稱：
- [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：(API欄位有值才顯示此項目)
- [多語標籤](#多語標籤): `businesstype`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`businessType`

4. Year Established：(API欄位有值才顯示此項目)
- [多語標籤](#多語標籤): `yearestablished`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`createYear`

5. No. of Employee：(API欄位有值才顯示此項目)
- [多語標籤](#多語標籤): `employee`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`employee`

6. Certification：(API欄位有值才顯示此項目)
- [多語標籤](#多語標籤): `certification`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`certifications`

7. Location：(API欄位有值才顯示此項目)
- [多語標籤](#多語標籤): `location`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`location`

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

9. 認證標章
- e-Portal Supplier
- title(mouseenter顯示文字)：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：e-Portal Supplier for the +`epYears` + nd year
- 文字：[API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)： +`epYears` + th year
- Taiwan Trade Shows(API欄位`showTTScert`有值且為1：)
- img alt：Taiwan International Trade Shows' Exhibitor
- img src：
- Advanced Cert(API欄位`thirdCertificationCount`有值且大於0：)
- img src：

10. Added(加入日期)：
- [多語標籤](#多語標籤): `added`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E5%85%AC%E5%8F%B8%E6%AC%84%E4%BD%8D)：`lastContactTime`有值 ? `lastContactTime` : `createTime`

## 頁面邏輯說明

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

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

### 導頁

載入頁面時，在 [頁面區塊說明 H-46-01](#B_H-46-01)載入後，

呼叫 [L01 - 取得會員資料](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?both#L01-%E5%8F%96%E5%BE%97%E6%9C%83%E5%93%A1%E8%B3%87%E6%96%99-API) 回傳欄位`companyType`，如果會員身份是BU或ALL，則導入BU 我的最愛產品
* BU：https://bu.taiwantrade.com/favSuList

否則，繼續此頁(僅供應商SU身份，或是未登入狀態)

* FRONT：https://www.taiwantrade.com/favoriteSupplierlist

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

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

General類的頁面代碼 指定為 FAVORITES_SUPPLIER_LIST

## 附註
### 多語標籤

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

以下列出此頁面所需的所有`code`：

頁面區塊說明
- watchlist
- products
- suppliers
- supplierlist
- contactsupplier
- compare
- ez_subscribe
- remove
- show
- all
- notcontactedyet
- contacted
- addedtimenewtoold
- addedtimeoldtonew
- contacttimenewtoold
- contacttimeoldtonew
- previous
- next
- yourcansendupto
- contactsatonce
頁面欄位說明
- companyName
- businesstype
- yearestablished
- employee
- certification
- location
- mainmarkets
- added