H-44 我的最愛 Product 列表頁

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/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資料 )
  • rows：
    • API欄位：[row] (L01 - 取得Favorite資料 )

頁面解說圖

頁面區塊說明

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

• H-44-01
  • 共用區塊: Header Service元件, 參考A-01 Header元件分析
  • 導頁判斷機制：當登入的使用者是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://{domain}/favoriteSupplierlist
    • 多語標籤: suppliers
    • 括號內數字：代表我的最愛供應商數字，數字等同於個人化計算的最愛供應商數字
• H-44-04
  • Product List
    • 多語標籤: productlist

• H-44-05
  

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

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

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

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

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

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

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

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

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

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

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

1. checkbox：

   • API欄位：productId 和 languageId
     • 在 區塊 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欄位：primaryPicture100
       • 若url無路徑則顯示一張空白圖片例如
         
         
   • img title:
     • API欄位：productName
   • img alt:
     • API欄位：productName

3. 產品名稱：

   • API欄位：productName
   • 超連結：
     • API欄位：url

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

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

5. Made In：(API欄位有值才顯示此項目)

   • 多語標籤: madein
   • API欄位：countryName

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

   • 多語標籤: suppliers
   • API欄位：companyName
   • 超連結：
     • API欄位：companyCpUrl

7. 產品描述：(API欄位descFull有值才顯示此項目)

   • API欄位：descFull
   • more：
     • 標籤： more
     • 動作： 收合為兩行或展開全段落顯示

8. 產品規格：(API欄位specList有值才顯示此項目)

   • API欄位：specList
   • 每個規格一個表：
     • 規格名(標題)：
       • API欄位：specList[i].name
     • 規格值(內容)：
       • 表格每行列出：API欄位：specList[i].items

9. Min. Order：(API欄位minOrder有值才顯示此項目)

   • 多語標籤: ez_minorder
   • API欄位：minOrder + ' ' + unitName

10. 販售價格：

    • API欄位isDiscount無值顯示或不為1：
      • 免運標註：
        • API欄位：isFreeShipping 有值且為1：
          • 顯示
            + 多語標籤: ez_freeshipping
      • 價格：
        • API欄位：$ price / unitName
    • API欄位isDiscount有值且為1：
      • 舊價格：
        • 用刪除號劃掉表示為舊價格
        • API欄位：$ oldPrice / unitName

11. 販售價格(折扣)：(API欄位isDiscount有值且為1，顯示此項目)

    • 折扣：
      • API欄位：discount +
        
    • 折扣剩餘天數：
      • API欄位：discountCountDown
    • 免運標註：
      • API欄位：isFreeShipping 有值且為1：
        • 顯示
          + 多語標籤: ez_freeshipping
    • 價格：
      • API欄位：$ price / unitName

12. Added(加入日期)：

    • 多語標籤: added
    • API欄位：createTime

頁面邏輯說明

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

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

導頁

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

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

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

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

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

SEO資料

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

參考 API URI046

General類的頁面代碼 指定為 FAVORITES_PRODUCT_LIST

附註

多語標籤

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