H-46 我的最愛 Supplier 列表頁

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來處理：

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

API 清單

No	API	Desc	執行順序	執行條件	參考
1	L01	取得會員資料	1	page init	無
2	URI-A-02	prepare 多語標籤	2	page init	附註-多語標籤
3	L01	取得Favorite資料(特定條件篩選)	2	page init	無
4	L01	刪除Favorite資料	None	on remove	無
5	URI046	SEO資料	2	page init	附註-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資料 )
  • rows：
    • API欄位：[row] (L01 - 取得Favorite資料 )

頁面解說圖

頁面區塊說明

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

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

• H-46-05
  

  1. Contact Supplier：帶入勾選項目，導入 H46A Contact Us(SUPPLIER)頁

     • 多語標籤: contactsupplier
     • 機制：可複選但至少要選擇1筆最愛供應商，且必須小於ContactLimit(目前是20)，否則跳出警告，或是disable按鈕
     • 導入URL：https://{domain}/contact/SUPPLIER?contactType=PRODUCT&supplierIds%5B[供應商ID]%5D=[語系ID]
       • [參數] 請參見 頁面欄位說明 H-46-07 checkbox
       • e.g.:https://www.taiwantrade.com/contact/SUPPLIER?contactType=SUPPLIER&supplierIds[601090]=42&supplierIds[601090]=42

  2. Compare：帶入勾選項目，導入H-47 我的最愛(SUPPLIER)比較頁

     • 多語標籤: 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
       • e.g.： [POST] https://www.taiwantrade.com/favoriteSuppliercompare
         • favoriteType=SUPPLIER
         • rowIds=601090
         • rowIds=169225

  3. Subsrcibe：導入URI-J-05~08 電子報訂閱(SupplierAlert)

     • 多語標籤: ez_subscribe
     • 機制：可複選但至少要選擇1筆最愛供應商，否則跳出警告，或是disable按鈕
     • 導入URL：https://{domain}/taiwantradeAlert/subscribeCompany?supplierIds=[供應商ID],…
       • [參數] 請參見 頁面欄位說明 H-46-07 checkbox
       • e.g.： https://www.taiwantrade.com/taiwantradeAlert/subscribeCompany?supplierIds=601090,169225

  4. Remove：帶入勾選項目，刪除我的最愛(SUPPLIER)

     • 多語標籤: remove
     • 機制：可複選但至少要選擇1筆最愛供應商，否則跳出警告，或是disable按鈕
     • 使用：呼叫js method，參考規格
       ​​​​​​​​​​​​window.headerEntry.removeMyFavorites([供應商ID],'SUPPLIER',[語系ID],[供應商URL])
       

     • [參數] 請參見 頁面欄位說明 H-46-07 checkbox

• 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 取得Favorite資料
  • 列表項目對應參考：頁面欄位說明 H-46-07

• 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) 和 頁面區塊說明 H-46-06(或09) 和 頁面區塊說明 H-46-08 所選的選項參數，帶入 L01 - 取得Favorite資料

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

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

1. checkbox：

   • API欄位：id 和 languageId
     • 在 區塊 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欄位：companyName
   • 超連結：
     • API欄位：url

3. Business Type：(API欄位有值才顯示此項目)

   • 多語標籤: businesstype
   • API欄位：businessType

4. Year Established：(API欄位有值才顯示此項目)

   • 多語標籤: yearestablished
   • API欄位：createYear

5. No. of Employee：(API欄位有值才顯示此項目)

   • 多語標籤: employee
   • API欄位：employee

6. Certification：(API欄位有值才顯示此項目)

   • 多語標籤: certification
   • API欄位：certifications

7. Location：(API欄位有值才顯示此項目)

   • 多語標籤: location
   • API欄位：location

8. Main Export Market：(API欄位有值才顯示此項目)

   • 多語標籤: mainmarkets
   • API欄位：mainMarket

9. 認證標章

   • e-Portal Supplier
     • title(mouseenter顯示文字)：
       • API欄位：e-Portal Supplier for the +epYears + nd year
     • 文字：API欄位：
       +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欄位：lastContactTime有值 ? lastContactTime : createTime

頁面邏輯說明

請見 頁面解說圖 頁面欄位說明 各欄說明

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

導頁

載入頁面時，在 頁面區塊說明 H-46-01載入後，

呼叫 L01 - 取得會員資料 回傳欄位companyType，如果會員身份是BU或ALL，則導入BU 我的最愛產品

• BU：https://bu.taiwantrade.com/favSuList
  
  

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

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

SEO資料

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

參考 API URI046

General類的頁面代碼 指定為 FAVORITES_SUPPLIER_LIST

附註

多語標籤

需要多語標籤，請參考下圖圖示所表示的參數code值 透過 多語標籤 API 取得翻譯名稱。
取得後，請參考頁面欄位說明或是以下圖示，填入所需的標籤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