Bileşen oluşturma ve varyant tiplerini listeleme
Varyant seçici bileşenini oluşturma ve varyant tip listesini bağlama.
Bileşen oluşturma
Elementler kısmından bir Çerçeve element'i ekleyin ve sağ tıklayarak Stili Temizle seçeneğini uygulayın. Ardından tekrar sağ tıklayarak Bileşen Oluştur'u seçin. Açılan modaldan bileşenin ikonunu ve adını güncelleyip Kaydet'e basın.
Veri ekleme ve stilleri güncelleme
Bileşen detayına yönlendirildikten sonra ilk element'i seçin ve sağ üst kısımdaki Veri Ekle butonuna tıklayarak Product verisi ekleyin. Ardından flex-direction ve padding stilini güncelleyin.
Varyant tiplerini listeleme
İçteki çerçeve element'ini seçerek flex-direction ve gap stillerini güncelleyin. Ardından bu element'e sağ tıklayarak Veri Bağla kısmından product > getDisplayedVariantTypes verisini seçin. Açılan modalda List Component Name alanına DisplayedVariantTypesList yazın ve Kaydet'e basın.
Varyant tipleri
Burada bağlamış olduğunuz liste, Renk ve Beden gibi tiplere karşılık gelmektedir. Ürün varyant değerlerinden önce varyant tiplerini listelediğimiz yapıyı hazır etmiş olduk.
Bileşeni bölüme ekleme
Geri diyerek sayfa görünümüne dönün ve ilk kısma otomatik olarak eklenen varyant seçici bileşenini silin. Ardından Ürün Detay bölümü altından Bileşen Ekle diyerek varyant seçici bileşenini ekleyin.
Sağ kısımda bulunan product verisi kısmından bölümden gelen product verisini bağlayın.
Bileşene ürün verisi bağlama
Bölüm altına eklediğiniz bileşenlere bu bölüm üzerinden gelen product verisini bağlamayı unutmamalısınız. Bu örnekte iki farklı yöntem kullanılabilir: bölümden dönen ürünü doğrudan bileşene geçirebilir veya Sayfanın ürününü kullan seçeneğini işaretleyebilirsiniz. Bölümden gelen product verisini bağlamak her zaman daha güvenilir bir yöntemdir.
Çift tıklayarak bileşen detayına, ardından oluşturduğunuz listeye çift tıklayarak detayına gidin.