💡 應用場景

---

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

🔰 基本介紹

---

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

• 細部元件架構：

• 聯動編輯效果：

  在某一格商品修改元件樣式，會連動修改整串 Product list 的元件樣式，節省重複編輯的工夫

• 內容設定：

  • 在全自動模式下，Product list 的內容是動態 (Dynamic) 的：

    在後台編輯器儲存頁面的時候，只會儲存商品來源的 filter 和 sorting 條件，SDK 活動頁再根據來源條件，動態呈現／自動更新具體的商品內容。

  • 在全手動模式下，Product list 的內容是靜態 (Static) 的：

    在後台編輯器儲存頁面的時候，指定了什麼商品 ID，SDK 活動頁就會固定秀什麼商品，不會自動更新。

  • 在混合模式下，Product list 的前面內容是靜態 (Static) 的，後方內容是動態 (Dynamic) 的：

    在後台編輯器儲存頁面的時候，會同時儲存使用者指定的商品 ID 和 商品來源的 filter 和 sorting 條件，SDK 活動頁前面先固定秀您釘選的商品，後方再根據來源條件，動態呈現／自動更新具體的商品內容。

🍭 認識介面

---

1. 元件面板

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

2. 詳細商品內容設定

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

頂部 — 選品總結

---

• 預設收合
• 點擊後可展開：

  • 查看詳細的選品規則總結，一眼掌握當前的設定內容

  • 直接點擊設定值部分的膠囊區塊，可快速叫出對應的細項設定面板，進行修改

    

右側 — 商品一覽

---

• 已固定商品

  展示手動選擇並固定住順序的商品。

  • 最多可以選擇和 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. 點擊右下角的 [儲存] 按鈕，保存設定值