💡 應用場景

Campaign Star 頁面編輯器的「商品列表」元件（下又稱 Product list），可讓消費者瀏覽和活動主題相關的商品，促進特定商品的銷售或曝光度。

🔰 基本介紹

一個 Product list 元件由一格格的商品組成：預設的商品數量為 12 個，上限 30 個
細部元件架構：

⚫
區段（Section）
⚫
商品列表（Product list）
⚪
商品欄（Product column）(× N個)

商品內容列（Product content row）

商品內容欄 1（Product content column 1）

商品圖片（Product image）

商品內容欄 2（Product content column 2）

商品標題（Product title）

品牌（Brand）

商品價格（Product price）

原價（Price）

售價（Sale price）

折扣（Discount）

商品按鈕（Product button）

⚪
商品列表查看更多按鈕（Product list button）

聯動編輯效果：

在某一格商品修改元件樣式，會連動修改整串 Product list 的元件樣式，節省重複編輯的工夫
內容設定：
- 在全自動模式下，Product list 的內容是動態 (Dynamic) 的：
  
  在後台編輯器儲存頁面的時候，只會儲存商品來源的 filter 和 sorting 條件，SDK 活動頁再根據來源條件，動態呈現／自動更新具體的商品內容。
- 在全手動模式下，Product list 的內容是靜態 (Static) 的：
  
  在後台編輯器儲存頁面的時候，指定了什麼商品 ID，SDK 活動頁就會固定秀什麼商品，不會自動更新。
- 在混合模式下，Product list 的前面內容是靜態 (Static) 的，後方內容是動態 (Dynamic) 的：
  
  在後台編輯器儲存頁面的時候，會同時儲存使用者指定的商品 ID 和商品來源的 filter 和 sorting 條件，SDK 活動頁前面先固定秀您釘選的商品，後方再根據來源條件，動態呈現／自動更新具體的商品內容。

🍭 認識介面

1. 元件面板

在編輯器畫布區點擊定位到 Product list 這一層的元件時，右側對應顯示的元件面板內容。

項目編號	描述
⓵ 商品數量上限	快速控制這個 Product list 要顯示幾個商品格子。
⓶ 商品來源：模式與內容總結	展示這個 Product list 的商品模式：`自動更新`／`手動挑選`／`混合選品`，以及設定細節。
⓷ 商品來源：前往設定	點擊後，會展開詳細商品內容設定。 💡 如果要編輯設定細節，請一律點此進入。
⓸ 商品排序邏輯	在 `自動更新` 模式底下，快速控制這個 Product list 的 sorting 條件。
⓹ 日期區間	在 `自動更新` 模式底下，當 sorting 條件選中 awoo Pixel 數據時，快速控制這些數據的累計期間。
⓺ 更多供應狀態設定	預設收合。手動展開後，可快速控制這個 Product list 要自動隱藏哪些供應狀態 (availability) 的商品，針對哪些供應狀態的商品顯示特殊標記。

2. 詳細商品內容設定

在編輯器右側元件面板 > [設定] tab > [內容] 段落底下，點擊 [前往設定] 按鈕後展開。

項目編號	描述
⓵ 選品總結	預設收合，也可手動展開查看詳細的選品規則總結，一眼掌握當前的設定內容。
⓶ 商品一覽：已固定商品	展示這個 Product list 裡，手動選擇並固定住順序的商品。這些商品會顯示在「自動更新商品」的前方。
⓷ 商品一覽：自動更新商品	展示這個 Product list 裡，按照左側的篩選條件和排序邏輯動態查出的符合結果商品。這些商品會顯示在「已固定商品」的後方。 💡 本區塊預設啟用，若希望 Product list 只顯示手動挑選的商品，請關閉此區塊。
⓸ 列表顯示	控制這個 Product list 要顯示的商品格數上限。多餘未放入商品的空格，將在網店活動頁被 SDK 自動隱藏。
⓹ 貨態設定	控制這個 Product list 要自動隱藏哪些供應狀態 (availability) 的商品，針對哪些供應狀態的商品顯示特殊標記。
⓺ 指定標籤	控制這個 Product list 裡，「自動更新商品」部分的 AMP 標籤 filter 條件。
⓻ 進階篩選	控制這個 Product list 裡，「自動更新商品」部分的其他 filter 條件，例如品牌、商品分類。
⓼ 排序邏輯	控制這個 Product list 裡，「自動更新商品」部分的 sorting 條件。
⓽ 新增商品	點擊後，會進入選擇商品畫面，可手動挑選要放在「已固定商品」部分的內容。

頂部 — 選品總結

預設收合
點擊後可展開：
- 查看詳細的選品規則總結，一眼掌握當前的設定內容
- 直接點擊設定值部分的膠囊區塊，可快速叫出對應的細項設定面板，進行修改

右側 — 商品一覽

已固定商品

展示手動選擇並固定住順序的商品。
- 最多可以選擇和 Product list 顯示格數一樣的商品數
  
  例如：顯示數量上限設成 15 格，最多能挑 15 個商品
- 可自訂排序：
  - 支援手動拖曳排序
  - 支援套用 [排序] 選項進行一次性排序，排完之後商品順序隨即固定，不再發生變化
- 事後下架的商品 & 設定隱藏的供應狀態的商品，雖然不會出現在 Product list 裡面，但仍會佔據掉可固定格數，您需自行移除才能釋放額度
自動更新商品

按照左側的篩選條件和排序邏輯，動態展示符合結果的商品。

本區塊預設啟用，若希望只顯示手動挑選的商品，請關閉此區塊。
- 若未指定標籤 filter 也未指定進階篩選 filter，本區會撈出全站所有商品
- 預設只顯示前 30 個結果商品，點擊 [查看更多商品] 按鈕後可叫出分頁功能，完整檢視所有結果商品
- 可釘選成固定商品：
  - 支援在人工勾選 checkbox 後，將所選的商品設為固定商品
  - 支援直接點擊 [固定本區前 N 個商品] 按鈕，自動將最前方、尚未被固定的商品設為固定商品，直到補滿 Product list 的所有顯示格數
整個商品一覽
- 預設以卡片形式 (Card view) 呈現 Product list 的商品內容，也可以手動切換成列表形式 (List view)
- 支援在人工勾選 checkbox 後，替所選的商品直接新增 AMP 商品標籤，提供後續其他 AMP 功能應用
  
  例如：下完篩選條件後，全選自動更新區塊的符合結果商品，批次新增 [聖誕] 和 [禮物] 標籤。此後可以直接在 Campaign Star 商品列表，指定商品要來自這兩個標籤的交集。

左側 — 細項設定

列表顯示

控制整串 Product list 的商品格子數上限，最少 1 格、最多 30 格。
貨態設定
- 控制整串 Product list 要隱藏哪些供應狀態 (availability) 的商品
  
  例如：啟用 [隱藏無庫存商品] 後，當「吉○卡哇一番賞」被搶購一空變成無庫存，就會從網店活動頁上消失/隱藏
- 控制整串 Product list 要針對哪些供應狀態 (availability) 的商品顯示特殊標記
  
  例如：啟用 [顯示預購商品標記] 後，當「布○狗抱枕」為預購中，商品圖的底部就會被壓上特殊標記
❗️
注意：目前只開放修改標記的文案，不開放修改底色、字色等標記樣式
指定標籤

控制自動更新區塊的商品的 AMP 標籤 filter 條件。因此，停用自動更新功能時，無法設定。

本區的 filter 條件會以 and 邏輯和 進階篩選 的 filter 條件一起疊加套用。
- 有三種數據來源：
  - awoo 建議數據（預設值）
  - 自定義
  - 本頁設定過的標籤
- 當數據來源是「awoo 建議數據」時：
  - 可自訂建議標籤的邏輯依據
    - 選擇 Pixel 相關排序選項後，需額外指定這些 Pixel 數據的累計期間
  - 可限縮建議標籤要和什麼 term 有關（要以什麼 term1 為開頭的基底，建議 2-term 標籤組合）
    - 預設會提供這個 Product list 所屬的 Section 的基底標籤，可點擊快速套用
    - 也可點擊 [＋其他標籤] 按鈕，自行指定最多 1 個 term
  - 可按照「標籤屬性 (literal)」分群建議標籤的結果
- 設定標籤 filter：
  - 「正面包含 (include)」標籤：
    - 直接點擊標籤查詢結果，可以直接新增，最多 3 個
    - 這些標籤之間會以 and 邏輯相連結
  - 「負面排除 (exclude)」標籤：
    - 點擊 [＋排除標籤] 按鈕，可以自行指定新增，最多 3 個
    - 這些標籤之間會以 or 邏輯相連結
📘
目前 awoo Page（Page API）和搜尋結果頁（SiteSearch API）會套用標籤文案偏好規則找商品。例如：設定用 [牛奶] 取代 [鮮乳][鮮奶] 時，給定標籤為 [牛奶] 會查出 [牛奶] OR [鮮乳] OR [鮮奶] 的聯集商品。
然而 Campaign Star 找商品時，只會找原始標籤符合條件的商品。沿用同一個例子：設定用 [牛奶] 取代 [鮮乳][鮮奶] 時，給定標籤為 [牛奶] 只會查出 [牛奶] 本身的商品，不會一起查出 [鮮乳] OR [鮮奶] 的商品。
這可能導致同一組正面包含的標籤，在 Campaign Star 查出的商品內容，和 awoo Page 查出的不一樣。

進階篩選

控制自動更新區塊的商品的其他 filter 條件（除了 AMP 標籤以外的 filter 條件）。因此，停用自動更新功能時，無法設定。

本區的 filter 條件會以 and 邏輯和 指定標籤 的 filter 條件一起疊加套用。

每個「條件群組」底下由一或多個「條件」組成
不同的群組之間，或同個群組底下的不同條件之間，可統一控制要以 and 或 or 邏輯互相連結
不管有幾個條件群組，最多只開放 5 個條件，達上限後將無法再新增
每個條件由篩選維度、比對邏輯、要比對的內容這三個要素構成
- 例一： [商品 ID] 排除 [A16888, C52099]
- 例二： [品牌] 包含 [Ad○das, P○ma, New Bal○nce]
- 例三： [折扣比例] 介於 [10% 至 15%]
詳細篩選維度介紹：

	篩選維度	Feed 資料源	比對邏輯	說明
1	商品 ID	pid	包含／排除	▪ 上限 100 個 PID ▪ 請輸入完全一致的值 ▪ 一次輸入多個時，請用半形空格、逗號或換行分隔不同 PID
2	商品標題	title	包含／排除	▪ 上限 50 字元 ▪ 可輸入部分一致的值
3	商品分類	product_type	包含／排除	▪ 上限 1 個分類
4	品牌	brand	包含／排除	▪ 上限 3 個品牌 ▪ 注意比對的是 Feed 資料，而非 literal=brand 的標籤
5	最終價格	優先使用 sale_price，找不到時使用 price	大於／等於／小於／介於	▪ Feed 同時提供原價與售價時，一律比對售價 (sale_price) ▪ Feed 僅提供原價時，比對原價 (price)
6	折扣差額	同時看 sale_price 和 price	大於／等於／小於／介於	▪ 系統依 Feed 資料自動計算，無需額外提供 ▪ 算式：原價 - 售價 ▪ Feed 未同時提供原價與售價時，表示無折扣，該商品不列入比對
7	折扣比例 (% off)	同時看 sale_price 和 price	大於／等於／小於／介於	▪ 系統依 Feed 資料自動計算，無需額外提供 ▪ 算式：(原價 - 售價) ÷ 原價 × 100% ▪ Feed 未同時提供原價與售價時，表示無折扣，該商品不列入比對
8	網店上架時間	product_create_time	晚於／等於／早於／介於	▪ Feed 未提供時，改比對 Feed 資料建立時間 (created_at)
9	最後更新時間	updated_at	晚於／等於／早於／介於	－

排序邏輯

控制自動更新區塊的商品的 sorting 條件。因此，停用自動更新功能時，無法設定。

預設排序：
- 未安裝 awoo Pixel 時，為「新品在前：商品資料更新時間」
- 有安裝 awoo Pixel 時，為「過去 30 天」的「熱門瀏覽商品」在前
選擇 Pixel 相關選項後，需額外指定這些 Pixel 數據的累計期間

詳細排序邏輯介紹：

	商品排序邏輯選項	資料來源	說明
	———— Feed 必備資料 ————	———————	——————————————————
1	價格高至低	Product feed	看 `price` 欄位
2	價格低至高	Product feed	看 `price` 欄位
3	新品在前：商品初次進入資料庫時間	Product feed	看 `created_at` 欄位
4	新品在前：商品最後更新時間	Product feed	看 `updated_at` 欄位
	———— Feed 選填資料 ————	———————	若 Feed 無此資料，選擇後將無效果
5	新品在前：網店上架時間	Product feed	看 `product_create_time` 欄位
6	熱門度高到低	Product feed	看 `popularity` 欄位
7	喜愛度高到低	Product feed	看 `favorite` 欄位
8	銷量高到低	Product feed	看 `sales_volume` 欄位
9	評分高到低	Product feed	看 `rating` 欄位
10	評論數多到少	Product feed	看 `review_count` 欄位
	———— Pixel 事件資料 ————	———————	必須安裝完的 Pixel 事件才可選擇
11	熱門瀏覽商品	awoo Pixel	累計商品的瀏覽事件次數 🗓 需指定累計資料的日期區間
12	熱門加入購物車商品	awoo Pixel	累計商品的加入購物車事件次數 🗓 需指定累計資料的日期區間
13	熱門購買商品	awoo Pixel	累計商品的購買事件次數 🗓 需指定累計資料的日期區間
14	商品收益高至低	awoo Pixel	累計商品的購買事件的收益 🗓 需指定累計資料的日期區間

📘
目前 awoo Page（Page API）和搜尋結果頁（SiteSearch API）會先用商品的供應狀態 (availability) 排序，使 inStock 有現貨 → preOrder 預購 → backOrder 缺貨待補 → outOfStock 缺貨中，每種供應狀態裡面再按照指定邏輯的數值排序。
然而 Campaign Star 完全只按照指定邏輯的數值排序商品，所以有可能出現「preOrder → inStock → outOfStock → backOrder → inStock」這種供貨狀態混雜的商品順序。
這可能導致同一組正面包含的標籤，在 Campaign Star 查出的商品順序，和 awoo Page 查出的不一樣。

選擇商品畫面

在已固定商品區塊底下，點擊 [新增商品] 按鈕後進入。

可指定 filter 或 sorting 等條件，縮小商品範圍，再勾選一或多個目標商品，將之設為固定商品。

注意此處的 filter 條件之間一律固定以 and 邏輯連結，只支援找出交集 (intersection) 的結果。

👩‍🏫 不同模式的設定範例

Product list 的商品內容可以分成下列三種模式進行設定：

自動模式 (Dynamic Mode)

完全基於篩選條件與排序邏輯自動更新商品的項目和順序。

範例情境：

展示全站最新上架的八折促銷商品
設定步驟：
1. 從編輯器的元件面板點擊 [前往設定] 按鈕，進入商品內容設定
2. 在右側 [商品一覽] > [自動更新商品] 區塊，啟用開關
3. 點擊左側 [進階篩選] 按鈕，設定篩選條件為「折扣比例」等於「20%」
4. 點擊左側 [排序邏輯] 按鈕，設定排序邏輯為「新品在前」
5. 即時預覽右側 [商品一覽] > [自動更新商品] 區塊找出的商品項目和順序
6. 點擊右下角的 [儲存] 按鈕，保存設定值

混合模式 (Mixed Mode)

優先顯示手動固定的重點商品，再顯示自動更新的動態補充商品。

範例情境：

在聖誕節檔期，展示某品牌的熱門商品，其中耶誕特別聯名款要釘選在最前方作為主打
設定步驟：
1. 從編輯器的元件面板點擊 [前往設定] 按鈕，進入商品內容設定
2. 設定主打商品：
  1. 在右側 [商品一覽] > [已固定商品] 區塊，點擊 [新增商品] 按鈕
  2. 在 [選擇商品] 畫面：
    1. 點擊 [品牌] 篩選器，輸入「Ad○das」套用查詢
    2. 點擊 [商品標題] 篩選器，輸入「耶誕」關鍵字套用查詢
    3. 在結果商品池裡勾選目標商品，點擊下方懸浮操作列的 [設為固定商品] 按鈕
  3. 退出 [選擇商品] 畫面
  4. 即時預覽 [商品一覽] > [已固定商品] 區塊的商品項目和順序
3. 設定自動更新商品：
  1. 在右側 [商品一覽] > [自動更新商品] 區塊，啟用開關
  2. 點擊左側 [進階篩選] 按鈕，設定篩選條件為「品牌」包含「Ad○das」
  3. 點擊左側 [排序邏輯] 按鈕，設定排序邏輯為「Pixel 商品收益高在前」
  4. 即時預覽右側 [商品一覽] > [自動更新商品] 區塊找出的商品項目和順序
4. 點擊右下角的 [儲存] 按鈕，保存設定值

手動模式 (Manual Mode)

完全自訂商品的項目和順序，滿足特定行銷需求。

範例情境：

展示人工事先定案好的商品
設定步驟：
1. 從編輯器的元件面板點擊 [前往設定] 按鈕，進入商品內容設定
2. 在右側 [商品一覽] > [自動更新商品] 區塊，停用開關
3. 在右側 [商品一覽] > [已固定商品] 區塊，點擊 [新增商品] 按鈕
4. 在 [選擇商品] 畫面：
  1. 點擊 [商品 ID] 篩選器，輸入 PID 後套用查詢
  2. 在結果商品池裡勾選目標商品，點擊下方懸浮操作列的 [設為固定商品] 按鈕
5. 退出 [選擇商品] 畫面
6. 即時預覽右側 [商品一覽] > [已固定商品] 區塊的商品項目和順序
  1. 手動拖曳改變順序
7. 點擊右下角的 [儲存] 按鈕，保存設定值