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

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

## 舊功能網址
- https://www.ttstaging.com.tw/product/1893926

## 相關示意圖

## 頁面顯示相關(呼叫 API，取得頁面樣式)
- SeoMeta 資訊
- 透過 api 取得頁面所需的 meta 資訊
- 麵包屑
- 透過 api 取得麵包屑
- 型錄資訊
- 透過 api 取得產品名稱, 型號資訊等資訊
- 型錄多媒體
- 透過 api 取得型錄大圖, 型錄小圖, 3D, 360, Video 等資訊
- tab 區塊，切換顯示
- 固定內容，未販售只顯示 "Product Detail" 與 "Company Profile" 兩個 tab
- 型錄 Detail 資訊
- 參考型錄資訊
- 廠商資訊
- 透過 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 推薦
- 公司認證燈箱效果
- 公司工廠圖片燈箱效果
- 判斷是否有登入，來決定顯示那些廠商資訊
- 聯繫廠商
- 推薦型錄
- 警語
- 檢查型錄相關資訊，決定是否要顯示警語

## 頁面顯示相關邏輯(呼叫 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

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

### 聯繫廠商
- 參考文件 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

## 頁面操作相關邏輯(頁面按鈕、點選相關邏輯)
### 型錄資訊
- 顯示畫面
- 解析 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 區塊，切換顯示
- 非販售時，固定顯示兩個 tab
- Product Detail
- Company Profile
- 效果如下圖
- 一開始設定為 Product Detail
- 點選 Company Profile 時，隱藏 Product Detail 區塊
- 第一次點選 Company Profile 時，透過 api 抓取 Company Profile，如果抓過了，不需要重抓，切換顯示區塊即可

### 型錄 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 }} // 名片圖片說明
}

### 聯繫廠商
- 參考文件 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

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