# B-6 販售產品詳細頁
> [name=JasonWu]

###### tags: `CP頁`

------------------------------------------------------------------------

## API 清單

No | API | Desc | 執行順序 | 執行條件 | 參考
---|----------|---------------------|----------|--------------------|--------
1 | URI-O-01 | 取得多語 label 名稱 | 1 | page init | URI-054
2 | URI-B-03 | 取得型錄相關資料 | 1 | page init | 主要 api
3 | URI-O-19 | 取得推薦相關型錄 | 2 | page init | 相關輸入條件會與 URI-B-03 有關
4 | URI-B-04 | 取得廠商相關資料 | 3 | 點選廠商 tab 時 | 呼叫廠商 api
5 | URI-O-18 | 取得販售相關資訊 | 3 | 切換販售運費國家時 | 無

## 原頁面網址
- https://www.ttstaging.com.tw/product/1893926

## 頁面輸入 URL 解析
- 進入頁面方式有兩種
- /product/{id}
- 範例 : https://www.ttstaging.com.tw/product/1893926
- id : 型錄 id，為純數字
- /product/{safe-name}-{id}.html
- 範例 : https://www.ttstaging.com.tw/product/tdk-blu-ray-dl-4x-50gb-809803.html
- safe-name : 型錄名稱，為純文字，且型錄名稱會將英文轉為小寫，空白、特殊符號等字元替換為 - 號，例如 型錄名稱 為 **TDK Blu Ray DL 4X 50GB** 將會轉為 **tdk-blu-ray-dl-4x-50gb**
- id : 型錄 id，為純數字
- id 為主要參數，會應用在後面的 api 中

## 相關示意圖

## 頁面顯示相關(呼叫 API，取得頁面樣式)
- SeoMeta 資訊
- 透過 api 取得頁面所需的 meta 資訊
- 麵包屑
- 透過 api 取得麵包屑
- 型錄資訊
- 透過 api 取得產品名稱, 型號資訊等資訊
- 有販售時，需要額外顯示金額與販售相關資訊
- 型錄多媒體
- 透過 api 取得型錄大圖, 型錄小圖, 3D, 360, Video 等資訊
- tab 區塊，切換顯示
- 固定內容，販售顯示 "Product Detail", "Company Profile", "Shipping & Packaging", "Payment Terms", "Return Policy" 五個 tab
- 前兩項是一定會出現，後三項依照 api 回傳的 json 判斷，如果回傳的是空內容，tab 就不要顯示
- 型錄 Detail 資訊
- 參考型錄資訊
- 廠商資訊
- 透過 api 取得廠商相關資料
- 運費計算 (Shipping & Packaging)
- 透過 api 取得相關資訊
- 相關說明 (Payment Terms)
- 透過 api 取得相關資訊
- 相關說明 (Return Policy)
- 透過 api 取得相關資訊
- 聯繫廠商
- 推薦型錄

## 頁面操作相關(頁面按鈕、點選相關邏輯)
- SeoMeta 資訊
- 麵包屑
- 型錄資訊
- 連結到廠商的 ep 頁面或是 front 公司詳目頁
- 計算相關販售金額
- 採購規格下拉選單載入圖片
- 組合出 RFQ 連結
- Contact Supplier 跳轉
- 型錄 Add to favorite 連結
- 型錄多媒體
- 型錄大圖放大效果
- 型錄大圖 Zoom in 效果
- 型錄小圖捲動效果
- 3D, 360, Video 燈箱效果
- tab 區塊，切換顯示
- 點選切換顯示資料
- 型錄 Detail 資訊
- 切換 Tab 顯示資訊
- 型錄認證燈箱效果
- 廠商資訊
- 連結到廠商的 ep 頁面或是 front 公司詳目頁
- 廠商 Add to favorite
- 廠商 Other Products 推薦
- 公司認證燈箱效果
- 公司工廠圖片燈箱效果
- 判斷是否有登入，來決定顯示那些廠商資訊
- Shipping & Packaging
- 切換相對應國家、區域資訊時，會再次發 request 取得對應的結果
- 更新 Quantity 的時候，重新計算金額
- 沒有相關寄送日期資訊時的顯示
- Payment Terms
- Return Policy
- 聯繫廠商
- 推薦型錄
- 警語
- 檢查型錄相關資訊，決定是否要顯示警語

## 頁面顯示相關邏輯(呼叫 API，取得頁面樣式)
### SeoMeta 資訊
- 之前相關資訊放在 xml 中傳遞
- 後續 html meta tag 取用
- 新功能透過 api 取值
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA#meta

### 麵包屑
- 參考現有顯示方式
- 新功能透過 api 取值
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA#%E9%BA%B5%E5%8C%85%E5%B1%91

### 型錄資訊
- 參考現有顯示方式，主要分兩段顯示相關資料
- 主要資訊
- 詳目資訊
- 新功能透過 api 取值
- - 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA#%E5%9E%8B%E9%8C%84%E8%B3%87%E8%A8%8A

### 型錄多媒體
- 參考現有顯示方式
- 需要有一個 Enlarge 按鈕，點選後會顯示瀏覽效果
- 新功能透過 api 取值
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA#%E5%9E%8B%E9%8C%84%E5%A4%9A%E5%AA%92%E9%AB%94

### tab 區塊，切換顯示
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA?view#%E8%B2%A9%E5%94%AE%E7%9B%B8%E9%97%9C
- 如果有 shippingInfo，顯示 Shipping & Packaging tab
- 如果有 paymentTermInfo，顯示 Payment Terms tab
- 如果有 returnPolicyInfo，顯示 Return Policy tab
- 點選 Shipping & Packaging tab 時，需要呼叫 API
- 一開始會取得預設的國家與區域代碼
- 呼叫 shipping & packaging API，取得對應的國家清單、區域清單、以及運費內容
- 參考文件 https://hackmd.io/03JtG4EZT8aAqqnddSgWTQ?view

### 廠商資訊
- 未登入
- 已登入
- 解析 json 顯示資料
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#%E5%85%AC%E5%8F%B8%E8%81%AF%E7%B5%A1%E8%B3%87%E8%A8%8A

### Shipping & Packaging
- 參考現有顯示方式
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA?view#%E9%81%8B%E8%B2%BB%E8%B3%87%E6%96%99
- 該 api 會取得預設的運送國家代碼與區域代碼
- 畫面中 Quantity 的單位，請使用 型錄資訊 中的 unitName

### Payment Terms
- 參考現有顯示方式
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA?view#%E4%BB%98%E6%AC%BE%E5%96%AE%E4%BD%8D

#### 邏輯
- 解析 code，包含以下不同類型，依照類型顯示圖片
- idealez_paypal //Paypal
- idealez_alipay //支付寶
- idealez_card //信用卡
- idealez_tenpay //財付通
- idealez_unionpay //銀聯卡
- idealez_hitrust //網際威信
- idealez_card_ae //信用卡(AE)
- idealez_googlepay //google pay
- idealez_applepay //apple pay

### Return Policy
- 參考現有顯示方式
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA?view#%E4%BB%98%E6%AC%BE%E5%96%AE%E4%BD%8D

### 聯繫廠商
- 參考文件 https://hackmd.io/FDa_t2QwRxKoBimH6mW4qQ

### 推薦型錄
- 參考相關文件 https://hackmd.io/-912y5bWSBCAmzJKdTP-ZA?view#%E7%9B%B8%E9%97%9C%E7%A4%BA%E6%84%8F%E5%9C%96

## 頁面操作相關邏輯(頁面按鈕、點選相關邏輯)
### 型錄資訊
- 顯示畫面
- 解析 json，顯示對應的資料
- 連結到廠商的 ep 頁面或是 front 公司詳目頁
- 畫面的 More About This Product 的連結
- 如果 json 中有 ep url 才顯示，點選後另開新視窗，連結 ep url
- 組合出 RFQ 連結
- 畫面中的 Request for Quotation
- 點選後另開新視窗，連結到 rfq 功能，該連結是固定的，目前的連結是 https://www.ttstaging.com.tw/latest-price/step1?productId=1895999
- Contact Supplier 跳轉
- 畫面中 Contact Supplier 按鈕
- 點選後，畫面捲動到下方的 Contact Supplier 區塊
- 型錄 Add to favorite 連結
- 畫面中 Add to favorites
- 如果該型錄尚未被收錄到 favorite 中，顯示 Add to favorites
- 如果已經收錄，顯示 Go to favorites
- Add to favorites 跟 Go to favorites 的部分參考條列頁的同一段邏輯

### 型錄多媒體
- 顯示畫面
- 解析 json，顯示對應的資料
- 型錄大圖放大效果
- 點選 enlarge，會顯示以下的燈箱
- 目前顯示的效果是 jquery.smoothZoom，頁面需要載入 jquery.smoothZoom.css 與 jquery.smoothZoom.js
- 相關寫法

$('.zoom_thumbnails').find('li a').each(function () {
    $(this).bind('click', {
        src: $(this).attr('href')}, 
        function (e) {
            $('.zoom_thumbnails').find('li a').removeClass();
            $(this).addClass('current');
            $('#zoom_container').off('smoothZoom');
            $('#zoom_container').smoothZoom('destroy').smoothZoom({
                image_url: e.data.src
            });
            return false;
        });
}).eq(0).trigger('click');

- 型錄大圖 Zoom in 效果
- 滑鼠移動到大圖上，會有 Zoom in 的效果
- 目前顯示的效果是 jquery.elevateZoom.cover，頁面需要載入 jquery.elevateZoom.cover.js
- 相關寫法

$('#product-slider-gallery-for').off('beforeChange');
$('#product-slider-gallery-for').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.zoomContainer').remove();
    $('#zoom' + currentSlide).removeData('elevateZoom');
    $('#zoom' + currentSlide).removeData('zoomImage');

    if ($(window).width() > 768) {
        var naturalWidth = $('#zoom' + nextSlide).prop('naturalWidth');
        var naturalHeight = $('#zoom' + nextSlide).prop('naturalHeight');

        if (naturalWidth <= 360 && naturalHeight <= 360) {
        } else {
            $('#zoom' + nextSlide).elevateZoom({
                responsive: true,
                onShow: function() {
                    $('#product-slider-gallery-for').slick('slickPause');
                },
                onDestroy : function() {
                    $('#product-slider-gallery-for').slick('slickPlay');
                }
            });
        }
    }
});

- 型錄小圖捲動效果
- 小圖捲動的圖示，先顯示 3D，然後是 360，最後是 Video
- 接下來顯示小圖圖片
- 點選小圖圖片，將上面的圖替換為對應的大圖
- 小圖捲動效果如下圖
- 目前型錄捲動的效果是 slick slide，頁面需要載入 slick-utils.js
- 相關寫法

$('.pdPhotoShow').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    speed: 600,
    fade: true,
    arrows: false,
    dots: false,
    mobileFirst:true,
    asNavFor:'.pdPhotoNav',
    rtl: false,
    onAfterChange:function(slickSlider,i){
        $('.pdPhotoNav .slick-slide').removeClass('slick-active');
        $('.pdPhotoNav .slick-slide').eq(i).addClass('slick-active');
    }
});

- 3D, 360, Video 燈箱效果
- 點選 3D, 360, Video 的時候，透過燈箱顯示對應的 url，該 url 透過 iframe 顯示在燈箱區塊中
- 點選 3D 與 360 的效果如下圖
- 點選 Video 的效果如下圖
- 當打開燈箱，後方會有 mask 效果，點選 mask 的時候，關閉燈箱
- 燈箱右上角提供 X 按鈕，點選後關閉燈箱
- Video 點選後，可以撥放影片

### tab 區塊，切換顯示
- 效果如下圖
- 一開始設定為 Product Detail
- 點選其中一個區塊時，隱藏其餘區塊

### 型錄 Detail 資訊
- 型錄認證燈箱效果
- 參考相關認證燈箱效果 https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w

### 廠商資訊
- 連結到廠商的 ep 頁面或是 front 公司詳目頁
- 如果該公司有 ep 相關頁面，點選連結會開啟新視窗，連結到 ep 首頁
- 如果該公司沒有 ep 相關頁面，會連結到 front company cp 頁
- 廠商 Add to favorite
- 如果該公司沒有加入過 favorite，顯示 Add to favorite
- 如果該公司有加入過 favorite，顯示 Go to favorite
- 參考現有 favorite 相關邏輯
- 廠商 Other Products 推薦
- 解析 json 產出 Other Products 相關資訊
- 如果點選 Product，會開啟新視窗連結到該型錄的詳目頁
- All Products 按鈕也是用相同的邏輯顯示，但 All Products 不會有圖片跟下面的販售資訊，只會有名稱跟 url 而已，點選後會連結到對應的查詢頁面
- 公司相關認證燈箱效果
- 請參考 Product Detail 處的燈箱效果
- 由於認證分為第三方認證、公司認證，型錄認證，其中第三方認證沒有燈箱，只有公司認證與型錄認證有燈箱
- 公司認證與型錄認證都有 All Certifications，參考上面的 All Products 效果，All Certifications 在 json 中不會有圖片，只有名稱跟 url，點選後會連結到對應的查詢頁面
- 公司工廠圖片燈箱效果
- 公司工廠，先顯示影片，再顯示圖片
- 解析 json 內容後，如果是影片，提供撥放按鈕，可以直接撥
- 如果是圖片，先顯示小圖，點選小圖後，開啟燈箱，顯示大圖
- 需有燈箱共同效果
- 燈箱後方有 mask，點選 mask 會關閉燈箱
- 燈箱右上角有 x，點選後關閉燈箱
- 判斷是否有登入，來決定顯示那些廠商資訊
- 沒有登入的畫面
- 有登入的畫面
- 除了 Onwer, Contact Person, Business Phone Number 外，其他欄位的資訊都在 json 中
- 如果有登入，另外發一個新的 ajax request 呼叫 api，回傳對應的上面三個欄位並顯示
- 可參考現有 ep api
- https://hyweb.en.ttstaging.com.tw/ajaxbox/findSecretContact/v2/42/147927

#### 規格
- path : ${TT-API網址}/product/lightbox/contact/{langId}/{cid}
- method : GET

#### Input
Column | Type | Require | Desc
-----------|----------|---------|---------
langId | number | Y | 語系id
cid | number | Y | 公司id

#### 邏輯
- 示意圖中的藍框是名片小圖
- 點選小圖，開啟燈箱，顯示名片大圖
- 示意圖中的紅框是聯絡人小圖
- 點選小圖，開啟燈箱，顯示聯絡人大圖
- 開啟燈箱需有共同效果
- 燈箱後方有 mask，點選 mask 會關閉燈箱
- 燈箱右上角有 x，點選後關閉燈箱

#### Output

{
    "owner" : {{ string }}, // owner 名稱
    "contactFullName" : {{ string }}, // Contact Person
    "contactPhoneNumber" : {{ string }}, // Business Phone Number
    "pcContactImgUrl" : {{ string }}, // 聯絡人大圖
    "mobileContactImgUrl" : {{ string }}, // 聯絡人小圖
    "pcContactCardImgUrl" : {{ string }}, // 名片大圖
    "mobileContactCardImgUrl" : {{ string }}, // 名片小圖
    "contactImgTitle" : {{ string }}, // 圖片說明
    "contactCardImgTitle" : {{ string }} // 名片圖片說明
}

### Shipping & Packaging
#### 切換相對應國家、區域資訊時，會再次發 request 取得對應的結果
- 一開始會取得預設的國家與區域代碼
- 呼叫 shipping & packaging API，取得對應的國家清單、區域清單、以及運費內容
- 參考文件 https://hackmd.io/03JtG4EZT8aAqqnddSgWTQ?view

#### 更新 Quantity 的時候，重新計算金額
- 如果設定的是自訂運費，並且有相關的增加每件的金額等資訊時，金額需要依照 Quantity 更換來重新算運費
- customAmount + customOverAmount * quantity
#### 沒有相關寄送日期資訊時的顯示
- 如果有 durationStart 跟 durationEnd
- 顯示 {{ durationStart }} - {{ durationEnd }} days
- 如果只有 durationStart
- 顯示 {{ durationStart }} days
- 如果兩者都沒有
- 顯示 Expected delivery time contact suppliers

### 聯繫廠商
- 參考文件 https://hackmd.io/FDa_t2QwRxKoBimH6mW4qQ

### 推薦型錄
- 參考相關文件 https://hackmd.io/-912y5bWSBCAmzJKdTP-ZA?view#%E9%A0%81%E9%9D%A2%E6%93%8D%E4%BD%9C%E7%9B%B8%E9%97%9C%E9%82%8F%E8%BC%AF%E9%A0%81%E9%9D%A2%E6%8C%89%E9%88%95%E3%80%81%E9%BB%9E%E9%81%B8%E7%9B%B8%E9%97%9C%E9%82%8F%E8%BC%AF

### 警語
#### 檢查型錄相關資訊，決定是否要顯示警語
- 目前頁面中有數個地方包含 catalogStandardCid 的 api，這些 catalogStandardCid 與是否顯示警語有關，目前條列頁已經有警語相關效果了，套用相同的邏輯，判斷本頁面中所有的 catalogStandardCid 來決定要顯示那些警語