# URI-B-08 Product Recommendations / Product Small Order API
> [name=JasonWu]
###### tags: `URI-O`
## 內容
### 網址
- https://www.taiwantrade.com/product/2309000
### 相關示意圖
### 相關程式
### Input JSON Path
#### 規格
- path : ${TT-API網址}/products/recommendation/{did}
- method : GET
- query : ?pid={pid}&cid={cid}&keyword={keyword}
#### Input
Column | Type | Require | Desc
-----------|----------|---------|---------
did | number | Y | domain id
pid | number | N | 型錄 id
cid | number | N | 公司 id
keyword | string | N | 查詢 keyword
#### 範例
```=json
https://tt-api.taiwantrade.com/product/recommendation/2?pid=2295424
```
#### 邏輯
- 回傳 json 包含以下區塊
- productRecommend
- smallOrderRecommend
- 可參考現有 ep 的相關 api
- Product Recommend
- https://ep-api.ttstaging.com.tw/product/idolBlock/productRecommend_147927_42_1895999_0_*
- Small Order Recommend
- https://ep-api.ttstaging.com.tw/product/idolBlock/smallOrderRecommend_147927_42_1895999_0_*
- 目前推薦相關是透過 idol 查詢取得的，以下功能會用到相關的推薦
- product cp
- 非必填部分需要傳入 product id
- news cp
- 非必填部分需要傳入 keyword
- 解析內容欄位備註
- 跑馬燈圖片顯示 imgUrl220 的圖片
- 點選標題，連結到對應的 product cp，productUrl 是連結 url
- newest = 1，顯示 new tag
- featured = 1，顯示 featured tag
- 如果有販售(isSelling = 1)，才需要判斷顯示金額的部分
- isDiscount = 0，代表沒有折扣，顯示 priceCurrency + priceRange
- isDiscount = 1 && 目前日期介於 discountStartDate 與 discountEndDate 間 && discount > 0，代表有折扣，先顯示 priceCurrency + priceRange + '/' + unitName，並加上刪除線；然後再顯示 priceCurrency + priceDiscountRange + '/' + unitName
- 如果未販售(isSelling = 0)，不需要判斷顯示金額的部分
- 如果有販售(isSelling = 1)，才需要顯示折扣與運費區塊
- isDiscount = 1 && 目前日期介於 discountStartDate 與 discountEndDate 間 && discount > 0，代表有折扣，顯示折扣數字與圖示
- isFreeShipping = 1，顯示 free shipping 的圖示
- quantity != 0，顯示 quantity + unitName
### Output JSON Path
#### 規格
```=json
{
"code" : <code>,
"errorMsg" : <errorMsg>,
"data" : {
"productRecommend" : [
{
"productId" : <productId>,
"name" : <name>,
"modelNo" : <modelNo>,
"catalogStandardCid" : <catalogStandardCid>,
"productUrl" : <productUrl>,
"imgUrl" : <imgUrl>,
"imgUrl220" : <imgUrl220>,
"newest" : <newest>,
"discount" : <discount>,
"isFreeShipping" : <isFreeShipping>,
"isSelling" : <isSelling>,
"isDiscount" : <isDiscount>,
"featured" : <featured>,
"quantity" : <quantity>,
"unitName" : <unitName>,
"priceMin" : <priceMin>,
"priceMax" : <priceMax>,
"priceCurrency" : <priceCurrency>,
"priceRange" : <priceRange>,
"priceDiscountRange" : <priceDiscountRange>,
"categoryNames" : <categoryNames>
},...
],
"smallOrderRecommend" : [
{
"productId" : <productId>,
"name" : <name>,
"modelNo" : <modelNo>,
"catalogStandardCid" : <catalogStandardCid>,
"productUrl" : <productUrl>,
"imgUrl" : <imgUrl>,
"imgUrl220" : <imgUrl220>,
"newest" : <newest>,
"discount" : <discount>,
"isFreeShipping" : <isFreeShipping>,
"isSelling" : <isSelling>,
"isDiscount" : <isDiscount>,
"featured" : <featured>,
"quantity" : <quantity>,
"unitName" : <unitName>,
"priceMin" : <priceMin>,
"priceMax" : <priceMax>,
"priceCurrency" : <priceCurrency>,
"priceRange" : <priceRange>,
"categoryNames" : <categoryNames>,
"discountStartDate" : <discountStartDate>,
"discountEndDate" : <discountEndDate>
},...
]
}
}
```
#### 輸出參數說明
推薦型錄輸出欄位
|欄位名稱 | 欄位說明 | 型態 | 是否可為空值 |
|--------------------|-------------|----------|------------|
|code | 代碼 | int | 0表示ok |
|errorMsg | 錯誤訊息 | String | |
|productRecommend | 推薦未販售型錄 | [`推薦型錄(Object)`](#推薦型錄) | N |
|smallOrderRecommend | 推薦販售型錄 | [`推薦型錄(Object)`](#推薦型錄) | N |
##### 推薦型錄
|欄位名稱 | 欄位說明 | 型態 | 是否可為空值 |
|-------------------|-----------------------------|--------|--------------|
|productId | 推薦型錄 id | int | N |
|name | 推薦型錄名稱 | String | N |
|modelNo | 推薦型錄型號 | String | Y |
|catalogStandardCid | 推薦型錄標準 taitra code | int | N |
|productUrl | 推薦型錄url | String | N |
|imgUrl | 推薦型錄小圖 | String | N |
|imgUrl220 | 推薦型錄大圖 | String | N |
|newest | 推薦型錄 newest tag | int | 無(0)/有(1) |
|discount | 推薦型錄折扣 | int | Y |
|isFreeShipping | 推薦型錄是否免運費 | int | 無(0)/有(1) |
|isSelling | 推薦型錄是否販售 | int | 無(0)/有(1) |
|isDiscount | 推薦型錄是否有折扣 | int | 無(0)/有(1) |
|featured | 推薦型錄是否有 featured tag | int | 無(0)/有(1) |
|quantity | 推薦型錄數量 | int | Y |
|unitName | 推薦型錄單位 | String | Y |
|priceMin | 推薦型錄最小金額 | String | Y |
|priceMax | 推薦型錄最大金額 | String | Y |
|priceCurrency | 推薦型錄幣別 | String | Y |
|priceRange | 推薦型錄金額顯示 | String | Y |
|categoryNames | 推薦型錄taitra code 名稱 | String | N |
|discountStartDate | 推薦型錄折扣開始日期 | String | Y |
|discountEndDate | 推薦型錄折扣結束日期 | String | Y |
#### SQL
- 無，本功能透過 idol 取得資料
#### 範例
```=json
{
"code" : 0,
"errorMsg" : "",
"data" : {
"productRecommend" : [
{
"productId" : 1885412,
"name" : "(SEO ADM客製化檢查) En型錄",
"modelNo" : "no.123",
"catalogStandardCid" : 1919,
"productUrl" : "/product/1885412",
"imgUrl" : "//im01.ttstaging.com.tw/3e4a3181-f119-4baf-b2f3-cb3a720362b4/howl011-150x150.jpg",
"imgUrl220" : "//im01.ttstaging.com.tw/38962cec-e725-4c90-ac23-f0be7ac0608b/howl011-200x200.jpg",
"newest" : 1,
"discount" : 0,
"isFreeShipping" : 0,
"isSelling" : 0,
"isDiscount" : 0,
"featured" : 1,
"quantity" : 0,
"unitName" : "",
"priceMin" : "",
"priceMax" : "",
"priceCurrency" : "",
"priceRange" : "",
"priceDiscountRange" : "",
"categoryNames" : "Consumer Electronics \\u0026 Mobile Phone & Tablet PC \\\\u0026 Other Mobile Phone & Tablet PC Accessories",
"discountStartDate" : "",
"discountEndDate" : ""
},...
],
"smallOrderRecommend" : [
{
"productId" : 1896775,
"name" : "販售型錄",
"modelNo" : "T-999",
"catalogStandardCid" : 2146,
"productUrl" : "/product/1896775",
"imgUrl" : "//im01.ttstaging.com.tw/fa2b8cd6-912e-4082-90f0-9e0f8a7ddf3f/0546db0d-3ce8-4805-9fa6-6ca7b67392e5_33_201500014734_L-150x150.jpg",
"imgUrl220" : "//im01.ttstaging.com.tw/610bb0e1-2650-4638-8c03-050ac6516b79/0546db0d-3ce8-4805-9fa6-6ca7b67392e5_33_201500014734_L-200x200.jpg",
"newest" : 1,
"discount" : 10,
"isFreeShipping" : 0,
"isSelling" : 1,
"isDiscount" : 1,
"featured" : 0,
"quantity" : 1,
"unitName" : "Pieces",
"priceMin" : "40",
"priceMax" : "50",
"priceCurrency" : "USD",
"priceRange" : "40-50",
"categoryNames" : "Computer \\u0026 Computer Software \\\\u0026 Other Computer Software",
"discountStartDate" : "2021-09-01",
"discountEndDate" : "2021-09-30"
},...
]
}
}
```
## 頁面操作相關邏輯(頁面按鈕、點選相關邏輯)
- 解析 api 回傳的 json 資料，組出 product recommend 與 small order recommend
- slider 捲動推薦型錄效果
- 捲動效果請參考上圖，點選向左或是向右，會捲動到下一則型錄
- 目前型錄捲動的效果是 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');
}
});
```
Sign in with Wallet
Connect another wallet