FonPageBuilder Karşılaştırma Tablosu Bileşeni Son Güncelleme: 04-07-2026

Karşılaştırma Tablosu Bileşeni Nedir?

FonPageBuilder Karşılaştırma Tablosu bileşeni; ürün grubu sayfalarınızda ürün paketlerinize ait özellikleri karşılaştırma tablosu şeklinde kullanıcılara sunmanızı sağlayan özel bir bileşendir. Her bir özellik için, özellik adı, açıklama, simge, ipucu ve değer oluşturabilirsiniz. Karşılaştırma tablosu oluşturabilmek için öncelikle her bir ürün paketiniz için JSON formatında bir özellik içeriği oluşturmalı ve bu içeriği ürün paketinizin "Özellikler" alanına eklemelisiniz.

NOT: Karşılaştıma Tablosu bileşeni sadece Hosting, Server ve Özel Ürün Grubu sayfalarında çalışır.

Karşılaştırma Tablosu Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

• Bileşen Adı
  : Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz. Bu bileşen özelinde buraya gireceğiniz başlığı site önyüzünde bölüm başlığı olarak göstermeyi tercih edebilirsiniz. Örn: Paketlerimizi Karşılaştırın
• Kategori YENİ
  : Karşılaştırma tablosu bileşeni Hosting, Server, Special (Özel) Ürün Gruplarına ait sayfalarda otomatik olarak ilgili sayfadaki kategori ürünlerini baz alır ve listeler. Karşılaştırma tablosunu İlgili ürün grubu sayfaları haricinde herhangi bir sayfada kullanmak istediğinizde bu bölüm gösterilir ve hangi kategorideki ürünlerin gösterilmesini istediğinizi seçmeniz gerekir. Artık Karşılaştırma Tablosu bileşenini tüm wisecp sayfalarında kullanabilirsiniz.

  

Bileşen Seçenekleri

• Bileşen Adını Göster
  : Bileşen Adını, site önyüzünde karşılaştırma tablosunun üstünde bölüm başlığı olarak göstermek istiyorsanız bu seçeneği etkinleştirin. Bkz: Görsel - 1 No'lu Öge

  

• Açıklama
  : Sitenizdeki aktif her bir dil için bölüm açıklamasını bu alana girebilirsiniz. Bu alan, site önyüzünde karşılaştırma tablosunun üstünde kısa bir açıklama gösterilecektir.
• Açıklamayı Göster
  : Açıklamayı, site önyüzünde karşılaştırma tablosunun üstünde göstermek istiyorsanız bu seçeneği etkinleştirin. Bkz: Görsel - 2 No'lu Öge

  

• Aylık / Yıllık Fiyatı Göster YENİ
  : Fiyatlandırma tablosunun üstünde Aylık ve Yıllık bazda paket fiyatı değiştirici düğmesini göster/gizle. Etkinleştirilmediğinde varsayılan WISECP fiyatlandırmasını (listedeki ilk fiyat) kullanır.

  

• Aylık / Yıllık Fiyatı Hesapla YENİ
  : Aylık ve yıllık fiyat hesaplamasının nasıl yapılacağını seçin. Örnek Senaryolar için aşağıdaki açıklamaları inceleyin.

  • Varsayılan : Ürün paketi fiyat listesindeki aylık ve yıllık fiyatları baz alır, eğer fiyat listesinde aylık fiyatlar yok ise En Düşük Yıla Ait Fiyata (Örn:1 Yıllık Fiyat) göre hesaplar.

    

    • 1 Aylık Fiyat Varsa: Tabloda 1 aylık fiyat belirtilmişse aylık fiyat olarak bu fiyatı baz alır. Senaryomuzda 1 aylık fiyat belirtildiği için aylık fiyat $10 olarak gösterilir.
    • 1 Aylık Fiyat Yoksa: Tabloda 1 aylık fiyat belirtilmemişse en düşük aylık fiyatı baz alır. Senaryomuzda bu fiyat 6 aylık fiyat olduğu için $55 / 6 = $9.17 formülü ile aylık fiyatı hesaplar.
    • Hiç Aylık Fiyat Yoksa: Tabloda hiç bir aylık fiyat belirtilmemişse en düşük süreli yıllık fiyatı baz alır. Senaryomuzda bu fiyat 1 yıllık fiyat olduğu için $100 / 12 = $8.33 formülü ile aylık fiyatı hesaplar.
    • 1 Yıllık Fiyat Varsa: Tabloda 1 yıllık fiyat belirtilmişse yılık fiyat olarak bu fiyatı baz alır. Senaryomuzda 1 yıllık fiyat belirtildiği için yıllık fiyat $100 olarak gösterilir.
    • 1 Yıllık Fiyat Yoksa: Tabloda 1 yıllık belirtilmemişse en düşük süreli yıllık fiyatı baz alır. Senaryomuzda bu fiyat 2 yıllık fiyat olduğu için $190 / 2 = $95 formülü ile yıllık fiyatı hesaplar.
    • Hiç Yıllık Fiyat Yoksa: Tabloda hiç bir yıllık fiyat belirtilmemişse en düşük süreli aylık fiyatı baz alır. Senaryomuzda bu fiyat 1 aylık fiyat olduğu için $10 * 12 = $120 formülü ile yıllık fiyatı hesaplar.
  • En Yüksek Yıla Ait Fiyat : Fiyat listesindeki aylık ve yıllık fiyatları baz alır, Eğer fiyat listesinde aylık fiyat yoksa fiyat listesindeki En Yüksek Yıla Ait Fiyata (Örn: 5 Yıllık Fiyat) göre hesaplar.

    

    • Yıllık Fiyat Varsa Aylık Fiyat: Tabloda yıllık fiyat belirtilmişse en yüksek süreli yıla göre aylık fiyatı hesaplar. Senaryomuzda bu fiyat 2 yıllık fiyat olduğu için $190 / 24 = $7.91 formülüne göre aylık fiyatı hesaplar. Müşteriye fiyatın yanında simgesi ile 2 yıllık alımlarda geçerli olduğunu belirten bir uyarı gösterir.
    • Yıllık Fiyat Yoksa Aylık Fiyat: Tabloda hiç bir yıllık fiyat belirtilmemişse en yüksek süreli aya göre aylık fiyatı hesaplar. Senaryomuzda bu fiyat 6 aylık fiyat olduğu için $55 / 6 = $9.17 formülü ile aylık fiyatı hesaplar. Müşteriye fiyatın yanında simgesi ile 6 aylık alımlarda geçerli olduğunu belirten bir uyarı gösterir.
    • Yıllık Fiyat Yoksa Yıllık Fiyat: Tabloda yıllık fiyat belirtilmişse en yüksek süreli yıla göre yıllık fiyatı hesaplar. Senaryomuzda bu fiyat 2 yıllık fiyat olduğu için $190 / 2 = $95 formülü ile yıllık fiyatı hesaplar. Müşteriye fiyatın yanında simgesi ile 2 yıllık alımlarda geçerli olduğunu belirten bir uyarı gösterir.
    • Yıllık Fiyat Yoksa Yıllık Fiyat: Tabloda hiç bir yıllık fiyat belirtilmemişse en yüksek süreli aya göre göre yıllık fiyatı hesaplar. Senaryomuzda bu fiyat 6 aylık fiyat olduğu için ($55 / 6) * 12 = $110 formülü ile yıllık fiyatı hesaplar. Müşteriye fiyatın yanında simgesi ile 6 aylık alımlarda geçerli olduğunu belirten bir uyarı gösterir.
• Kupon Göster YENİ
  : Karşılaştırma tablosunda ilgili ürüne ve/veya kategorisine ait kupon kodunun (varsa) gösterilip gösterilmeyeceğini seçin.

  

• Karusel Kullan
  : Karşılaştırma Tablosundaki paketler için karusel slaydı oluşturmak isterseniz bu seçeneği aktifleştirin. Eğer ilgili hosting ürün grubunda 3 adetten fazla paketiniz varsa ve/veya mobil cihazlar için bu seçeneği aktifleştirmeniz önerilir.
• Sütun Sayısı
  : Karşılaştırma Tablosunda paketlerin yatay düzlemde kaç sütunda gösterileceğini (bir satırda kaç paket) responsive olarak her bir ekran çözünürlüğü için belirtebilirsiniz. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.
• Yönlendirme Kontrolleri
  : Karşılaştırma Tablosu karusel slaydında "Önceki" ve "Sonraki" ok işaretlerinin gösterilip gösterilmeyeceğini seçin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir. Bkz. Görsel - 1 Nolu Ögeler:

Bileşen Stil Ayarları

• Sınıf
  : Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
• Dahili Stil
  : Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Karşılaştırma Tablosu Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-comparison-widget css sınıfı altından inceleyebilirsiniz.

  												
  @widgetId .light-grey-rounded-box{
  	background-color: #f8f9fa;
  	border: 1px solid #e9ecef;
  	border-radius: 5px;
  }
  												
  											

Bileşen Penceresi Kayıt Düğmeleri

• Sayfayı Kaydet
  : Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
• Kaydet & Düzenle
  : Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.