OpenCart Kar Efekti Nasıl Yapılır? (JavaScript ile Adım Adım Anlatım)

Kış sezonu, yılbaşı kampanyaları veya dönemsel görsel dokunuşlar için OpenCart sitenize kar yağma efekti eklemek kullanıcı deneyimini güçlendirir.
Bu yazıda, ekstra eklenti kullanmadan, sadece JavaScript (jQuery Snowfall) ile OpenCart sitenize kar efekti eklemeyi adım adım anlatıyoruz.

Neden JavaScript ile Kar Efekti?

• Tema ve modül bağımlılığı yoktur
• İstediğiniz zaman açıp kapatabilirsiniz
• Site hızını minimum düzeyde etkiler
• OpenCart 2.x, 3.x ve 4.x sürümleriyle uyumludur

Kullanılan Kütüphane: jQuery Snowfall

Bu uygulamada jQuery Snowfall adlı hafif bir JavaScript kütüphanesi kullanıyoruz.

CDN Adresi:

https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js

En Sık Yapılan Hata

Birçok kullanıcı script’i şu şekilde eklediği için efekt çalışmaz:

<script>https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js</script>

Bu kullanım yanlıştır.
Script dosyaları mutlaka src ile çağrılmalıdır.

1. Adım: Snowfall Script’ini Tema Head Alanına Ekleyin

OpenCart temanızın head bölümüne (veya tema ayarlarında “Header Scripts” alanına) aşağıdaki kodu ekleyin:

<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>

Not: OpenCart temalarının büyük çoğunluğunda jQuery zaten yüklüdür, ekstra eklemenize gerek yoktur.

2. Adım: CustomJS Alanına Kar Efekti Kodunu Ekleyin

Tema ayarlarında bulunan Custom JS alanına aşağıdaki kodu ekleyin:

(function($){
  $(function () {
    if (typeof $.fn.snowfall !== 'function') {
      console.error('Snowfall plugin yuklenmedi.');
      return;
    }
    $(document).snowfall({
      flakeCount: 80,
      maxSpeed: 3,
      maxSize: 5
    });
    $(window).on('resize', function () {
      $(document).snowfall('clear');
      $(document).snowfall({
        flakeCount: 80,
        maxSpeed: 3,
        maxSize: 5
      });
    });
  });
})(jQuery);

3. Adım: Siteyi Yenileyin

Sayfayı yenilediğinizde sitenizin üzerinde kar tanelerinin yağdığını göreceksiniz.

Kar Efekti Çalışmıyorsa Nasıl Test Ederim?

Tarayıcıda F12 → Console bölümünü açarak aşağıdaki kontrolleri yapabilirsiniz.

jQuery Yüklü mü?

typeof jQuery

Beklenen çıktı:

"function"

Snowfall Yüklü mü?

typeof jQuery.fn.snowfall

Beklenen çıktı:

"function"

Manuel Olarak Başlatma

jQuery(document).snowfall();

Bu komut kar efektini başlatıyorsa, sorun kodun sayfa yüklenmeden çalışmasıdır.

Çalışmama Nedenleri ve Çözümleri

Performans İçin Öneriler

Mobilde kapatmak için:

if (window.innerWidth < 768) return;

Kar yoğunluğunu azaltmak için:

flakeCount: 40