# H-44 我的最愛 Product 列表頁

> [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/favoriteProductlist


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

## 原頁面 URL 解析
* `${domain}/favoriteProductlist`
* domain: 網域
* `${domain}/favoriteProductlist?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-44-01"></div>

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

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

* H-44-05

1. Contact Supplier：帶入勾選項目，導入 [H44A Contact Us(PRODUCT)頁](https://hackmd.io/07IcP_hKT-eTCAdJ-FgLFg)
* [多語標籤](#多語標籤): contactsupplier
* 機制：可複選但至少要選擇1筆最愛產品，且必須小於`ContactLimit`(目前是20)，否則跳出警告，或是disable按鈕
* 導入URL：https://{domain}/contact/PRODUCT?contactType=PRODUCT&productIds%5B[產品ID]%5D=[語系ID]&productIds...
* [參數] 請參見 [頁面欄位說明 H-44-07 checkbox](#C_H-44-07_1)
* e.g.: https://www.taiwantrade.com/contact/PRODUCT?contactType=PRODUCT&contactType=PRODUCT&productIds%5B2045421%5D=42&productIds%5B2295801%5D=42

2. Compare：帶入勾選項目，導入[H-45 我的最愛(PRODUCT)比較頁](https://hackmd.io/LxZm4SObSISeMEoINEqlFg)
* [多語標籤](#多語標籤): compare
* 機制：可複選但至少要選擇2筆最愛產品，且必須小於`CompareLimit`(目前是20)，否則跳出警告，或是disable按鈕
* 導入URL：https://{domain}/favoriteProductcompare
* 方法：POST
* Form (x-www-form-urlencode):
* favoriteType=PRODUCT
* rowIds=[產品ID]
* rowIds=[產品ID]
* rowIds=...
* [參數] 請參見 [頁面欄位說明 H-44-07 checkbox](#C_H-44-07_1)
* e.g.： [POST] https://www.taiwantrade.com/favoriteSuppliercompare
* favoriteType=PRODUCT
* rowIds=2295801
* rowIds=2045421
3. Remove：帶入勾選項目，刪除我的最愛(PRODUCT)
* [多語標籤](#多語標籤): 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],'PRODUCT',[語系ID],[產品URL])

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

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

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

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

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

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

#### H-44-07
透過 [頁面URL參數(page & rows)](#原頁面-URL-解析) 和 [頁面區塊說明 H-44-06(或09)](#B_H-44-06) 和 [頁面區塊說明 H-44-08](#B_H-44-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('PRODUCT',[show-by],[order-type],[page],20)

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


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

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

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

2. 圖片
- img src:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`primaryPicture100`
- 若url無路徑則顯示一張空白圖片例如
- img title:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`productName`
- img alt:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`productName`

3. 產品名稱：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`productName`
- 超連結：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`url`

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

5. Made In：(API欄位有值才顯示此項目)
- [多語標籤](#多語標籤): `madein`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`countryName`

6. Suppliers：(API欄位`companyName`有值才顯示此項目)
- [多語標籤](#多語標籤): `suppliers`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`companyName`
- 超連結：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`companyCpUrl`

7. 產品描述：(API欄位`descFull`有值才顯示此項目)
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`descFull`
- more：
- 標籤： more
- 動作： 收合為兩行或展開全段落顯示

8. 產品規格：(API欄位`specList`有值才顯示此項目)
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`specList`
- 每個規格一個表：
- 規格名(標題)：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`specList`[i].`name`
- 規格值(內容)：
- 表格每行列出：[API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`specList`[i].`items`

9. Min. Order：(API欄位`minOrder`有值才顯示此項目)
- [多語標籤](#多語標籤): `ez_minorder`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`minOrder` + ' ' + `unitName`

11. 販售價格：
- API欄位`isDiscount`無值顯示或不為1：
- 免運標註：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`isFreeShipping` 有值且為1：
- 顯示 + [多語標籤](#多語標籤): `ez_freeshipping`
- 價格：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：$ `price` / `unitName`
- API欄位`isDiscount`有值且為1：
- 舊價格：
- 用刪除號劃掉表示為舊價格
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：$ `oldPrice` / `unitName`

12. 販售價格(折扣)：(API欄位`isDiscount`有值且為1，顯示此項目)
- 折扣：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`discount` + 
- 折扣剩餘天數：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`discountCountDown`
- 免運標註：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`isFreeShipping` 有值且為1：
- 顯示 + [多語標籤](#多語標籤): `ez_freeshipping`
- 價格：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：$ `price` / `unitName`

13. Added(加入日期)：
- [多語標籤](#多語標籤): `added`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`createTime`

## 頁面邏輯說明

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

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

### 導頁

載入頁面時，在 [頁面區塊說明 H-44-01](#B_H-44-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/favProdList

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

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

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

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

General類的頁面代碼 指定為 FAVORITES_PRODUCT_LIST

## 附註
### 多語標籤

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

以下列出此頁面所需的所有`code`：
- watchlist
- products
- suppliers
- productlist
- contactsupplier
- compare
- remove
- show
- all
- notcontactedyet
- contacted
- addedtimenewtoold
- addedtimeoldtonew
- contacttimenewtoold
- contacttimeoldtonew
- previous
- next
- yourcansendupto
- contactsatonce
頁面欄位說明
- certifications
- madein
- suppliers
- ez_minorder
- ez_freeshipping
- added