Try   HackMD

G-18 all-category/A to Z

JasonWu

tags: G系統功能頁

API 清單

No API Desc 執行順序 執行條件 參考
1 URI-A-02 多語標籤 1 page init
2 URI-G-18 all-category/A to Z 1 page init

頁面相關路徑

原頁面網址

頁面輸入 URL 解析

  • 依照分類顯示
    • /categories-view/all-category.html
  • 依照字母順序顯示
    • /categories-view/atoz.html

頁面說明

  • 依照分類顯示

  • [10/20補充]請幫忙補上非標準TaitraCode的自定義代碼的判斷方式與說明


    • 呼叫 api 時,增加 classifyDefine 區塊,該區塊紀錄有二碼,但是沒有對應的四碼與六碼的資料
      • 符合只有二碼,但是沒有四碼六碼的 classify2 資料,從原本的 classify2 區塊搬移到 classifyDefine 中
  • 依照字母順序顯示

頁面區塊說明

  • 共用Header Service元件, 參考L01

  • G-18-01

  • G-18-02

  • G-18-03

  • G-18-04

    • 依照分類顯示,請參考 G-18-04
  • G-18-05

    • 依照字母順序目錄,請參考 G-18-05
  • G-18-06

    • 依照字母順序內容,請參考 G-18-06

頁面欄位說明

麵包屑

  • 顯示邏輯
    • 固定顯示 Home > All Categories
    • Home 為多語,{lang.home}
      • Home 會加上連結,點選後回到首頁
    • All Categories 為多語,{lang.allcategories}
  • 操作邏輯

頁面標題

  • 顯示邏輯
    • 固定顯示 All Categories
    • All Categories 為多語,{lang.allcategories}
  • 操作邏輯

頁面tab

  • 顯示邏輯
    • 固定顯示 Classification 與 A-Z 兩個 tab 按鈕
    • Classification 為多語,{lang.classufy}
    • A-Z 沒有多語,就是顯示 A-Z
    • 畫面載入時,判斷輸入網址來決定是 Classification 或是 A-Z
    • 如果是 Classification,api 參數如下
      • /category_view/classify/2
    • 如果是 A-Z,api 參數如下
      • /category_view/atoz/2
  • 操作邏輯
    • 如果是 Classification,點選 A-Z 時呼叫 api,並解析回傳結果以及顯示對應的頁面
    • 如果是 A-Z,點選 Classification 時呼叫 api,並解析回傳結果以及顯示對應的頁面
    • 已經呼叫過,不用再重新呼叫 api,直接切換顯示即可

依照分類顯示

  • 顯示邏輯

    • 參考 https://hackmd.io/mzWYhNT7SAskZVnaYUhg#%E8%A6%8F%E6%A0%BC1 所回傳的 json 內容,取得 classify2, classify4, classify6 的 array
    • 03-01 部分顯示 {classify2.title},點選的 url 為 {classify2.url}
    • 03-02 部分顯示 classify4 中,{classify4.parentCateId} = {03-01 中 classify2.id 的資料},依次顯示 {classify4.title} 項目,點選的 url 為 {classify4.url}
    • 03-03 部分顯示 classify6 中,{classify6.parentCateId} = {03-02 中 classify4.id 的資料},依次顯示 {classify6.title} 項目,點選的 url 為 classify6.url
    • 最後顯示 classifyDefine 的資料,這類資料本身是與 classify2 的資料結構相似,parentId = null,另外不會有 classify4 與 classify6 的資料
    • 以 uat www.ttstaging.com.tw 為例,顯示的 url 範例如下:https://www.ttstaging.com.tw/products/search.html?word=*&cate=5866&type=product&style=gallery&cateName=aluminum-bar-tube
      • url 參考條列頁,顯示 "word=*&cate=" + 分類 catalog id + "&type=product&style=gallery&cateName=" + 顯示名稱(移除特殊符號後的名稱)
      • AEM的產品搜尋URL:https://www.ttstaging.com.tw/products/search.html?
        API的URL欄位前方要串AEM的產品搜尋網址,才會正確導向產品搜尋結果。
  • 相關邏輯

    • 參考 https://hackmd.io/mzWYhNT7SAskZVnaYUhg#%E9%82%8F%E8%BC%AF 的 classify 需求
    • 客戶希望 classify 類的上方,同樣也有對應的跳轉目錄,參考 G-18-05 樣式
    • 對應圖示如下
    • 透過解析 classify2,顯示對應的跳轉項目
    • 點選 classify2 的項目,會跳轉到對應的 classify2 區塊

依照字母順序目錄

  • 顯示邏輯
    • 參考 https://hackmd.io/mzWYhNT7SAskZVnaYUhg#%E8%A6%8F%E6%A0%BC1 所回傳的 json 內容,取得 atoz 的 array
    • G-18-05,分析 atoz 中所有有存在的 {atoz.firstChar},列在清單中
  • 操作邏輯
    • 點選 G-18-05 首字母連結,會跳轉到對應的首字母區塊

依照字母順序內容

多語清單

區塊 多語代碼 說明
麵包屑 lang.home 麵包屑 Home
標題內容 lang.allcategories All Categories
tab 內容 lang.classufy Classify