Listeler
Local kapsamda tanımlanan listeler ve kullanımı.
Erişim
Bu alan yalnızca Local kapsamda kullanılabilir.
Listeler, bir çerçeveye liste tipinde veri bağlandığında oluşan ve item yapısı liste boyunca tekrar eden yapılardır. Blueprint modunda her liste, bölüm veya bileşenin içinde kendine ait bir node ekranı ile yer alır. Bu sayede listenin item seviyesine özel akışları, veri bağlamaları ve yardımcı yapıları tek bir yerde yönetirsiniz.
Tasarım
Listelerin nasıl oluşturulduğu, List Component Name ve List Item Name kuralları, item detayına erişim gibi tasarım tarafındaki akışlar için Listeler sayfasını inceleyebilirsiniz.
Listenin node ekranı
Bir liste oluşturulduğunda ilgili bölüm veya bileşenin Blueprint ekranından listeye geçiş yaparak listenin kendi node ekranına erişebilirsiniz. Bu ekran, listenin her iterasyonunda çalışan akışı tanımladığınız yerdir; yani liste item'ı için kurulan tüm akış burada yer alır.
Liste node ekranında List Item Name üzerinden (ör. productListItem) item'ın verisine doğrudan erişilir. Bu veri, listenin her iterasyonunda ilgili item ile değişir.
Geliştiriciler için
Listenin node ekranı, JavaScript'teki Array.map() callback'inin içine karşılık gelir. Burada tanımladığınız akış, listenin her iterasyonunda ilgili item verisi ile çalışır:
productList.products.map((productListItem) => {
// listenin node ekranı bu blokun içine karşılık gelir
return <ProductListItem product={productListItem} />;
});Kapsam
Listenin içinde aşağıdaki yapılar tanımlanabilir:
- Veriler
- Değişkenler
- Fonksiyonlar
Bu yapılar yalnızca listenin kendi kapsamında geçerlidir. Bölüm veya bileşenin kapsamındaki yapılara ise listenin node ekranından erişim mümkündür; kapsam hiyerarşisi ile ilgili detaylı bilgi için Genel Bakış sayfasını inceleyebilirsiniz.
Temel örnekler
Temel örneklerde liste oluşturmanın ve item seviyesinde çalışmanın akışlarını adım adım inceleyebilirsiniz:
- Ürün Listesi > Bölüme veri ekleme ve bağlama
- Header > Menu linklerini ekleme
- Header > Sepetteki ürünlerin listesini ekleme ve koşulları güncelleme
- Ürün Detay > Slider'a görsel listesini bağlama
- Varyant Seçici > Bileşen oluşturma ve varyant tiplerini listeleme
- Varyant Seçici > Varyant tipi item'ını düzenleme ve varyant değerlerini listeleme