React’te ürün varyant seçici UX’i: tükenen bedenler, eksik kombinasyonlar ve stoğa geri gelme

Varyantları modelleyin, seçenekleri türetin

Varyantlardan başlayın, çünkü ticaret API’nizin döndürdüğü ve bir siparişin işaret ettiği şey odur:

type Variant = {
  id: string
  options: Record<string, string>
  available: boolean
  quantity?: number
  price: Money
  imageId?: string
}

type Product = {
  options: { name: string; values: string[] }[]
  variants: Variant[]
}

Ekrandaki her değer, varyantlardan ve mevcut seçimin geri kalanından hesaplanan üç durumdan birini alır:

• Mevcut: bu değere ve diğer seçili seçeneklere sahip bir varyantın stoğu var.
• Tükendi: kombinasyon var ama şu anda stoğu yok.
• Mevcut değil: kombinasyon hiç üretilmiyor.

type ValueState = "available" | "sold-out" | "unavailable"

function getValueState(
  product: Product,
  selection: Record<string, string>,
  name: string,
  value: string
): ValueState {
  const wanted = { ...selection, [name]: value }
  const matches = product.variants.filter((variant) =>
    Object.entries(wanted).every(
      ([key, chosen]) => variant.options[key] === chosen
    )
  )
  if (matches.length === 0) return "unavailable"
  return matches.some((variant) => variant.available) ? "available" : "sold-out"
}

Bu size, özel durumlar olmadan müşterilerin beklediği davranışı verir. Bir renk, bedenlerinden herhangi biri stokta olduğu sürece mevcut kalır. Bir bedenin üstü yalnızca tükendiği renklerde çizilir. Farklı bir renk seçin, bedenler güncellenir.

Saf bir fonksiyondur, dolayısıyla sunucuda da çalışır. Her bedeni önce mevcutmuş gibi gösterip sonra bazılarının üstünü çizmek yerine ilk boyamayı doğru durumlarla render edin.

Renk örnekleri ve düğmeler, asla açılır menü değil

Bir <select>, insanların kontrol etmeye geldiği tek şeyi gizler: bedenlerinin stokta olup olmadığını. Renkleri renk örnekleri, bedenleri düğmeler olarak gösterin ki resmin tamamı tek bakışta görünsün.

Anlamsal olarak her seçenek bir radio grubudur. Gerçek radio input’ları ya da gezici odakla role="radiogroup" kullanın; böylece ok tuşları değerler arasında gezinir ve grubun bir adı olur. Durumu yardımcı teknolojilere de açın, çünkü üstü çizili bir çizgi ekran okuyucu için görünmezdir ve diğer herkes için de gözden kaçması kolaydır:

<label className="swatch" data-state={state}>
  <input
    type="radio"
    name="size"
    value={size}
    checked={selection.size === size}
    onChange={() => select("size", size)}
    disabled={state === "unavailable"}
    aria-describedby={state === "sold-out" ? "size-sold-out" : undefined}
  />
  {size}
</label>

Renk örneklerinin üstünde seçili değeri metin olarak gösterin ("Renk: Oat"). Üzerine gelindiğinde, üzerine gelinen değerin adını orada önizleyin; böylece insanlar bir rengi 32px’lik bir daireden tahmin etmek zorunda kalmaz.

Tükenenler yine de seçilebilir olmalı

Yaygın hata, tükenen bedenleri devre dışı bırakmaktır. Bu, en yararlı bilgiyi, yani hangi bedenlerin var olduğunu gizler ve stoğa geri gelme e-postasına giden yolu ortadan kaldırır.

Tükenen değerleri seçilebilir tutun. Seçilen varyant tükendiğinde Sepete ekle’nin yerine ürün id’sini değil varyant id’sini saklayan bir "Tekrar stoğa girince bana haber ver" formu koyun; böylece e-posta "bu gömlek" hakkında değil, Large bedendeki Oat hakkında olur.

Yalnızca var olmayan kombinasyonlar devre dışı bırakılmalı ve nedenini erişilebilir adda söylemeli: "XL, Oat renginde üretilmiyor".

Bedeni önceden seçmeyin

İlk bedeni önceden seçmek, mağazaların bolca S beden göndermesinin yoludur. Fotoğraf zaten onu gösterdiği için rengi önceden seçin ve bedeni boş bırakın.

Biri beden seçmeden Sepete ekle’ye bastığında sessizce başarısız olmayın ve bir uyarı penceresi açmayın. Beden grubunu "Beden seçin" ile işaretleyin, odağı ona taşıyın ve azaltılmış hareketin kapattığı kısa bir sallanma verin.

function addToBag() {
  const missing = product.options.find((option) => !selection[option.name])
  if (missing) {
    setError(missing.name, `Select a ${missing.name.toLowerCase()}`)
    groupRefs.current[missing.name]?.focus()
    return
  }
  add(findVariant(product, selection))
}

Var olmayan bir kombinasyona geçmek

Müşteri Large’ı seçmiş, sonra yalnızca Small ve Medium’da gelen bir renk seçiyor. İki seçeneğiniz var: rengi engellemek ya da kabul edip bedeni temizlemek. Bedeni temizlemek daha iyidir, çünkü renk genellikle daha büyük karardır. Ama bunu söyleyin. "Large, Rust renginde üretilmiyor. Beden seçin." diyen polite bir canlı bölge, ekran okuyucu kullanıcılarının yanlış şeyi eklemesini önler; görünür beden grubu da boş seçimi diğer herkese gösterir.

Fotoğraflar ve fiyat seçimi takip eder

Bir renk değiştiğinde galeri o rengin fotoğrafına gitmeli. Aradaki her görselin üzerinden kayarak geçmek yerine yerinde çapraz geçiş yapın ve çerçeve asla boş kalmasın diye yeni görselin decode edilmesini bekleyin. Ardından müşterinin diğer fotoğraflara göz atmaya devam etmesine izin verin. Varyant, galerinin nerede kilitlendiğine değil, nereden başladığına karar verir.

Fiyatlar da varyanta göre değişebilir. Tam bir seçim yapılmadan önce bir aralık gösterin: "$28’den başlayan". Bir varyant seçildiğinde fiyatını, indirimdeyse üstü çizili karşılaştırma fiyatını ve stoğunu kelimelerle gösterin: "Son 3 ürün", "Ön sipariş, 12 Kasım’da kargoda" ya da "Tedarik bekleniyor". Rakamlar değiştiğinde satır kaymasın diye fiyat için tabular rakamlar kullanın.

Seçimi URL’ye koyun

?color=Oat&size=L bir varyantı paylaşılabilir yapar, yeniden yüklemeden sağ çıkar ve reklamların ve e-postaların müşterinin gördüğü ürünün tam kendisine bağlantı vermesini sağlar. Geri okurken dikkatli olun ve ürünün sahip olmadığı her şeyi atın:

function selectionFromSearchParams(product: Product, params: URLSearchParams) {
  const selection: Record<string, string> = {}
  for (const { name, values } of product.options) {
    const value = params.get(name.toLowerCase())
    if (value && values.includes(value)) selection[name] = value
  }
  return selection
}

Next.js’te sunucunun doğru varyantı render etmesi için sayfada searchParams’ı okuyun ve seçim değiştiğinde URL’yi istemciden güncelleyin. Her değişikliğin bir geçmiş kaydı mı ekleyeceğine yoksa mevcut olanı mı değiştireceğine karar verin ve bu konuda tutarlı olun.

Bir kontrol listesi

• Seçenek durumlarını varyantlardan türetin: mevcut, tükendi, mevcut değil.
• Radio gruplarında renk örnekleri ve düğmeler, durum erişilebilir adda.
• Tükenen değerler seçilebilir kalır ve her varyant için stoğa geri gelme e-postası sunar.
• Beden asla önceden seçilmez; eksik beden işaretlenir ve odaklanılır.
• Bedeni geçersiz kılan bir renk değişikliği bedeni temizler ve nedenini söyler.
• Galeri ve fiyat varyantı takip eder, galeriyi kilitlemeden.
• Seçim URL’de yaşar.

Bunun için HextaUI blokları

Bu kuralları HextaUI Pro’daki Variant Picker bloğuna yerleştirdim. Her seçeneği verdiğiniz varyantlardan hesaplar, tükenen değerleri bir NotifyMe formuyla seçilebilir tutar, bedenleri asla önceden seçmez ve eksik bedeni "Beden seçin" ile işaretler. Yardımcıları, yani findVariant, getOptionStates, getInitialSelection, getPriceRange ve arama parametresi çifti, tek başlarına ve sunucuda da çalışır; fromShopify ise bir Storefront API ürününü eşler.

activeId verdiğinizde bir varyantın fotoğrafına çapraz geçiş yapan Product Gallery ve her para birimini biçimlendirip yalnızca değişen rakamları kaydıran Price ile birlikte çalışır. Üçünün de satın almadan önce deneyebileceğiniz canlı önizlemeleri var.

Sırada sepeti kurmak varsa aynı özen orada da geçerli: React’te alışveriş sepeti UX’i.

SSS

Tükenen bedenler devre dışı bırakılmalı mı? Hayır. Seçilebilir tutun ve stoğa geri gelince e-posta seçeneği sunun. Yalnızca hiç üretilmeyen kombinasyonları devre dışı bırakın.

Bir bedeni önceden seçmeli miyim? Hayır. İsterseniz rengi önceden seçin, bedeni ise biri sepete eklediğinde doğrulayın.

Varyantlar için renk örnekleri mi, açılır menü mü? Renk örnekleri ve düğmeler. Açılır menü, insanların aradığı bilgi olan stoğu gizler.

Bir varyantı URL’de nasıl tutarım? Her seçenek için bir arama parametresi kullanın, ilk render için sunucuda okuyun ve ürünün sahip olmadığı değerleri yok sayın.