# H-45 我的最愛 Product 比較頁

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


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

## 頁面解說圖

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


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

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

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

* H-45-03

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-45-04 checkbox](#C_H-45-04_1)
* e.g.: https://www.taiwantrade.com/contact/PRODUCT?contactType=PRODUCT&contactType=PRODUCT&productIds%5B2045421%5D=42&productIds%5B2295801%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-45-04 checkbox](#C_H-45-04_1)
* e.g.： https://www.taiwantrade.com/taiwantradeAlert/subscribeCompany?supplierIds=65,169225

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

* H-45-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) 取得Compare產品資料
* 列表項目對應參考：[頁面欄位說明 H-45-04](#H-45-04)
* 頁面效果，除了標題欄，每次以有左右滾動(Scroll)查看的效果顯示三欄。

* H-45-05
* 同 H-45-03

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

#### H-45-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('PRODUCT',[rowIds])

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


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

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

            <input type="checkbox" class="selected-product" data-company-id="65" data-language-id="42" value="1988699" name="pdid2">

2. Product Photo：
- 標題欄 : Product Photo
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`allPictures`
- 左右滾動(Scroll)查看，一次一張圖 (目前舊系統會重複顯示一輪，因此5張圖就會顯示1~5+1~5共10張)
- img src:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`allPictures`[i].`productPicture200`
- 若url無路徑則顯示一張空白圖片例如
- img title:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`allPictures`[i].`pictureTitle`
- img alt:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`allPictures`[i].`pictureTitle`

3. Product Name：
- 標題欄 [多語標籤](#多語標籤): `productionname`
- [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：
- 標題欄 [多語標籤](#多語標籤): `certification`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`certifications`

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

6. item specifications：
- 標題欄 [多語標籤](#多語標籤): `ez_itemspecifics`
- [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`

7. Key Features：
- 標題欄 [多語標籤](#多語標籤): `keyfeatures`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`descFull`
- more：
- [多語標籤](#多語標籤): `ez_more`
- 超連結：
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`url`

8. Discount：
- 標題欄 [多語標籤](#多語標籤): `ez_discount`
- 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`

9. Free Shipping：
- 標題欄 [多語標籤](#多語標籤): `ez_freeshipping`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`isFreeShipping` 有值且為1：
- 顯示 + [多語標籤](#多語標籤): `ez_freeshipping`

10. Price：
- 標題欄 [多語標籤](#多語標籤): `ez_price`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`quantityRange`
- 依序列出三行一欄表，每張表：
- 第一行(價格區間)：
- [多語標籤](#多語標籤): `ez_quantity`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`quantityRange`[i].`quantityStart` - `quantityRange`[i].`quantityEnd`
- 第二行(區間單價)：
- [多語標籤](#多語標籤): `price`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`quantityRange`[i].`price`
- 第三行(備貨天數)：
- [多語標籤](#多語標籤): `ez_processingtime`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`quantityRange`[i].`prepareDay` + [多語標籤](#多語標籤): `ez_days`
11. Payment method：
- 標題欄 [多語標籤](#多語標籤): `ez_paymentmethod`
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`paymentMethods`
- 依序列出圖片：
- img src:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`paymentMethods`[i].`icon`
- img title:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`paymentMethods`[i].`name`
- img alt:
- [API欄位](https://hackmd.io/D1GVQJmcSKGzdMUT-28Owg?view#%E7%94%A2%E5%93%81%E6%AC%84%E4%BD%8D)：`paymentMethods`[i].`name`

12. 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`

13. checkbox：同1

## 頁面邏輯說明

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

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

### 導頁

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

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

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

General類的頁面代碼 指定為 COMPARE_PRODUCT_LIST

## 附註
### 多語標籤

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

以下列出此頁面所需的所有`code`：
- contactsupplier
- ez_subscribe
- remove
- selectall
- productionname
- certification
- madein
- ez_itemspecifics
- keyfeatures
- ez_more
- ez_discount
- ez_freeshipping
- ez_price
- ez_quantity
- price
- ez_processingtime
- ez_days
- ez_paymentmethod
- ez_minorder