variant_picker

Beden, renk veya kapasite gibi özelliklerle ayrışan bir kümeden tek bir seçim.

Ürün seçilmiştir; varyant ise seçilmemiştir. variant_picker, yalnızca hangi beden, hangi renk veya hangi kapasite olduğunu sorar ve başka hiçbir şey sormaz.

Düz metinle sormak fazladan bir tura mâl olduğu için vardır. “Kaç beden giyiyorsunuz?” sorusu bir gidiş-dönüşe ve yazılı bir yanıta mâl olur; bir dizi çip ise tek bir dokunmaya mâl olur ve Rendel hangi bedenlerin mevcut olduğunu zaten bilir.

Beden

41424344

44 tükendi.

Ekran görüntüsü değildir; tarayıcınızda SDK'nın kendi boyut ve renkleriyle canlı olarak çizilir.

Flutter SDK ve Web SDK ile, her ikisi de 0.1.0 sürümünden itibaren yerel olarak render edilir.

Ne zaman kullanılmamalıdır

Farklı öğeler arasındaki bir seçim için kullanmayın; bunun için bir choice veya product_cards kullanılır: seçici, seçeneklerin tek bir öznitelikle ayrıştığı ve başka hiçbir farkın olmadığı anlamına gelir.

Saat ve zaman seçimi için kullanmayın; bunun için datetime_slots kullanılır. Aynı anda birden fazla alan için de kullanmayın; bunun için form kullanılır.

Props

Her blok ayrıca type ve 1 ila 300 karakterden oluşan zorunlu bir fallback_text taşır.

Prop	Tür	Zorunlu	Kısıtlamalar
`title`	string	Hayır	En fazla 120 karakter.
`label`	string	Hayır	En fazla 60 karakter. Neyin seçildiği; örneğin “Size”.
`options`	array	Evet	2 ila 24 öğe.
`options[].id`	string	Evet	1 ila 64 karakter. Seçeneğe dokunulduğunda son kullanıcının tercihi olarak geri gönderilir.
`options[].label`	string	Evet	1 ila 24 karakter.
`options[].available`	boolean	Hayır	`false`, ekranda kalacak şekilde soluk ve seçilemez olarak çizer. Değerin olmaması kullanılabilir olduğu anlamına gelir.
`options[].swatch_hex`	string	Hayır	`^#[0-9a-fA-F]{6}$` ile eşleşir.
`options[].image_url`	string	Hayır	Yalnızca https.
`selected_id`	string	Hayır	En fazla 64 karakter. Bir `options[].id` ile eşleşir.
`style`	`chips` \| `swatches` \| `images`	Hayır	Yok

Ağ üzerinde

{
  "id": "blk_22",
  "type": "variant_picker",
  "fallback_text": "Sizes 41 to 44, size 43 selected, 44 sold out.",
  "props": {
    "label": "Size",
    "selected_id": "43",
    "options": [
      { "id": "41", "label": "41" },
      { "id": "42", "label": "42" },
      { "id": "43", "label": "43" },
      { "id": "44", "label": "44", "available": false }
    ]
  }
}

Etkileşim

Kullanılabilir bir seçeneğe dokunmak, seçimi kullanıcının bir sonraki turu olarak gönderir: bir mesaj yerine { block_id, ids: [option id] } içeren bir selection. Sunucu bunu bu bloğa göre kontrol eder. Bloğun sunmadığı bir kimlik, kullanılamaz olarak gösterilen bir seçenek, o zamandan beri değiştirilmiş bir blok veya zaten yanıtlanmış bir blok invalid_request ile reddedilir. Seçim iletildikten sonra seçenek seçilmiş olarak işaretlenir ve sayfanın üzerinde yazan soru neyin seçildiğini belirtir (“Beden: 43”). available: false değerine sahip bir seçeneğin işleyicisi yoktur; bu nedenle soluklaşır ve basmaya yanıt vermez.

style: swatches, her seçeneğin swatch_hex (#RRGGBB) değerinden renk daireleri çizer; style: images ise her seçeneğin image_url değerinden bir küçük resim çizer (Flutter 0.44.0, Web 0.21.0).

Durumlar

Durum	SDK'nın çizdiği görünüm
Loading	Çipler gerçek yüksekliklerindedir, böylece satır hydrate sırasında yeniden akmaz.
Selected	Vurgu rengi seçilen çipi doldurur; etiketi vurgu üstü mürekkep rengine döner.
Sold out	Kontrol sınırı yerine dekoratif ince bir çizgi üzerinde silik mürekkep, basılamaz, ekranda kalmaya devam eder.
Empty	İkiden az seçenek doğrulamadan geçemez ve `fallback_text` içeriğine geriler.

Erişilebilirlik

Çipler 44pt yüksekliğindedir ve aralıklıdır; bu sayede komşu bedenler yanlış bir dokunma mesafesinde olmaz. Seçim yalnızca doldurulmakla kalmaz, seslendirilir de; tükenmiş bir seçenek ise etiketinden önce kullanılamaz olduğunu duyurur, böylece okuyucu cümlenin geri kalanıyla vakit kaybetmemesi gerektiğini bilir.

Tükenmiş seçenekleri listede tutun. Kendi bedenini bulamayan bir okuyucu, o bedenin tükendiğini görebildiği bir çipten, onu sessizce dışarıda bırakan bir listeye kıyasla daha fazla bilgi edinir.