Bölüme veri ekleme ve bağlama
Ürün listesi bölümüne veri ekleme ve bağlama.
Geliştiriciler için
Bölüme veri eklemek, React'te bir component'e prop tanımlamaya benzer. Bölüm dışarıdan hangi veriyi alacağını bildirir ve bu veri İçerik modunda son kullanıcı tarafından yapılandırılabilir hale gelir. Örneğin bu adımda tanımlayacağımız productList verisi, React'te şu şekilde ifade edilebilir:
interface ProductListSectionProps {
productList: ProductList;
}Veri ekleme
Bölüm detayına girdikten sonra seçtiğiniz bir element'in sağ kısımda açılan panelinin en üstündeki Veri Ekle kısmına tıklayarak veri ekleyebilirsiniz. Açılan modaldan Ürün Listesi'ni seçip ilerleyin.
Veri ekle modalından aşağıdaki bilgileri girerek veriyi tanımlayabilirsiniz:
- Görünen İsim
- Değişken Adı
- Açıklama
- Varsayılan
- Grup
Veri bağlama
İç kısımdaki çerçeveye sağ tıklayarak Veri Bağla kısmından productList > products verisini seçin. Bu kısım bir liste olduğu için öncelikle bu çerçeveyi list görünümüne dönüştürecek modal açılır.
Bu modalda List Component Name alanını girerek listenin adını ve item'lere hangi isimlendirme ile erişebileceğinizi belirlersiniz. Örneğin List Component Name'i ProductList olarak belirlerseniz, List Item Name otomatik olarak productListItem şeklinde isimlendirilir. Liste altındaki item verilerine tekli ürün olarak productListItem üzerinden erişirsiniz.
Kaydet'e bastıktan sonra bu liste, Katmanlar kısmında ProductList ismiyle ve liste olduğunu belirten yeşil bir görünümle yer alır.
Listeler
Liste hakkında daha detaylı bilgi için Listeler sayfasını inceleyebilirsiniz.
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 productListItem üzerinden erişilir. Çift tıklayarak girdiğiniz item detayı, map callback'inin içine karşılık gelir:
productList.products.map((productListItem) => {
// item detayı bu blokun içine karşılık gelir
return <ProductListItem product={productListItem} />;
});Item detayına erişim
Katmanlar kısmında liste görünümüne geçen element'e çift tıklayarak item'a erişebilirsiniz. Bu, section içerisinde bir listin içindeki item'da olduğunuz anlamına gelir. Artık ProductList içerisindeki item üzerinden ürün verilerine ulaşabilirsiniz.
Ürün adını bağlama
Sol kısımdaki ilk element'i seçin ve yine sol kısımda bulunan Elementler kısmından bir Yazı element'i ekleyin. Yazı element'ine sağ tıklayarak Veri Bağla kısmından productListItem > name verisini seçerek yazı elementine ürün adını bağlamış olursunuz.
Ekranda, veri eklerken varsayılan olarak belirlenen liste ayarlarına göre ürün isimleri 4'lü grid yapısında görüntülenecektir.