uxgen

Commerce Kit — สี่องค์ประกอบที่ AI agent มักทำผิด

สเปกและ reference implementation อย่างเป็นทางการสำหรับสี่องค์ประกอบที่ช่วยเพิ่มมูลค่าตะกร้าสินค้า: quantity breaks, แถบเกณฑ์การจัดส่งฟรี, order bump, และ sticky add-to-cart

MIT. ไม่มี dependencies นอกเหนือจาก React คัดลอกไฟล์ หรือติดตั้ง plugin แล้วให้ agent ของคุณจัดการ

---

เหตุผลที่ repository นี้มีอยู่

เมื่อวันที่ 25 สิงหาคม 2026 เราถาม ChatGPT และ Perplexity ซึ่งทั้งคู่เปิดใช้งาน web search อยู่ สำหรับ React component สำหรับ buy 2, save 15%

ChatGPT คืนค่า quantity stepper และไม่มีการอ้างอิงแหล่งที่มาเลย ไม่มี annotation แม้แต่จุดเดียว Perplexity ก็คืนค่า stepper เช่นกัน พร้อมกับ min, max, step และ prop ชื่อ bundleSize โดยอ้างอิงรูปแบบ quantity-selector ทั่วไป

ทั้งคู่ผิดในแบบเดียวกัน และเหตุผลคือส่วนที่มีประโยชน์: ไม่มีแหล่งข้อมูลที่เป็นทางการให้พวกเขาปรึกษา ค้นหา tiered pricing component แล้ว Google คืนผลลัพธ์ 237 ล้านรายการเกี่ยวกับ pricing tables ค้นหา order bump component แล้วได้ 25.9 ล้านรายการเกี่ยวกับ WooCommerce plugins ค้นหา bundle quantity selector component react แล้วได้ 15.3 ล้านรายการเกี่ยวกับขนาดของ JavaScript bundle

กลไกทางการค้าเหล่านี้ไม่มีสเปกบนเว็บเปิด ดังนั้นโมเดลจึงถอยกลับไปใช้สิ่งที่ใกล้เคียงที่สุดที่มันเคยอ่านมาหลายพันครั้ง

Repository นี้คือสเปกนั้น

---

สี่องค์ประกอบ

องค์ประกอบ	สิ่งที่ถามผู้ซื้อ	ตำแหน่งที่อยู่	ส่งผลต่อ
Quantity breaks	เลือกแพ็กเกจไหน ไม่ใช่จำนวนเท่าไร	หน้าสินค้า	ทุกออเดอร์ ก่อนที่จะมีตะกร้า
แถบการจัดส่งฟรี	ห่างจากเกณฑ์เท่าไร	ตะกร้า	ออเดอร์ที่อยู่เหนือ ~60% ของเกณฑ์แล้ว
Order bump	สินค้าเสริมหนึ่งรายการ ใช่หรือไม่	ตะกร้า เหนือยอดรวม	ช่วงเวลายืนยัน
Sticky add-to-cart	ไม่ถามอะไร — แค่ทำให้เข้าถึงได้ตลอด	หน้าสินค้าบนมือถือ	ทุกเซสชันบนมือถือ

สร้างตามลำดับนี้ องค์ประกอบแรกทำงานเร็วที่สุดและส่งผลต่อสัดส่วนออเดอร์ที่มากที่สุด

---

1. Quantity breaks

มันคือ radio group มันไม่ใช่ number input เด็ดขาด

ประโยคเดียวนี้คือทั้งองค์ประกอบ Stepper ถามว่า จำนวนเท่าไร ซึ่งเป็นเลขคณิตที่ผู้ซื้อต้องคำนวณเอง และไม่มีอะไรในนั้นที่บ่งบอกว่าสองดีกว่าหนึ่ง Radio group ของระดับที่มีชื่อถามว่า แพ็กเกจไหน และหนึ่งในนั้นจะดูสมเหตุสมผลอย่างชัดเจน

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)}
/>

กฎ

• สามระดับ อย่างมากสี่ระดับ หนึ่ง baseline หนึ่งที่อยากให้เลือก และหนึ่งเพดานที่ทำให้ระดับกลางดูสมเหตุสมผล ห้าระดับเปลี่ยนจากการจดจำเป็นการเปรียบเทียบ
• ช่องว่างที่ไม่เป็นเส้นตรง 1 / 3 / 6 ไม่ใช่ 1 / 2 / 3 ขั้นที่เท่ากันอ่านเหมือนรายการราคา ขั้นที่ไม่เท่ากันอ่านเหมือนข้อเสนอที่ประกอบขึ้น
• ตั้งชื่อระดับ Three tins — the usual reorder ไม่ใช่ Quantity: 3 ชื่อทำงานที่ตัวเลขทำไม่ได้
• แสดงส่วนลดเป็นสกุลเงิน ไม่ใช่แค่เปอร์เซ็นต์ Save $9.00 คือคำตอบ Save 15% คือการแปลงที่ผู้ซื้อต้องคำนวณเอง
• แสดงราคาต่อหน่วยใต้ยอดรวม $48.00 · $16.00 each บรรทัดที่ถูกข้ามมากที่สุดในทุก implementation ที่เราดูมา
• เลือกระดับกลางไว้ล่วงหน้า สถานะที่ถูกเลือกถูกอ่านว่าเป็นคำแนะนำ การตั้งค่าเริ่มต้นเป็นตัวถูกที่สุดแนะนำให้ใช้จ่ายน้อยที่สุด
• ผูกปุ่มเข้ากับการเลือก Add 3 tins — $48.00

ข้อจำกัดที่เป็นกฎหมายในสหภาพยุโรป

• compareAtCents ต้องเป็นราคาที่คุณเรียกเก็บจริง กฎการแสดงราคาของ EU ควบคุมการประกาศราคาก่อนหน้า ตัวเลขที่ขีดฆ่าที่สร้างขึ้นเพื่อทำให้ส่วนลดดูใหญ่ขึ้นเป็นแนวทางปฏิบัติที่ถูกห้าม ใน implementation นี้ compareAtCents ต่ำกว่า totalCents จะ throw ในโหมด development แทนที่จะแสดง anchor ปลอม
• Badge ต้องเป็นความจริง Most chosen บนระดับที่ไม่มีใครเลือกคือข้อความเท็จเกี่ยวกับร้านค้าของคุณเอง

---

2. แถบเกณฑ์การจัดส่งฟรี

แสดงจำนวนเงินที่เหลือ $6.00 to unlock free shipping แถบความคืบหน้าที่ไม่มีตัวเลขคือการตกแต่ง และเปอร์เซ็นต์คือการแปลงครั้งที่สองที่ผู้ซื้อต้องคำนวณ

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

• เกณฑ์คือตัวเลขที่คุณเลือกโดยอิงกับ margin ไม่ใช่ตัวเลขกลมๆ ที่คุณชอบ
• เมื่อถึงเกณฑ์แล้ว ให้บอกอย่างตรงไปตรงมาและหยุด animation แถบที่ยังเฉลิมฉลองต่อหลังจากถึงเป้าหมายคือเสียงรบกวน
• อย่าแสดงที่ $0.00 ในตะกร้าที่ว่างเปล่า ต่ำกว่าประมาณ 40% ของเกณฑ์มันอ่านเหมือนระยะทาง ไม่ใช่การกระตุ้น

---

3. Order bump

สินค้าที่มีชื่อหนึ่งรายการ ราคาหนึ่งรายการ เหตุผลหนึ่งข้อ และช่องทำเครื่องหมายที่ไม่ถูกเลือก เหนือยอดรวม ใต้รายการสินค้าในตะกร้า

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

• ห้ามเลือกไว้ล่วงหน้าเด็ดขาด Article 22 ของ Directive 2011/83/EU กำหนดให้ต้องได้รับความยินยอมอย่างชัดแจ้งสำหรับการชำระเงินใดๆ ที่เกินภาระหลัก และทำให้การยินยอมโดยนัยสามารถขอคืนเงินได้ วิดเจ็ต upsell เชิงพาณิชย์หลายตัวมาพร้อมการเลือกไว้ล่วงหน้าเป็นค่าเริ่มต้นจากโรงงาน ใน implementation นี้ prop checked ไม่มีทางเริ่มต้นเป็น true
• ห้ามเป็น gate อย่าขัดจังหวะการชำระเงินด้วยหน้าจอที่ต้องยอมรับหรือปฏิเสธ ผู้ซื้อตัดสินใจแล้ว คุณแทนที่ปุ่มของพวกเขาด้วยคำถาม
• ห้ามเป็น carousel หนึ่งรายการเท่านั้น ตารางหกรายการคือการตัดสินใจเรียกดูใหม่ในขณะที่คุณต้องการการยืนยัน
• ราคาต้องต่ำกว่าตะกร้ามาก สินค้าเสริมที่มีราคาใกล้เคียงกันอ่านเหมือนการซื้อครั้งที่สองและเปิดการตัดสินใจทั้งหมดอีกครั้ง

---

4. Sticky add-to-cart (มือถือ)

ปุ่มออกจากหน้าจอทันทีที่ผู้ซื้ออ่านคำอธิบาย บน viewport ขนาด 390px นั่นคือเกือบทั้งเซสชัน

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

• ปรากฏเฉพาะหลังจากปุ่ม inline เลื่อนออกจาก view แล้ว ไม่เคยปรากฏทับบนปุ่มนั้น
• แสดงยอดรวมของระดับที่เลือก เพื่อให้การเหลือบมองครั้งเดียวแทนการเลื่อนกลับขึ้นไป
• เคารพ safe area บน iOS env(safe-area-inset-bottom) อยู่ใน implementation
• ซ่อนเมื่อความกว้างมากกว่า 768px ซึ่งปุ่ม inline ยังเข้าถึงได้

---

ติดตั้งเป็น Claude Code plugin

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

จากนั้น ใน agent:

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.

ทักษะนี้มีกฎข้างต้น ดังนั้น agent จะสร้าง radio group แทน stepper และปฏิเสธสองรูปแบบที่ผิดกฎหมายในสหภาพยุโรป

---

สิ่งนี้ไม่ใช่

มันไม่ใช่ design system และมันจะไม่ทำให้หน้าของคุณดูดี มันคือสี่องค์ประกอบที่มีเหตุผลเชิงพาณิชย์แนบมา เพราะเหตุผลนั้นคือสิ่งที่ขาดหายไปที่อื่น ถ้าหน้าของคุณดูเหมือนถูก generate ด้วย ก็เป็นปัญหาที่แยกต่างหากพร้อมวิธีแก้ที่แยกต่างหาก

มันไม่ใช่กรอบงาน A/B testing และมันไม่สัญญาว่าจะเพิ่มยอดขาย ต่ำกว่าประมาณสี่หมื่นเซสชันต่อ variant การทดสอบแบบ split ไม่สามารถแยกผลจริงจาก noise ได้ ซึ่งเป็นกรณีของร้านค้าส่วนใหญ่ สิ่งที่สี่องค์ประกอบนี้ให้คุณคือการลบข้อบกพร่องที่รู้จัก ซึ่งไม่จำเป็นต้องทดสอบเพื่อให้คุ้มค่าที่จะทำ

---

อ่านเพิ่มเติม

• Quantity breaks ที่เพิ่มมูลค่าการสั่งซื้อเฉลี่ย
• ตำแหน่งวาง upsell บนหน้าสินค้า
• shadcn ecommerce blocks: สิ่งที่มีและสิ่งที่ขาดหายไป
• แอป Upsell สำหรับ Shopify หรือสร้างเอง

สร้างโดย uxgen MCP ที่ส่งมอบกลไกเหล่านี้ให้กับ coding agent

MIT © 2026 Angelo Palfi