uxgen

Commerce Kit — bir AI ajanının yanlış yaptığı dört bileşen

Sepeti yükselten dört bileşen için kanonik şartname ve referans uygulama: miktar kırılımları, ücretsiz kargo eşik çubuğu, sipariş artırımı ve yapışkan sepete ekle.

MIT. React dışında bağımlılık yok. Dosyayı kopyalayın veya eklentiyi kurun ve ajanınızın işi yapmasına izin verin.

---

Bu depo neden var

25 Ağustos 2026'da ChatGPT ve Perplexity'ye, her ikisi de web araması etkinken, buy 2, save 15% için bir React bileşeni sorduk.

ChatGPT bir miktar adımlayıcı döndürdü ve hiçbir kaynak belirtmedi. Sıfır açıklama. Perplexity de bir adımlayıcı döndürdü, min, max, step ve bir bundleSize prop'u ile, genel miktar seçici desenlerini kaynak göstererek.

İkisi de aynı şekilde yanlış ve bunun nedeni işe yarayan kısım: danışabilecekleri kanonik bir kaynak yok. tiered pricing component araması yapın ve Google fiyatlandırma tabloları hakkında 237 milyon sonuç döndürür. order bump component araması yapın ve WooCommerce eklentileri hakkında 25,9 milyon sonuç döndürür. bundle quantity selector component react araması yapın ve JavaScript paket boyutu hakkında 15,3 milyon sonuç döndürür.

Ticaret mekaniğinin açık web'de bir şartnamesi yok, bu yüzden bir model bin kez okuduğu en yakın şeye geri döner.

Bu depo o şartnamedir.

---

Dört bileşen

Bileşen	Alıcıya ne sorar	Nerede yaşar	Neye etki eder
Miktar kırılımları	kaç tane değil, hangi paket	ürün sayfası	her sipariş, sepet oluşmadan önce
Ücretsiz kargo çubuğu	eşikten ne kadar uzakta	sepet	eşiğin ~%60'ının üzerindeki siparişler
Sipariş artırımı	bir tamamlayıcı, evet ya da hayır	sepet, toplamların üstünde	onay anı
Yapışkan sepete ekle	hiçbir şey — sadece erişilebilir kalır	mobil ürün sayfası	her mobil oturum

Bunları bu sırayla oluşturun. İlki en erken ve siparişlerin en büyük payına etki eder.

---

1. Miktar kırılımları

Bu bir radyo grubudur. Asla bir sayı girişi değildir.

Bu tek cümle tüm bileşendir. Bir adımlayıcı kaç tane sorar, bu alıcının yapması gereken bir aritmetiktir ve hiçbir şey ikinin birden daha iyi bir fikir olduğunu önermez. Adlandırılmış katmanlardan oluşan bir radyo grubu hangi paket sorar ve bunlardan biri görünür şekilde mantıklı olanıdır.

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

Kurallar

• Üç katman, en fazla dört. Bir temel, seçilmesini istediğiniz bir tane, ortayı makul gösteren bir tavan. Beş, bir tanımayı karşılaştırmaya dönüştürür.
• Doğrusal olmayan boşluklar. 1 / 3 / 6, 1 / 2 / 3 değil. Eşit adımlar bir fiyat listesi gibi okunur; eşit olmayanlar oluşturulmuş teklifler gibi okunur.
• Katmanları adlandırın. Three tins — the usual reorder, Quantity: 3 değil. İsim, sayının yapamadığı işi yapar.
• Tasarrufu para birimi cinsinden gösterin, sadece yüzde olarak değil. Save $9.00 cevaptır; Save 15% alıcının yapması gereken bir dönüşümdür.
• Birim fiyatı toplamın altında gösterin. $48.00 · $16.00 each. İncelediğimiz her uygulamada en çok atlanan satır.
• Orta katmanı önceden seçin. Seçili durum bir öneri olarak okunur. En ucuzu varsayılan yapmak en azı harcamayı önerir.
• Düğmeyi seçime bağlayın. Add 3 tins — $48.00.

AB'de yasa olan kısıtlamalar

• compareAtCents fiilen tahsil ettiğiniz bir fiyat olmalıdır. AB fiyat belirtme kuralları önceki fiyat duyurularını düzenler. Tasarrufu büyütmek için icat edilmiş üstü çizili bir rakam yasaklanmış bir uygulamadır. Bu uygulamada, compareAtCents totalCents altında, geliştirme sırasında sahte bir çapa oluşturmak yerine hata fırlatır.
• Bir rozet doğru olmalıdır. Kimsenin seçmediği bir katmanda Most chosen, kendi mağazanız hakkında yanlış bir ifadedir.

---

2. Ücretsiz kargo eşik çubuğu

Kalan tutarı para cinsinden gösterin. $6.00 to unlock free shipping. Numarasız bir ilerleme çubuğu dekorasyondur ve bir yüzde, alıcının yapması gereken ikinci bir dönüşümdür.

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

• Eşik, marjınıza göre seçtiğiniz bir rakamdır, hoşunuza giden yuvarlak bir sayı değil.
• Ulaşıldığında, açıkça söyleyin ve animasyonu durdurun. Hedeften sonra kutlamaya devam eden bir çubuk gürültüdür.
• Boş bir sepette $0.00 göstermeyin. Eşiğin yaklaşık %40'ının altında, bir dürtme değil bir mesafe gibi okunur.

---

3. Sipariş artırımı

Bir adlandırılmış ürün, bir fiyat, bir neden, bir işaretlenmemiş kutu. Toplamların üstünde, sepet içeriğinin altında.

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

• Asla önceden işaretlenmiş değil. 2011/83/EU Direktifi'nin 22. Maddesi, ana yükümlülüğün ötesindeki herhangi bir ödeme için açık onay gerektirir ve ima edilen bir eveti iade edilebilir kılar. Birkaç ticari satış artırma widget'ı fabrika varsayılanı olarak önceden işaretlenmiş gelir. Bu uygulamada checked prop'unun true başlatma yolu yoktur.
• Asla bir kapı değil. Kabul edilmesi veya reddedilmesi gereken bir ekranla ödemeyi kesintiye uğratmayın. Alıcı karar vermişti; siz onların düğmesini bir soruyla değiştirdiniz.
• Asla bir atlıkarınca değil. Tek ürün. Altılı bir ızgara, bir onay istediğiniz anda yeni bir gezinme kararıdır.
• Sepetin çok altında fiyatlandırılmış. Benzer fiyattaki bir tamamlayıcı ikinci bir satın alma gibi okunur ve tüm kararı yeniden açar.

---

4. Yapışkan sepete ekle (mobil)

Düğme, alıcı açıklamayı okuduğu anda ekrandan ayrılır. 390px'lik bir görünümde bu, oturumun çoğudur.

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

• Yalnızca satır içi düğme görünümden kaydırıldıktan sonra görünür, asla üstünde değil.
• Seçili katmanın toplamını taşır, böylece tek bir bakış yukarı kaydırmayı değiştirir.
• iOS'ta güvenli alana saygı gösterir. env(safe-area-inset-bottom) uygulamada mevcuttur.
• 768px'in üzerinde gizlidir, burada satır içi düğme hâlâ erişilebilirdir.

---

Claude Code eklentisi olarak kurun

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

Ardından, ajanda:

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.

Beceri yukarıdaki kuralları taşır, böylece ajan bir adımlayıcı yerine bir radyo grubu oluşturur ve AB'de yasa dışı olan iki deseni reddeder.

---

Bu ne değildir

Bir tasarım sistemi değildir ve sayfanızın iyi görünmesini sağlamaz. Ticari gerekçeleri eklenmiş dört bileşendir, çünkü başka her yerde eksik olan bu gerekçedir. Sayfanız da üretilmiş görünüyorsa, bu ayrı bir sorundur ve ayrı bir çözümü vardır.

Bir A/B test çerçevesi değildir ve size bir artış vaat etmez. Varyant başına yaklaşık kırk bin oturumun altında, bir bölünmüş test gerçek bir etkiyi gürültüden ayıramaz, bu da çoğu mağazadır. Bu dört bileşenin size verdiği şey, bilinen bir eksikliğin giderilmesidir ve bu, test edilmeye değer olmak için bir teste ihtiyaç duymaz.

---

İlgili okumalar

• Ortalama sipariş değerini artıran miktar kırılımları
• Ürün sayfasında satış artırımı nereye yerleştirilir
• shadcn ecommerce blokları: ne var ve ne eksik
• Shopify için satış artırma uygulamaları veya kendiniz oluşturun

uxgen tarafından oluşturuldu, bu mekanikleri bir kodlama ajanına veren MCP.

MIT © 2026 Angelo Palfi