C-7 EC公司資料頁

JasonWu

tags: `CP頁`

API 清單

No	API	Desc	執行順序	執行條件	參考
1	URI-A-02	多語標籤	1	page init
2	URI-B-04	取得公司相關資料	1	page init	主要 api
3	URI-C-01	Inquiry Company	1	page init	無
4	URI-C-02	取得燈箱相關資訊	2	點選公司認證開啟燈箱	無
5	URI046	取得 SEO META 資料	4	SEO META 相關內容	無
6	URI-C-03	取得型錄認證清單	點選認證 All certifications	點選取得型錄認證清單	無

頁面相關路徑

原頁面網址

https://tw.taiwantrade.com/company/833510

頁面輸入 URL 解析

進入頁面方式有三種，其中第三種的 old 方法是驗證使用，客戶不會使用
- /company/{id}
  - 範例 : https://www.ttstaging.com.tw/company/147927
  - id : 公司 id，為純數字
- /company/{safe-name}-{id}.html
  - 範例 : https://www.ttstaging.com.tw/company/hyweb-tech-147927.html
  - safe-name : 型錄名稱，為純文字，且型錄名稱會將英文轉為小寫，空白、特殊符號等字元替換為 - 號，例如名稱為 Hyweb Tech 將會轉為 hyweb-tech
  - id : 公司 id，為純數字
- /company/old/{id}
  - 由於之前有一頁式的功能，為了確保舊版樣式提供的連結，之後不會開放，可供驗測驗證使用
  - id : 公司 id，為純數字
id 為主要參數，會應用在後面的 api 中

頁面說明

頁面主要資料皆來自於 URI-B-04
- 公司聯絡資訊區塊中，需要額外判斷登入的狀態，如果前台已經登入，此時 api 回傳的資料會有所不同，這一段需要再討論，看後續呼叫 api 時要如何傳遞登入相關資訊
- api 相關 url 如下：${TT-API網址}/companies/detail/{did}/{id}?userAccessTicket={userAccessTicket}
  - did : domain id，與頁面及版型相關參數，例如英文主頁 did = 2
  - id : 型錄 id，參考 http://www.ttstaging.com.tw/product/1893926 ，其中 "1893926" 就是型錄 id
  - userAccessTicket 為登入者使用者Ticket，AEM 透過 header service 取得 userAccessTicket，如果有傳入，且經過解析後是正常的 ticket，後續 api 就會判斷此次呼叫是有登入的呼叫

頁面區塊說明

SeoMeta 資訊
- 透過 api 取得頁面所需的 meta 資訊
麵包屑
公司基本資料
- 透過 api 取得
公司相關型錄
- 透過 api 取得
公司工廠資料
- 透過 api 取得
公司認證與產品認證
- 透過 api 取得
公司得獎紀錄、大事記
- 透過 api 取得
公司聯絡資訊
- 透過 api 取得
聯繫廠商
警語共用區塊

頁面欄位說明

SeoMeta 資訊

舊版頁面相關資訊透過 xml 傳遞
產出 html 頁面時，需要將相關資訊放入 meta tag 中
~~顯示邏輯~~
- ~~參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#meta1~~
- ~~取得 data 中的 {meta} array~~
- ~~邏輯與格式~~
  - ~~將 array 中的內容依次放入~~
  - ~~格式固定為 <meta name="{meta.name}" content="{meta.content}">~~
透過 URI046 取得頁面相關的 meta 資料
- 呼叫相關 api 路徑如下: ${TT-API網址}/domains/seo/{seoType}/{pageType}/{did}/{rowId}
- 參數 seoType 帶入 "1"
- 參數 pageType 帶入 "COMPANY_DETAIL"
- 參數 did 帶入頁面 {did}
- 參數 rowId 帶入公司 id {id}
- 解析回傳的 json 內容，並寫入頁面原始檔中

麵包屑

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

顯示邏輯
- 參考 https://hackmd.io/nlZlemkdTRCC7ua4Uup8UA?view#麵包屑1
- 取出 data 中的 companyProfile array
- 邏輯與格式
  - 1 Home
    - 固定顯示 Home 連結
    - Home 為多語，{lang.home}
    - Home 的 url 是固定的，連結到該 domain 首頁
  - 2 Company
    - 固定顯示 Company 文字
    - Company 為多語，{lang.company}
  - 3 公司名稱
    - 顯示 公司名稱 文字
    - 套用 companyProfile.companyName

公司基本資料(標題)

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#廠商資料
- 取得 data 中的 companyProfile object
- 1 公司名稱
  - 顯示 companyProfile.companyName
- 2 Add to favorites
  - Add to favorites 為多語，{lang.addtofavorites}
  - 如果該公司已經加入過 favorites 的話，要顯示 Go to Favorites，{lang.gotofavorites}
  - 點選的連結請參考條列頁的加到最愛與 redirect 到最愛的邏輯
- 加到我的最愛部分，這邊先貼上目前條列頁相同功能的程式碼，應該是可以直接套用的；條列頁程式有納入版本控制，後續開發如果碰到問題，這邊可以提供相關程式來參考；檢查公司是否已經加入我的最愛、將公司加入我的最愛、從我的最愛中移除公司，在下面的 ts 中應該都有相對應的程式碼
  - 相關連結 https://github.com/ttcloude/taitra-aem/blob/master/ui.frontend/src/app/library/supplier-list/supplier-list.component.ts

import { Component, ElementRef, Inject, Input, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { WINDOW } from '@ng-web-apis/common';
import { Subscription } from 'rxjs';
import { Product } from '../../models/product.model';
import { BaseComponent } from '../../components/base.component';
import { ProductDisplay } from '../../models/product-display.model';
import { SearchCompany } from '../../models/search-company.model';
import { UiUtils } from 'src/app/utils/ui.utils';
import { FavoriteSupplierStore } from '../../store/favorite-supplier-store';
import { ResetFavoriteListStore } from '../../store/reset-favorite-list-store';
import { ResetPermaCountStore } from '../../store/reset-perma-count-store';
import { StatusService } from 'src/app/service/status.service';
import { initSwiper } from './supplierListSwiper';
import { destroy } from '../../components/baseSwiper';

@Component({
    selector: 'app-supplier-list',
    styleUrls: ['./supplier-list.component.css'],
    templateUrl: './supplier-list.component.html',
    encapsulation: ViewEncapsulation.None
})
export class SupplierListComponent extends BaseComponent {

    @ViewChildren('appProducts', { read: ElementRef })
    appProducts: QueryList<ElementRef>;

    @ViewChild('viewAll', { read: ElementRef })
    viewAllSilder: ElementRef;

    @Input()
    productDisplay: ProductDisplay;

    @Input()
    index: number;

    @Input()
    languageId: number;

    @Input()
    did: number;

    subscription: Subscription;

    searchCompany: SearchCompany;

    supplierProducts: Product[];

    showViewAll = false;

    sliderTotalCount = 0;

    sliderCount = 0;

    isAddedFavorite = false;

    favoriteSupplier: string[] = [];

    resetFavoriteList = true;

    constructor(
        @Inject(WINDOW) readonly windowRef: any,
        private favoriteSupplierStore: FavoriteSupplierStore,
        private resetFavoriteListStore: ResetFavoriteListStore,
        private resetPermaCountStore: ResetPermaCountStore,
        private statusService: StatusService) {
        super();
        this.addStore(favoriteSupplierStore, (favoriteList) => {
            this.favoriteSupplier = favoriteList;
            this.resetFavoriteList = false;
            if (this.searchCompany && this.favoriteSupplier.includes(this.searchCompany.companyId)) {
                this.isAddedFavorite = true;
            } else {
                this.isAddedFavorite = false;
            }
        }, false);
    }

    async onRefresh() {
        this.supplierProducts = [];
        destroy(this.searchCompany?.id);
        this.sliderCount = 0;

        if (this.resetFavoriteList) {

            // Notify Header set favorit list
            this.resetFavoriteListStore.resetFavoriteType('SUPPLIER');

        } else {

            if (this.searchCompany && this.favoriteSupplier.includes(this.searchCompany.companyId)) {
                this.isAddedFavorite = true;
            } else {
                this.isAddedFavorite = false;
            }
        }
    }

    @Input() set company(searchCompany: SearchCompany) {
        this.searchCompany = searchCompany;
    }

    @Input() set products(products: Product[]) {
        this.supplierProducts = products;
        if (products) {
            this.sliderTotalCount = products.length;
        }
    }

    onDomChange(mutation: MutationRecord): void {

        this.debug('onDomChange ' + mutation + ' , liElementCount=' + this.sliderCount);

        if (!UiUtils.isSwiperSlideDivElement(mutation)) {
            return;
        }

        this.sliderCount++;

        this.debug('onDomChange sliderCount=' + this.sliderCount + ' , sliderTotalCount=' + this.sliderTotalCount);

        if (this.sliderCount === this.sliderTotalCount) {
            if (this.searchCompany.totalProducts > 4) {
                this.showViewAll = true;
            } else {
                this.debug('onDomChange initSupplierProdsSwiperConfig');
                initSwiper(this.searchCompany?.id);
            }
        } else if (this.sliderCount > this.sliderTotalCount) {
            this.debug('onDomChange initSupplierProdsSwiperConfig');
            initSwiper(this.searchCompany?.id);
        }

    }

    getViewAllHeight(): number {

        if (!this.showViewAll) {
            return 0;
        }

        let viewAllHeight: number = this.viewAllSilder ? this.viewAllSilder.nativeElement.height : 0;
        if (this.windowRef.innerWidth >= 768) {
            if (this.appProducts) {
                const appProduct: ElementRef = this.appProducts.first;
                if (appProduct) {
                    const height = appProduct.nativeElement.getElementsByClassName('prod_img_wrapper')[0].getBoundingClientRect().height;
                    viewAllHeight = height;
                }
            }
        }

        this.debug('SupplierListComponent getViewAllHeight=' + viewAllHeight);
        return viewAllHeight;
    }

    async addFavoriteClick(): Promise<void> {

        this.debug('### click addFavoriteClick ###');

        try {

            this.statusService.mask();
            const companyId = this.searchCompany.companyId;
            if (this.isAddedFavorite) {
                this.debug('### remove favorite:', companyId);
                const response = await this.windowRef.headerEntry.removeMyFavorites(companyId, 'SUPPLIER', this.languageId);
                if (response.code === '200') {
                    this.debug('### remove success ###');
                    this.favoriteSupplierStore.removeCompanyId(companyId);
                }
            } else {
                this.debug('### add favorite:', companyId);
                const response = await this.windowRef.headerEntry.addMyFavorites(companyId, 'SUPPLIER', this.languageId, this.did, 'FRONT');
                if (response.code === '200') {
                    this.debug('### add success ###');
                    this.favoriteSupplierStore.addCompanyId(companyId);
                }
            }

            this.resetPermaCountStore.updateType('SUPPLIER');

        } catch (e) {

            this.error(e);

        } finally {

            this.statusService.unMask();
        }
    }

}

操作邏輯

公司基本資料(3D/360區塊)

3D 區塊
360 區塊
影片區塊
顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#公司基本資料
- 取得 data 中的 multimedia array，依次解析資料
- 如果沒有 multimedia 資料，區塊不顯示
- 1 顯示圖片、網址、或影音，舊版是透過 iframe 引入
  - 當 {multimedia.pictureId} 非空且 {multimedia.pictureUrl} 非空，代表顯示圖片
  - 如果顯示圖片，且 {multimedia.productUrl} 非空，代表點選圖片時，要開新視窗並顯示型錄詳目頁內容
  - 如果顯示圖片，且 {multimedia.defineUrl} 非空，代表點選圖片時，要開新視窗連結，連結的對象 = {multimedia.defineUrl}，圖片的 title 跟 alt = {multimedia.title}
  - 如果不顯示圖片，且 {multimedia.defineUrl} 非空，代表是 3D, 360, youtube 等類型，於 iframe 中顯示 {multimedia.defineUrl} 內容
- 2 顯示切換的 dots
  - 判斷 multimedia array size 來決定顯示幾個點
操作邏輯
- 點選切換的 dots
  - 參考顯示 2 的 dots，點選第幾個點，顯示 1 的區塊會顯示對應的該筆資料

公司基本資料(big icon)

顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#認證大圖
- 取得 data 中的 bigIcon array，依次解析資料
- 如果沒有 bigIcon 資料，區塊不顯示
- 1 顯示對應圖片
  - 圖片 src 顯示 {bigIcon.imgUrl}
  - 圖片的 title 跟 alt 顯示 {bigIcon.name}

公司基本資料

顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#廠商資料
- 取得 data 中的 companyProfile object，解析資料
- 1 顯示下列資料，如果 companyProfile 沒有對應欄位，該行不顯示
  - Company Name
    - Company Name 為多語，{lang.companyname}
    - 顯示 {companyProfile.companyName}
  - Business Type
    - Business Type 為多語，{lang.companiesbusinesstype}
    - 顯示 {companyProfile.businessTypeListDesc}
  - Year Established
    - Year Established 為多語，{lang.yearestablished}
    - 顯示 {companyProfile.yearEstablished}
  - Factory Location
    - Factory Location 為多語，{lang.factorylocation}
    - 顯示 {companyProfile.factoryLocation}
  - Total Revenue
    - Total Revenue 為多語，{lang.totalrevenue}
    - 顯示 {companyProfile.totalRevenue}
  - Capitial
    - Capitial 為多語，{lang.capitial}
    - 先判斷 {companyProfile.showCapital} == 1 才會顯示資本額
    - 顯示 {companyProfile.capital}
  - No. of Employee
    - No. of Employee 為多語，{lang.employee}
    - 顯示 {companyProfile.employeeRank}
  - Main Product
    - Main Product 為多語，{lang.mainproducts}
    - 顯示 {companyProfile.mainExportProductName}
  - Main Export Market
    - Main Export Market 為多語，{lang.mainexportmarket}
    - 顯示 {companyProfile.mainExportMarketListDesc}

公司相關型錄

顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#相關型錄
- 1 標題 Products 為多語，{lang.products}
- 取得 data 中的 productlist array，依次解析資料(公司獨立頁最多顯示10筆且不出現view all，於產品頁公司頁籤最多5筆，若產品更多就會出現view all（取productMoreUrl欄位值）)
- 2 New tag
  - 如果 {productlist.newest} == 1，需要顯示 New 標籤
- 3 圖片
  - 顯示 {productlist.imageURL}
  - 圖片的 title = {productlist.imgTitle}
  - 圖片的 alt = {productlist.imgAlt}
- 4 型錄名稱聯結
  - 名稱為 {productlist.productName}，聯結為 {productlist.productUrl}
- 5 型錄價格
  - 先判斷是否有販售，{productlist.isSelling} == 1，如果沒有販售就不用顯示價格
  - 再來判斷是否有折扣
    - 先判斷 {productlist.isDiscount} == 1(有折扣)
    - 再判斷 {productlist.discountStartDate} 與 {productlist.discountEndDate} 跟今天日期的比較，判斷是否在折扣日內
    - 再判斷 {productlist.discount} 是否有值且 {productlist.discount} > 0.0
    - 上面三點都成立，代表有折扣
  - ~~如果沒有折扣，顯示 {productlist.priceCurrency} + {productlist.price} + {productlist.unit}，對應幣別 + 價格 + 單位~~
  - 如果沒有折扣，顯示 {productlist.priceCurrency} + {productlist.priceMin} + '-' + {productlist.priceMax} + {productlist.unit}，對應幣別 + 最小價格 + '-' + 最大價格 + 單位
  - 如果有折扣，顯示 {productlist.discount} + {productlist.priceCurrency} + ({productlist.price} * {productlist.discount}) + {productlist.unit}，對應 折扣百分比圖 + 幣別 + 價格 + 單位
  - 如果有折扣，顯示折扣百分比圖 + {productlist.priceCurrency} + ({productlist.priceMin} * {productlist.discount}) + '-' + ({productlist.priceMax} * {productlist.discount}) + {productlist.unit}，對應 折扣百分比圖 + 幣別 + 最小價格 + '-' + 最大價格 + 單位
  - json 提供的是 USD 金額，如果頁面的幣別有替換，那顯示時需要將金額從 USD 換算為對硬幣別的金額，幣別顯示也要改為頁面的幣別
- 6 Free Shipping
  - 判斷是否免運費，如果 {productlist.isFreeShipping} == 1，顯示 free shipping 的小圖
- 7 Min Order
  - ~~顯示 {productlist.minOrder} + {productlist.unit}~~
  - 顯示 {productlist.minOrder}
- 警語相關
  - 取得 {productlist.catalogStandardCid}，會影響到本頁是否要顯示警語
- 其他參數
  - 目前會回傳 {productCount} 與 {productMoreUrl}，提供後續點選公司更多型錄的相關資訊
    - {productCount} 紀錄目前該公司啟用型錄的數量
    - {productMoreUrl} 是公司型錄清單的 url
操作邏輯

公司工廠資料

顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#工廠資料
- 1 標題 Factory 為多語，{lang.factory}
- 取得 data 中的 factoryInfo.videoList array 與 factoryInfo.imageList array，依次解析資料
- 先解析 factoryInfo.videoList array，依次顯示
  - 2 顯示影片，{factoryInfo.videoList.videoURL}
  - 3 顯示影片名稱，{factoryInfo.videoList.videoTitle}
- 再來解析 factoryInfo.imageList array，依次顯示
  - 4 顯示小圖圖片，{factoryInfo.imageList.mobileImgUrl}，圖片的 title 跟 alt 顯示 {factoryInfo.imageList.imageTitle}
  - 5 顯示圖片名稱，{factoryInfo.imageList.imageTitle}
操作邏輯
- 點選 4 的工廠圖片，開啟燈箱顯示圖片
  - 1 點選小的工廠圖片，對應 {factoryInfo.imageList.mobileImgUrl}
  - 2 開啟燈箱，燈箱中放入工廠圖片，對應 {factoryInfo.imageList.pcImgUrl}
  - 3 燈箱關閉按鈕
    - 關閉燈箱按鈕，點選後關閉燈箱
  - 4 燈箱遮罩
    - 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕

公司認證與產品認證

第三方認證
- 1 Certification 為多語，{lang.certification}
- 取得 data 中的 certInfo.thirdPartyCert array, certInfo.companyCert array, certInfo.productCert array
- 2 解析第三方認證顯示邏輯(thirdPartyCert)
  - 依次分析 certInfo.thirdPartyCert 資料
  - 第三方認證的 tts 認證與 advanced 認證圖片是固定的路徑，因此回傳的 json 只記錄是否顯示，以及對應認證顯示的名稱，結構與其他認證不同
  - 如果 {certInfo.ttsCert} == 1，代表要顯示 tts 的認證圖片，另外圖片的 title 與 alt 顯示 {certInfo.ttsCertName} 的值，點選 tts 認證不會開啟燈箱
  - 如果 {certInfo.advancedCert} == 1，代表要顯示進階認證圖片，另外圖片的 title 與 alt 顯示 {certInfo.advancedCertName}，點選進階認證不會開啟燈箱
  - 其他類型的認證，需要解析 {certInfo.thirdPartyCert.isUseHtml} 欄位值
    - 如果 {certInfo.thirdPartyCert.isUseHtml} == 1，代表認證的內容要顯示 {certInfo.thirdPartyCert.informationHtml} 的 html code
    - 反之，依照一般認證顯示規則，點選後開啟燈箱，顯示相關內容，認證燈箱部分請參考 https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w
    - {certInfo.thirdPartyCert.isUseHtml} == 1 範例
      - 當 {certInfo.thirdPartyCert.isUseHtml} == 1 時，{certInfo.thirdPartyCert.informationHtml} 內容會呈現類似以下的內容，包含 a href 連結，以及連結對應的圖型，所以套板時，直接套用 html code 內容

"<a id=\\\"cert_doc\\\" style=\\\"color:blue;\\\" target=\\\"_blank\\\" href=\\\"https://dunscertified.dnb.com.tw/en/DUNSCertifiedProfile/DCP[ID]\\\"><img id=\\\"cert_img\\\" style=\\\"position: inherit;\\\" src=\\\"https://dunscertified.dnb.com.tw/Images/dnb_logo.png\\\"><br>DUNS Certified Profile</a>"

公司認證
- 3 Company Certification 為多語，{lang.companycertification}
- 4 解析 {certInfo.companyCert} 資料，依次顯示
  - 如果 {certInfo.companyCert.isUseHtml} == 1，代表認證的內容要顯示 {certInfo.companyCert.informationHtml} 的 html code
  - 反之，依照一般認證顯示規則，點選後開啟燈箱，顯示相關內容，認證燈箱部分請參考 https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w
- 5 解析以下條件，如果符合，顯示按鈕讓操作人員可以開啟新視窗，並列出所有相關的公司認證
  - 判斷數量 {certInfo.companyCert.total} > 0
  - 判斷開啟的 url 非空，對應的 url 為{certInfo.companyCert.allCertHref} != ''
- 6 當第五項要顯示時，對應的名稱 All Certifications 為多語，{lang.allcertification}
  - 顯示 All Certifications，後面加上 {certInfo.companyCert.total}
型錄認證
- 7 Product Certification 為多語，{lang.productcertification}
- 8 解析 certInfo.productCert 資料，依次顯示
  - 如果 {certInfo.productCert.isUseHtml} == 1，代表認證的內容要顯示 {certInfo.productCert.informationHtml} 內的 html code
  - 反之，依照一般認證顯示規則，點選後開啟燈箱，顯示相關內容，認證燈箱部分請參考 https://hackmd.io/OFJ68AIxTfePBEeKqlGa-w
- 9 解析以下條件，如果符合，顯示按鈕讓操作人員可以開啟視窗，並列出所有相關的~~公司認證~~公司型錄認證
  - 判斷數量 {certInfo.productCert.total} > 0
  - ~~判斷開啟的 url 非空，對應的 url 為{certInfo.productCert.allCertHref} != ''~~
  - 目前 cp 頁的公司型錄認證最多只列出前十筆資料，要取得全部的型錄認證，請參考下面第 10 點說明
- 10 當第九項要顯示時，對應的名稱 All Certifications 為多語，{lang.allcertification}
  - 顯示 All Certifications，後面加上 {certInfo.productCert.total} 數量
  - 點選 All Certifications 按鈕時，透過 URI-C-03 型錄認證清單，取得該公司下所有的型錄認證
操作邏輯
- 點選型錄認證燈箱
  - 參考 URI-C-02 型錄認證/公司認證燈箱取得對應 json 內容
    - 傳入的 url 路徑 /certifications/prod/{certInfo.id}?lang={companyProfile.languageId}&companyId={companyProfile.companyId}
  - 解析回傳的 certInfo object 內容並顯示於燈箱中
  - 1 燈箱名稱
    - Product Certification 為多語，{lang.productcertification}
  - 2 型錄認證名稱
    - 顯示 {certInfo. name}
  - 3 型錄認證圖片
    - 顯示 {certInfo.imgUrl}
  - 4 型錄認證編號
    - Certification No 為多語，{lang.certificationno}
    - 顯示 {certInfo.serial}
    - 如果沒有就不顯示此欄位
  - 5 型錄認證生效起始日期
    - Certification Start Time 為多語，{lang.certificationstarttime}
    - 顯示 {certInfo.startTime}
    - 如果沒有就不顯示此欄位
  - 6 型錄認證生效結束日期
    - Certification End Time 為多語，{lang.certificationendtime}
    - 顯示 {certInfo.endTime}
    - 如果沒有就不顯示此欄位
  - 7 型錄認證說明
    - Certification description 為多語，{lang.certificationdesc}
    - 顯示 {certInfo.desc}
    - 如果沒有就不顯示此欄位
  - 8 型錄認證附件檔案
    - Attachments 為多語，{lang.certificationattachments}
    - 顯示 url 連結
      - href 顯示 {certInfo.fileUrl}
      - 連結名稱顯示 {certInfo.fileName}
    - 如果沒有就不顯示此欄位
  - 9 型錄認證相關型錄
    - Product 為多語，{lang.product}
    - 解析 certInfo.refProductRows array，依次顯示內容
      - 9-1 顯示 {certInfo.refProductRows.imgUrl}
      - 9-2 對應的型錄詳目頁 url 連結
        
        href 顯示 {certInfo.refProductRows.productCpUrl}
        
        連結名稱顯示 {certInfo.refProductRows.productName}
    - 如果沒有就不顯示此區塊
  - 10 燈箱關閉按鈕
    - 關閉燈箱按鈕，點選後關閉燈箱
  - 11 燈箱遮罩
    - 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕
- 點選公司認證燈箱
  - 參考 URI-C-02 型錄認證/公司認證燈箱取得對應 json 內容
    - 傳入的 url 路徑 /certifications/com/{certInfo.id}?lang={companyProfile.languageId}&companyId={companyProfile.companyId}
  - 解析回傳的 certInfo object 內容並顯示於燈箱中
  - 1 燈箱名稱
    - Company Certification 為多語，{lang.companycertification}
  - 2 公司名稱
    - 顯示 {companyInfo.companyName}
  - 3 認證名稱
    - 顯示 {certInfo .name}
  - 4 認證圖片
    - 顯示 {certInfo.imgUrl}
  - 5 認證相關顯示內容
    - 認證編號
      - Certification No 為多語，{lang.certificationno}
      - 顯示 {certInfo.serial}
      - 如果沒有就不顯示此欄位
    - 認證生效起始日期
      - Certification Start Time 為多語，{lang.certificationstarttime}
      - 顯示 {certInfo.startTime}
      - 如果沒有就不顯示此欄位
    - 認證生效結束日期
      - Certification End Time 為多語，{lang.certificationendtime}
      - 顯示 {certInfo.endTime}
      - 如果沒有就不顯示此欄位
    - 認證說明
      - Certification description 為多語，{lang.certificationdesc}
      - 顯示 {certInfo.desc}
      - 如果沒有就不顯示此欄位
    - 認證附件檔案
      - Attachments 為多語，{lang.certificationattachments}
      - 顯示 url 連結
        
        href 顯示 {certInfo.fileUrl}
        
        連結名稱顯示 {certInfo.fileName}
      - 如果沒有就不顯示此欄位
  - 6 燈箱關閉按鈕
    - 關閉燈箱按鈕，點選後關閉燈箱
  - 7 燈箱遮罩
    - 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕

公司得獎紀錄、大事記(得獎紀錄)

顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#得獎資料
- 1 標題 Award 為多語，{lang.awards}
- 2 標題 Award from {companyProfile.companyName}
  - Award 為多語，{lang.awards}
  - from 為固定顯示
  - 後面需要接上 {companyProfile.companyName}
- 取得 data 中的 awardInfo.awardList array，依次解析資料
  - 3 顯示圖片，{awardInfo.awardList.imgSrc}
  - 4 顯示年分，{awardInfo.awardList.startYear}
  - 5 顯示得獎名稱與聯結，名稱為 {awardInfo.awardList.title}，點選的聯結是 {awardInfo.awardList.href}
  - 6 顯示說明，{awardInfo.awardList.description}

公司得獎紀錄、大事記(官方紀錄)

顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?view#得獎資料
- 1 標題 Official Records 為多語，{lang.officialrecords}
- 2 標題 Official Records from Taiwan International Trade Shows
  - Official Records 為多語，{lang.officialrecords}
  - from Taiwan International Trade Shows 為固定顯示
- 取得 data 中的 awardInfo.officialRecordsFromTTSList array，依次解析資料
  - 3 顯示圖片，{awardInfo.officialRecordsFromTTSList.logoUrl}
  - 4 顯示年月，{awardInfo.officialRecordsFromTTSList.showYearMonth}
  - 5 顯示名稱與聯結，名稱為 {awardInfo.officialRecordsFromTTSList.displayTitle}，點選的聯結是 {awardInfo.officialRecordsFromTTSList.sUrl}
  - 6 顯示序號，Booth No. 為固定顯示，後方序號為 {awardInfo.officialRecordsFromTTSList.showBoots}
- 7 標題 Official Records from {companyProfile.companyName}
  - Official Records 為多語，{lang.officialrecords}
  - from 為固定顯示
  - 後面需要接上 {companyProfile.companyName}
- 取得 data 中的 awardInfo.officialRecordList array，依次解析資料
  - 8 顯示圖片，{awardInfo.officialRecordList.imgSrc}
  - 9 顯示年分，{awardInfo.officialRecordList.startYear}
  - 10 顯示名稱與聯結，名稱為 {awardInfo.officialRecordList.title}，點選的聯結是 {awardInfo.officialRecordList.href}
  - 11 顯示說明，{awardInfo.officialRecordList.description}
操作邏輯

公司聯絡資訊

未登入
已登入
顯示邏輯
- 參考文件 https://hackmd.io/WTAzi5tXQBuakQV1tkgATw?both#公司聯絡資訊
- 取得 data 中的 contactUs object
- 1 Contact Information 為多語，{lang.contactinformation}
- 2 聯絡人相關訊息
  - 如果有登入，依次顯示資訊
    - Owner 為多語，{lang.owner}
      - 顯示 {contactUs.owner}
    - Contact Person 為多語，{lang.contactperson}
      - 顯示 {contactUs.contactFullName}
      - 分析 {contactUs.contactPicture}，如果有值，顯示聯絡人圖片
      - 分析 {contactUs.contactCard}，如果有值，顯示聯絡人名片圖
    - Business Phone Number 為多語，{lang.tel1}
      - 顯示 {contactUs.contactPhone}
  - 如果沒有登入，owner 等資訊會是空的，此時請顯示 Log in to view details，多語資料 {lang.logintoviewdetails}
    - Owner 為多語，{lang.owner}
    - Contact Person 為多語，{lang.contactperson}
    - Business Phone Number 為多語，{lang.tel1}
- 3 Contact Supplier 為多語，{lang.contactsupplier}
- 4 其他相關資訊
  - 依次判斷以下 contactUs object 的欄位
    - Company Fax Number 為多語，{lang.fax}
      - 對應欄位 {contactUs.officeFax}
    - Phone Number 為多語，{lang.phonenumber}
      - 對應欄位 {contactUs.contactPhone}
    - Office Address 為多語，{lang.officeaddress}
      - 對應以下欄位
        
        {contactUs.officePostal}
        
        {contactUs.officeAddress}
        
        {contactUs.officeAddressTw}
      - ~~如果 {contactUs.officeAddressTw} != '' 顯示 {contactUs.officePostal} + {contactUs.officeAddressTw}~~
      - ~~如果 {contactUs.officeAddressTw} == '' and {contactUs.officeAddress} != '' 顯示 {contactUs.officePostal} + {contactUs.officeAddress}~~
      - ~~後面加上 google map 的聯結，帶入對應的地址~~
      - 欄位顯示 {contactUs.officePostal} + {contactUs.officeAddress}
      - 後方的 google map 連結，其中的地址需要執行以下的判斷
        
        如果 {contactUs.officeAddressTw} != null，此時 google map 的地址使用 {contactUs.officeAddressTw}
        
        反之則不顯示 google map 按鈕
    - Office Hours 為多語，{lang.officehours}
      - 對應欄位 {contactUs.officeHour}
    - Company Website 為多語，{lang.companywebsite}
      - 顯示聯結
        
        聯結名稱對應欄位 {companyProfile.companyName}
        
        ~~聯結 url 對應欄位 {companyProfile.companyWebSiteUrl}~~
        
        連結 url 對應欄位 {contactUs.websiteUrl}
    - Online Shop 為多語，{lang.onlineshop}
      - 顯示聯結
        
        聯結名稱對應欄位 {lang.onlineshop}
        
        聯結 url {contactUs.onlineShop}
    - Mobile Site 為多語，{lang.mobilesite}
      - 顯示 qr code 圖，對應 url : {contactUs.qrcodeUrl}
      - qr code 圖片顯示方式為需要透過 front 相關 service 組出，呼叫方式參考下面的 url
        
        /qrcode?w=95&h=95&charset=UTF-8&ecl=H&ext=gif&data={contactUs.qrcodeUrl}
        
        範例如下：https://www.ttstaging.com.tw/qrcode?w=95&h=95&charset=UTF-8&ecl=H&ext=gif&data=https://hyweb.en.ttstaging.com.tw
- 5 Last Update 為多語，{lang.lastupdate}
- 目前 contact us 中的 factoryAddress, factoryAddressTw 並未顯示，不需要的話可以移除
操作邏輯
- 如果 2 聯絡人相關訊息中有聯絡人圖片，點選後會開啟燈箱顯示圖片
  - 1 點選聯絡人圖片圖示
  - 2 開啟燈箱內容，圖片部份顯示對應的 {contactUs.contactPicture}
  - 3 目前顯示 avatar 單字
  - 4 燈箱關閉按鈕
    - 關閉燈箱按鈕，點選後關閉燈箱
  - 5 燈箱遮罩
    - 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕
- 如果 2 聯絡人相關訊息中有聯絡人名片，點選後會開啟燈箱顯示名片
  - 1 點選聯絡人名片圖示
  - 2 開啟燈箱內容，圖片部份顯示對應的 {contactUs.contactCard}
  - 3 目前顯示 avatar 單字
  - 4 燈箱關閉按鈕
    - 關閉燈箱按鈕，點選後關閉燈箱
  - 5 燈箱遮罩
    - 燈箱背景會加上 mask，點選 mask 效果等同於點選關閉燈箱按鈕
- 點選 3 Contact Supplier，會跳轉到本頁下面的聯繫廠商區塊

聯繫廠商

商機Inquiry Product，請參考URI-C-01

多語清單

區塊	多語代碼	說明
麵包屑	lang.home	麵包屑 Home
麵包屑	lang.company	麵包屑 Company
公司基本資料	lang.addtofavorites	Add to favorite
公司基本資料	lang.gotofavorites	Go to favorite
公司基本資料	lang.companyname	Company Name
公司基本資料	lang.companiesbusinesstype	Business Type
公司基本資料	lang.yearestablished	Year Establish
公司基本資料	lang.factorylocation	Factory Location
公司基本資料	lang.totalrevenue	Total Revenue
公司基本資料	lang.capitial	Capital
公司基本資料	lang.employee	Employee No.
公司基本資料	lang.mainproducts	Main Products
公司基本資料	lang.mainexportmarket	Main Export Market
公司相關型錄	lang.products	Product
公司工廠資料	lang.factory	Factory
認證	lang.certification	Certification
認證	lang.companycertification	Company Certification
認證	lang.allcertification	All Certification
認證	lang.productcertification	Product Certification
認證燈箱	lang.certificationno	Certification No
認證燈箱	lang.certificationstarttime	Certification Start Time
認證燈箱	lang.certificationendtime	Certification End Time
認證燈箱	lang.certificationdesc	Certification Description
認證燈箱	lang.certificationattachments	Attachments
得獎紀錄	lang.awards	Awards
得獎紀錄	lang.officialrecords	Official Records
Contact Us	lang.logintoviewdetails	Login in to View Details
Contact Us	lang.contactinformation	Contact Information
Contact Us	lang.owner	Owner
Contact Us	lang.contactperson	Contact Person
Contact Us	lang.tel1	Contact Phone No.
Contact Us	lang.contactsupplier	Contact Supplier
Contact Us	lang.fax	Office Fax
Contact Us	lang.phonenumber	Office Phone No.
Contact Us	lang.officeaddress	Office Address
Contact Us	lang.officehours	Office Hours
Contact Us	lang.companywebsite	Company Website
Contact Us	lang.onlineshop	Online Shop
Contact Us	lang.mobilesite	Mobile Site
Contact Us	lang.lastupdate	Last Update

FangTT

2021/09/14 08:03:07

這筆範例:https://www.ttstaging.com.tw/company/old/147927 會有折扣標籤，輸出的資料欄位沒有折扣，煩請確認。 (Edited)

hywebW00

2021/10/17 15:29:32

過 [URI046](https://hackmd.io/C0_27LhmTD6m9qV_DahhTQ) 取得頁面相關的 meta 資料 - 呼叫相關 api 路徑如下: ${TT-API網址}/domains/seo/{seoType}/{pageType}/{did}/{rowId} - 參數 seoType 帶入 "1" - 參數 pageType 帶入 "COMPANY_DETAIL" - 參數 did 帶入頁面 {did} - 參數 rowId 帶入公司 id {id} - 解析回傳的 json 內容，並寫入頁面原始檔中

調整 seo meta 取用方式，改用共用 api 取得 (Edited)

2021/10/18 05:56:47

api 相關 url 如下：${TT-API網址}/companies/detail/{did}/{id}?userAccessTicket={userAccessTicket} - did : domain id，與頁面及版型相關參數，例如英文主頁 did = 2 - id : 型錄 id，參考 http://www.ttstaging.com.tw/product/1893926 ，其中 "1893926" 就是型錄 id - userAccessTicket 為登入者使用者Ticket，AEM 透過 header service 取得 userAccessTicket，如果有傳入，且經過解析後是正常的 ticket，後續 api 就會判斷此次呼叫是有登入的呼叫

補上 URI-B-04 api 相關參數 (Edited)

2021/10/18 07:36:39

最愛部分，這邊先貼上目前條列頁相同功能的程式碼，應該是可以直接套用的；條列頁程式有納入版本控制，後續開發如果碰到問題，這邊可以提供相關程式來參考；檢查公司是否已經加入我的最愛、將公司加入我的最愛、從我的最愛中移除公司，在下面的 ts 中應該都有相對應的程式碼 - 相關連結 https://github.com/ttcloude/taitra-aem/blob/master/ui.frontend/src/app/library/supplier-list/supplier-list.component.ts

補上 add to favorites 條列頁的程式 (Edited)

2021/10/18 09:19:43

如果沒有折扣，顯示 {productlist.priceCurrency} + {productlist.price} + {productlist.unit}，對應 **幣別** + **價格** + **單位**~~ - 如果沒有折扣，顯示 {productlist.priceCurrency} + {productlist.priceMin} + '-' + {productlist.priceMax} + {productlist.unit}，對應 **幣別** + **最小價格** + '-' + **最大價格** + **單位** - ~~如果有折扣，顯示 {productlist.discount} + {productlist.priceCurrency} + ({productlist.price} * {productlist.discount}) + {productlist.unit}，對應 **折扣百分比圖** + **幣別** + **價格** + **單位**~~ - 如果有折扣，顯示折扣百分比圖 + {productlist.priceCurrency} + ({productlist.priceMin} * {productlist.discount}) + '-' + ({productlist.priceMax} * {productlist.discount}) + {productlist.unit}，對應 **折扣百分比圖** + **幣別** + **最小價格** + '-' + **最大價格** + **單位

調整折扣價格計算，金額改為 priceMin 與 priceMax (Edited)

2021/10/18 09:25:16

{certInfo.thirdPartyCert.isUseHtml} == 1 範例 - 當 {certInfo.thirdPartyCert.isUseHtml} == 1 時，{certInfo.thirdPartyCert.informationHtml} 內容會呈現類似以下的內容，包含 a href 連結，以及連結對應的圖型，所以套板時，直接套用 html code 內容

加上一段 certInfo.thirdPartyCert.isUserHtml = 1 的範例 (Edited)

2021/10/18 09:26:41

qr code 圖片顯示方式為需要透過 front 相關 service 組出，呼叫方式參考下面的 url - /qrcode?w=95&h=95&charset=UTF-8&ecl=H&ext=gif&data={contactUs.qrcodeUrl} - 範例如下：https://www.ttstaging.com.tw/qrcode?w=95&h=95&charset=UTF-8&ecl=H&ext=gif&data=https://hyweb.en.ttstaging.com.tw

qr code 產出邏輯說明 (Edited)

2021/10/18 09:31:58

目前 contact us 中的 factoryAddress, factoryAddressTw 並未顯示，不需要的話可以移除

討論是否移除工廠地址 (Edited)

2021/10/18 09:35:06

其他參數 - 目前會回傳 {productCount} 與 {productMoreUrl}，提供後續點選公司更多型錄的相關資訊 - {productCount} 紀錄目前該公司啟用型錄的數量 - {productMoreUrl} 是公司型錄清單的 url

公司型錄 more 相關參數 (Edited)

Green Cheng

2021/10/20 02:58:56

參考url 是錯的? Id 應該是Company id? (Edited)

2021/10/20 03:00:07

userAccessTicket

userAccessTicket 是否可以改成 userAccessToken? (Edited)

2021/11/03 02:54:38

解析以下條件，如果符合，顯示按鈕讓操作人員可以開啟視窗，並列出所有相關的~~公司認證~~公司型錄認證 - 判斷數量 {certInfo.productCert.total} > 0 - ~~判斷開啟的 url 非空，對應的 url 為{certInfo.productCert.allCertHref} != ''~~ - 目前 cp 頁的公司型錄認證最多只列出前十筆資料，要取得全部的型錄認證，請參考下面第 10 點說明 - 10 當第九項要顯示時，對應的名稱 All Certifications 為多語，{lang.allcertification} - 顯示 All Certifications，後面加上 {certInfo.productCert.total} 數量 - 點選 All Certifications 按鈕時，透過 [URI-C-03 型錄認證清單](https://hackmd.io/U_Dmv0w7QlGSVDi5N4Wneg#%E7%AF%84%E4%BE%8B1) ，取得該公司下所有的型錄認證

補上 URI-C-03 相關說明 (Edited)

2021/11/03 02:54:55

2021/11/24 06:46:08

聯結 url 對應欄位 {companyProfile.companyWebSiteUrl}~~ - 連結 url 對應欄位 {contactUs.websiteUrl}

連結欄位 url 修正 (Edited)

2021/11/24 10:11:10

欄位顯示 {contactUs.officePostal} + {contactUs.officeAddress} - 後方的 google map 連結，其中的地址需要執行以下的判斷 - 如果 {contactUs.officeAddressTw} != null，此時 google map 的地址使用 {contactUs.officeAddressTw} - 反之則不顯示 google map 按鈕

地址與 google map 顯示邏輯 (Edited)