# G-18 all-category／A to Z
> [name=JasonWu]

###### tags: `G系統功能頁`

## API 清單
No | API | Desc | 執行順序 | 執行條件 | 參考
---|----------|---------------------|----------|--------------------|--------
1 | [URI-A-02](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) | 多語標籤 | 1 | page init |
2 | [URI-G-18](https://hackmd.io/m--zWYhNT7SAskZVnaYUhg) | all-category／A to Z | 1 | page init |

## 頁面相關路徑
- 無

## 原頁面網址
- https://www.taiwantrade.com/categories-view/all-category.html

## 頁面輸入 URL 解析
- 依照分類顯示
- /categories-view/all-category.html
- 依照字母順序顯示
- /categories-view/atoz.html

## 頁面說明
- 依照分類顯示
- [10/20補充]請幫忙補上非標準TaitraCode的自定義代碼的判斷方式與說明
- 呼叫 api 時，增加 classifyDefine 區塊，該區塊紀錄有二碼，但是沒有對應的四碼與六碼的資料
- 符合只有二碼，但是沒有四碼六碼的 classify2 資料，從原本的 classify2 區塊搬移到 classifyDefine 中

- 依照字母順序顯示

### 頁面區塊說明
- 共用Header Service元件, 參考[`L01`](https://docs.google.com/spreadsheets/d/1FfU1adulMCzdWNQNjagsm5rHYhokRwhKfzY-Lurvw9Q/edit#gid=1382704913)

- G-18-01
- 麵包屑，請參考 [G-18-01](#麵包屑)
- G-18-02
- 頁面標題，請參考 [G-18-02](#頁面標題)
- G-18-03
- 頁面 tab，請參考 [G-18-03](#頁面tab)
- 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/m--zWYhNT7SAskZVnaYUhg#%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/m--zWYhNT7SAskZVnaYUhg#%E9%82%8F%E8%BC%AF 的 classify 需求
- 客戶希望 classify 類的上方，同樣也有對應的跳轉目錄，參考 G-18-05 樣式
- 對應圖示如下
- 透過解析 classify2，顯示對應的跳轉項目
- 點選 classify2 的項目，會跳轉到對應的 classify2 區塊

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

#### 依照字母順序內容
- 顯示邏輯
- 參考 https://hackmd.io/m--zWYhNT7SAskZVnaYUhg#%E8%A6%8F%E6%A0%BC1 所回傳的 json 內容，取得 atoz 的 array
- 06-01 顯示 {atoz.firstChar}，如果 {firstChar = 上一筆的 firstChar}，那就將這一筆加入同一個 firstChar 的區塊
- 06-02，依次顯示 {atoz.title} 項目，點選的 url 為 {atoz.url}
- 以 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=" + 顯示名稱(移除特殊符號後的名稱)

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