uxgen

Commerce Kit — AI 代理搞錯的四個元件

這是四個能提高購物車金額的元件的標準規格與參考實作：數量優惠（quantity breaks）、免運門檻進度條（free-shipping threshold bar）、訂單加購（order bump），以及固定式加入購物車按鈕（sticky add-to-cart）。

MIT 授權。除了 React 之外沒有其他依賴。複製檔案，或安裝外掛並讓你的代理來處理。

---

為什麼會有這個 repository

2026 年 8 月 25 日，我們讓 ChatGPT 和 Perplexity（兩者皆啟用網路搜尋）產生一個 buy 2, save 15% 的 React 元件。

ChatGPT 回傳了一個數量步進器，而且完全沒有引用任何來源。 零註解。Perplexity 也回傳了步進器，帶有 min、max、step 和一個 bundleSize prop，引用的是通用的數量選擇器模式。

兩者以同樣的方式出錯，而原因正是有價值的地方：沒有權威來源可以參考。搜尋 tiered pricing component 和 Google 會回傳 2.37 億筆關於定價表的結果。搜尋 order bump component 會回傳 2,590 萬筆關於 WooCommerce 外掛的結果。搜尋 bundle quantity selector component react 會回傳 1,530 萬筆關於 JavaScript bundle 大小的結果。

這些商業機制在開放網路上沒有規格，所以模型只能退而求其次，採用它讀過一千次、最接近的東西。

這個 repository 就是那份規格。

---

四個元件

元件	它問買家什麼	它位於哪裡	作用於
數量優惠	要哪個方案，而不是要幾個	商品頁	每一筆訂單，在購物車存在之前
免運門檻進度條	距離門檻還差多少	購物車	已超過門檻約 60% 的訂單
訂單加購	一個搭配商品，要或不要	購物車，總計上方	確認的時刻
固定式加入購物車	什麼都不問——它只是保持可點擊	手機版商品頁	每個手機瀏覽時段

按照這個順序建置。第一個作用得最早，且影響最大比例的訂單。

---

1. 數量優惠

它是單選按鈕群組。它永遠不是數字輸入框。

這一句話就是整個元件的全部。步進器問的是要幾個，這是買家必須自己做的算術，而且它完全沒有暗示「買兩個比買一個好」。單選按鈕群組列出有名稱的方案，問的是要哪個方案，而其中一個明顯是比較合理的選擇。

import { QuantityBreaks } from "./src/quantity-breaks"

<QuantityBreaks
  tiers={[
    { units: 1, name: "One tin",   totalCents: 1900, compareAtCents: 1900 },
    { units: 3, name: "Three tins — the usual reorder",
      totalCents: 4800, compareAtCents: 5700, badge: "Most chosen", preselected: true },
    { units: 6, name: "Six tins — the year",
      totalCents: 9000, compareAtCents: 11400 },
  ]}
  currency="USD"
  onChange={(tier) => setSelected(tier)}
/>

規則

• 三個方案，最多四個。 一個基準、一個你希望被選中的、一個讓中間選項看起來合理的上限。五個會把「辨識」變成「比較」。
• 非線性差距。 是 1 / 3 / 6，不是 1 / 2 / 3。等距的級距讀起來像價目表；不等距的讀起來像精心設計的組合。
• 為方案命名。 是 Three tins — the usual reorder，不是 Quantity: 3。名稱能做到數字做不到的事。
• 以貨幣金額顯示省下的錢，而不只是百分比。Save $9.00 才是答案；Save 15% 是買家還得自己算的換算。
• 在總價下方顯示單價。 $48.00 · $16.00 each。這是我們看過的每個實作中最常被跳過的一行。
• 預先選取中間方案。 選取狀態會被解讀為推薦。預設選最便宜的，等於推薦花最少的錢。
• 將按鈕綁定到選取狀態。 Add 3 tins — $48.00。

在歐盟具有法律效力的限制

• compareAtCents 必須是你實際收取過的價格。 歐盟的價格標示規定管轄「先前價格」的公告。為了放大折扣而虛構的劃線價格是禁止的行為。在這個實作中，compareAtCents 低於 totalCents 時會在開發環境拋出錯誤，而不是渲染一個虛假的錨點價格。
• 徽章必須是真實的。 在沒人會選的方案上放 Most chosen，等於對你自己的商店做出虛假陳述。

---

2. 免運門檻進度條

以貨幣金額顯示剩餘金額。 $6.00 to unlock free shipping。沒有數字的進度條只是裝飾，而百分比是買家還得自己做的第二次換算。

<FreeShippingBar subtotalCents={4400} thresholdCents={5000} currency="USD" />

• 門檻是你根據利潤率選定的數字，不是一個你喜歡的整數。
• 一旦達標，就明確說明並停止動畫。目標達成後還在慶祝的進度條只是噪音。
• 在購物車為空時，不要在 $0.00 顯示它。低於門檻約 40% 時，它讀起來像一段距離，而不是一個推力。

---

3. 訂單加購

一個有名稱的商品、一個價格、一個理由、一個未勾選的方塊。 位於總計上方、購物車內容下方。

<OrderBump
  item={{ name: "Steel scoop", priceCents: 600, reason: "Measures one serving exactly." }}
  onToggle={(added) => setBump(added)}
/>

• 絕不預先勾選。 Directive 2011/83/EU 第 22 條 要求對主合約義務以外的任何付款取得明確同意，並使「默示同意」可退款。有幾個商業加購外掛的工廠預設值就是預先勾選。在這個實作中，checked prop 沒有任何方式可以讓它從 true 開始。
• 絕不設為關卡。 不要用一個必須接受或拒絕的畫面打斷結帳流程。買家已經做了決定；你卻把他們的按鈕換成了一個問題。
• 絕不使用輪播。 只有一個商品。六個商品的網格，是在你想要確認的時刻，重新開啟一個瀏覽決策。
• 價格要遠低於購物車金額。 價格相近的搭配商品讀起來像第二次購買，會重新開啟整個決策。

---

4. 固定式加入購物車（手機版）

按鈕在買家閱讀商品描述的那一刻就離開畫面。在 390px 的視窗上，這佔了大部分瀏覽時間。

<StickyAddToCart label="Add 3 tins" totalCents={4800} currency="USD" onAdd={add} />

• 只在內嵌按鈕滾出畫面之後出現，絕不覆蓋在它上面。
• 攜帶所選方案的總價，讓買家瞄一眼就能取代往上滾的動作。
• 尊重 iOS 的安全區域。env(safe-area-inset-bottom) 已包含在實作中。
• 在 768px 以上隱藏，因為內嵌按鈕仍然可及。

---

安裝為 Claude Code 外掛

/plugin marketplace add kinerette/uxgen-commerce-kit
/plugin install commerce-kit@uxgen

然後，在代理中：

Use the commerce-kit skill. Add quantity breaks to this product page:
three tiers at 1 / 3 / 6, the middle one marked and preselected,
saving shown in currency, and bind the add-to-cart button to the selection.

這個 skill 帶有上述規則，所以代理會建立單選按鈕群組而不是步進器，並拒絕兩種在歐盟不合法的模式。

---

這不是什麼

它不是設計系統，也不會讓你的頁面變好看。它是四個元件，附帶商業邏輯的說明，因為那份邏輯正是其他地方都缺少的東西。如果你的頁面看起來也很「生成感」，那是另一個問題，需要另一個解法。

它不是 A/B 測試框架，也不保證你能提升轉換率。在每個變體約四萬次以下的工作階段，分割測試無法區分真實效果與雜訊——而這正是大多數商店的情況。這四個元件給你的是移除一個已知的疏漏，而這不需要測試也值得做。

---

相關閱讀

• 提高平均訂單金額的數量優惠
• 商品頁上的加購位置
• shadcn ecommerce blocks：有什麼、缺什麼
• Shopify 的加購應用程式，或自己打造

由 uxgen 建立——這個 MCP 將這些機制交給程式碼代理。

MIT © 2026 Angelo Palfi