header-logo
Wix ile sitenizi ve işinizi nasıl kuracağınızı öğrenin.
Kullanışlı Wix özellikleri ile sitenizi tasarlayın ve yönetin.
Abonelikleri, planları ve faturaları yönetin.
İşinizi yönetin ve üyelerle bağlantı kurun.
Domain satın alma, bağlama ve transfer işlemlerini öğrenin.
İşinizi ve web varlığınızı büyütmek için araçlar edinin.
SEO ve pazarlama araçlarıyla görünürlüğünüzü artırın.
Verimliliği artıracak yardımcı gelişmiş özellikler edinin.
Çözüm bulun, bilinen sorunları öğrenin veya iletişime geçin.
placeholder-preview-image
Kurslarımız ve eğitimlerimizle becerilerinizi geliştirin.
Web tasarımı, pazarlama ve daha fazlası için ipuçları alın.
Arama motorlarından organik site trafiğini artırmayı öğrenin.
Tam kapsamlı platformumuzu kullanarak özel site oluşturun.
Hedeflerinize ulaşmanıza yardımcı olacak bir uzmanla eşleşin.
placeholder-preview-image

CMS Özellik Talebi: Dinamik Pop-up'lar

Özellik Talebi|Bu özellik için oy topluyoruz
Şimdilik, pop-up'ları CMS koleksiyonlarına bağlayarak dinamik hale getirmek mümkün değil. Ancak, ögeleri dinamik hale getirmek için bir pop-up'a eklenen ögeleri CMS koleksiyonu içeriğine bağlayabilirsiniz (ör. metin, görüntüler, düğmeler).  
Ürünlerimizi güncellemek ve geliştirmek için sürekli çalışıyoruz ve geri bildirimleriniz bizim için çok önemli. 

Geçici Çözüm

Velo kullanarak dinamik öge sayfasından açılan ve açılır pencerenin açıldığı sayfadakiyle aynı ögenin görüntülendiği bir pop-up penceresi oluşturabilirsiniz.

Örneğin, sunduğunuz hizmetleri gösteren dinamik öge sayfalarınız varsa, sayfadaki bir düğmeyi bir pop-up penceresine bağlayabilirsiniz. Açılır pencerede metin, görüntü ve düğme gibi ögeleri aynı koleksiyona bağlı bir veri kümesine bağlayabilirsiniz. Sonuç olarak, ziyaretçiler dinamik öge sayfanızdaki düğmeye tıkladıklarında, aynı öge hakkında daha fazla bilginin gösterildiği bir pop-up penceresi açılır. 
Başlamadan önce:
Sitenizin aşağıdaki özelliklere sahip olduğundan emin olun: 
Wix Editor
Studio Editor
  1. Editörünüze gidin.
  2. İlgili dinamik öge sayfasına gidin. 
  3. Velo Geliştirici Modunu Etkinleştirin: 
    1. Editörün üst kısmındaki Geliştirici Modu'na tıklayın. 
    2. Geliştirici Modunu Aç'a tıklayın. 
  4. Aşağıdaki kod parçacığını kopyalayın ve sayfa kodunuzun en üstüne yapıştırın:
1import wixWindowFrontend from 'wix-window-frontend';
Dinamik bir öge sayfasının kodunun üstüne kod parçacığı eklenmesinin ekran görüntüsü.
  1. Aşağıdaki kod parçacığını kopyalayın ve yerine yapıştırın: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => { const item = await $w('#dynamicDataset').getCurrentItem(); const id = item._id; wixWindowFrontend.openLightbox("Dinamik Etkileşim Kutusu", id); })
2
Dinamik öge sayfasının koduna ikinci kod parçacığının yapıştırılmasının ekran görüntüsü.
  1. Yapıştırdığınız örnek kodda, aşağıda listelenen kimlikleri siteniz tarafından kullanılanlarla değiştirin:
    • OpenLightbox: Pop-up'ı açan düğmenin kimliğiyle değiştirin. 
    • dinamik Veri Kümesi: Dinamik öge sayfası veri kümesinin kimliğiyle değiştir. 
    • Dinamik Etkileşim: Pop-up penceresinin adını girin. 
Kodda değiştirilmesi gereken kimlikleri ve etkileşim kutusu adını gösteren bir ekran görüntüsü.
  1. Editörünüzde pop-up penceresine gidin. 
  2. Bir veri kümesi ekleyin ve onu dinamik öge sayfanızla aynı koleksiyona bağlayın:
    1. Editörün sol çubuğundaki CMS simgesine tıklayın.
    2. İçerik Ögeleri Ekle simgesine tıklayın. 
    3. Veri Kümesi'ne tıklayın.
    4. Bir koleksiyon seçin açılır menüsüne tıklayın ve dinamik öge sayfanıza bağlı koleksiyonu seçin. 
    5. Oluştur'a tıklayın. 
  3. Veri kümesi ayarlarında Yük başına öge alanına tıklayın ve 1 yazın.
  4. Açılır pencerenizdeki ögeleri bağlayın (ör. metin, görüntüler, düğmeler) veri kümesine:
    1. Açılan pencerede ilgili ögeye tıklayın. 
    2. CMS'ye Bağla simgesine tıklayın.
    3. Bağlantılar altındaki açılır menülere tıklayarak ilgili koleksiyon alanlarını veya veri kümesi eylemlerini seçin. 
    4. Bu adımları pop-up pencerenizdeki her bağlamak istediğiniz öge için tekrarlayın. 
  5. Açılır pencere kodunuzun üst kısmına aşağıdaki kod parçacığını kopyalayın: 
1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';
Kod parçacığının etkileşim kutusu kodunun üstüne yapıştırılmasını gösteren ekran görüntüsü.
  1. Aşağıdaki kod parçacığını kopyalayın ve yerine yapıştırın: $w.onReady(function () {
1const getData = async () => { const id = await wixWindowFrontend.lightbox.getContext(); $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); } getData();
Etkileşim kutusu koduna yukarıdaki kod parçacığının eklenmesine ilişkin ekran görüntüsü.
  1. Yapıştırdığınız örnek koddaki veri kümesi1 yerine pop-up veri kümenizin kimliğini girin. 
  2. İşlevselliği test etmek için sitenizi önizleyin. 
  3. Hazır olduğunuzda sitenizi yayınlayın.