Listeler

Erişim

Bu alana erişim yalnızca Tasarım modunda mümkündür.

Listeler, aynı yapının birden fazla veri için tekrarlanmasıyla oluşan dinamik içeriklerdir. Ürün listeleri, menü bağlantıları, sepetteki ürünler, bir ürünün görselleri gibi pek çok dinamik içerik liste olarak modellenir.

ikas Studio'da liste oluşturmanın temel yolu, bir çerçeveye liste tipinde bir veri bağlamaktır. Bu bağlama yapıldığında çerçeve liste görünümüne dönüşür ve içindeki yapı liste boyunca tekrar eder.

Listeleri oluşturma

Bir çerçeveye sağ tıklayarak Veri Bağla seçeneğinden liste tipinde bir veri seçin. Liste tipindeki bir veriyi bağladığınızda, çerçeveyi listeye dönüştürecek bir modal açılır. Bu modalda iki alan bulunur:

List Component Name — Kullanıcı tarafından belirlenir, PascalCase yazılır. Listenin adıdır.
List Item Name — List Component Name'e göre otomatik türetilir, camelCase yazılır. Liste içindeki her bir item'a bu isim üzerinden erişirsiniz.

Örneğin List Component Name'i ProductList olarak belirlerseniz, List Item Name otomatik olarak productListItem şeklinde isimlendirilir.

Kaydet'e bastıktan sonra bu liste, Katmanlar kısmında belirlediğiniz isim ile ve liste olduğunu belirten yeşil bir görünümle yer alır.

Geliştiriciler için

Bir çerçeveye liste verisi bağlamak, JavaScript'teki Array.map() işlemine karşılık gelir. Liste içindeki her bir item için çerçevenin içeriği tekrarlanır ve her iterasyonda ilgili item verisine List Item Name üzerinden erişilir. Liste item detayı (veya kod tarafındaki node ekranı), map callback'inin içine karşılık gelir:

productList.products.map((productListItem) => {
  // item detayı / liste node ekranı bu blokun içine karşılık gelir
  return <ProductListItem product={productListItem} />;
});

Item detayı

Oluşan listenin item yapısını düzenlemek için Katmanlar kısmındaki liste element'ine çift tıklayarak item seviyesine inebilirsiniz. Item detayındayken artık liste içinden gelen tekil veriye List Item Name üzerinden erişir ve bu veriyi item içerisindeki elementlere Veri Bağla akışıyla bağlarsınız.

Item detayında:

İçine yeni elementler ekleyebilirsiniz.
Stil değişiklikleri yapabilirsiniz.
Her bir veri alanını (ör. productListItem > name) ilgili element'in içerik alanına veya özelliklerine bağlayabilirsiniz.

Liste tipi veriler

Bir çerçeveye bağlayabileceğiniz liste tipindeki veri tipleri aşağıdaki gibidir:

Ürün Listesi — Product List
Görsel Listesi — Image List
Bileşen Listesi — Component List
Bağlantı Listesi — Link List
Kategori Listesi — Category List
Marka Listesi — Brand List
Blog Listesi — Blog List
Blog Kategorisi Listesi — Blog Category List
Ürün Özelliği Listesi — Product Attribute List

Bunların dışında liste döndüren fonksiyonlar da aynı akışla bağlanabilir. Örneğin product.getDisplayedVariantTypes, cartStore.cart.orderLineItems veya product.getSelectedVariant.images gibi değerler sabit bir veri tipi olmasa da çalışma zamanında liste döndürdüğü için liste olarak bağlanabilir.

Veri tipleri

Veri tipleri hakkında daha detaylı bilgi için Veriler 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:

Listeler

Listeleri oluşturma

Item detayı

Liste tipi veriler

Temel örnekler

Bu sayfada