H-46 我的最愛 Supplier 列表頁

# 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://i.imgur.com/LHawwM7.png) - https://www.taiwantrade.com/favoriteSupplierlist?page=1&rows=2 ![](https://i.imgur.com/pmcHj97.png) ## 原頁面 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 ![](https://i.imgur.com/IrYpfHH.png) <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 ![](https://i.imgur.com/W5793Fw.png) 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 ![](https://i.imgur.com/5ncpBFk.png) * 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 ![](https://i.imgur.com/Gu9gXXn.png) * 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 ![](https://i.imgur.com/5keESQY.png) * [多語標籤](#多語標籤): `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欄位與多語標籤如下： ![](https://i.imgur.com/2xVoZQ6.png) <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)： ```=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)： ![](https://i.imgur.com/A6XVjOo.png)+`epYears` + th year - Taiwan Trade Shows(API欄位`showTTScert`有值且為1：) - img alt：Taiwan International Trade Shows' Exhibitor - img src：![](https://i.imgur.com/ieyND00.png) - Advanced Cert(API欄位`thirdCertificationCount`有值且大於0：) - img src：![](https://i.imgur.com/CDp7GGR.png) 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 ![](https://i.imgur.com/BYICPHB.png) 否則，繼續此頁(僅供應商SU身份，或是未登入狀態) * FRONT：https://www.taiwantrade.com/favoriteSupplierlist ![](https://i.imgur.com/LHawwM7.png) ### 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

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.