JavaScript Kullanımı

Bu döküman, tema geliştirme sürecinde kullanılan JavaScript yapılarını, global değişkenleri ve Twig içerisindeki JavaScript işlemlerini ayrıntılı bir şekilde açıklamaktadır. Aşağıda, global değişkenler, Twig ile JavaScript entegrasyonu ve diğer önemli bileşenler detaylı olarak ele alınmıştır.

Genel Açıklama

JavaScript, tema geliştirme sürecinde dinamik davranışlar eklemek, kullanıcı etkileşimlerini yönetmek ve sayfa bileşenlerini kontrol etmek için kullanılır. Global değişkenler, Twig entegrasyonu ve konsol komutları, geliştiricilere sayfa yapısını ve bileşenleri daha kolay yönetme imkanı sağlar.

Global Değişkenler

Aşağıdaki global değişkenler, tema geliştirme sürecinde sıkça kullanılan ve sayfa genelinde erişilebilen yapılardır.

window['PRODUCT_DATA'] = [];

const E_EXPORT_ACTIVE = 1;
const CART_DROPDOWN_LIST = true;
const ENDPOINT_PREFIX = '';
const SETTINGS = {
    "KVKK_REQUIRED": 1,
    "IS_FAV": "",
    "NEGATIVE_STOCK": "0",
    "DYNAMIC_LOADING_SHOW_BUTTON": 0,
    "IS_COMMENT_RATE_ACTIVE": 1
};

try {
    var PAGE_TYPE = 'page';
    var PAGE_ID = '1';
    var ON_PAGE_READY = [];
    var MEMBER_INFO = {
        "ID": 0,
        "CODE": "",
        "FIRST_NAME": "",
        "BIRTH_DATE": "",
        "GENDER": "",
        "LAST_NAME": "",
        "MAIL": "",
        "MAIL_HASH": "",
        "GROUP": 0,
        "TRANSACTION_COUNT": 0,
        "REPRESENTATIVE": "",
        "KVKK": -1
    };
    var IS_VENDOR = '';
    var MOBILE_ACTIVE = 1;
    var CART_INFO = {
        "COUNT": 0,
        "TOTAL": null
    };
    var CART_COUNT = CART_INFO.COUNT || 0;
    var CART_TOTAL = CART_INFO.TOTAL || 0;
    var LANGUAGE = 'tr';
    var CURRENCY = 'TL';
    var SEP_DEC = ',';
    var SEP_THO = '.';
    var DECIMAL_LENGTH = 2;
    var THEME_VERSION = 'os2';
    var CART_CSRF_TOKEN = '411a52ce308161eb7141b9c810ea15c8278a821658335e24';
    var CSRF_TOKEN = 'FONlyfLdzBPvHtFSx+S3bN=';
} catch (err) {}

Açıklama:

  • window['PRODUCT_DATA']: Ürün verilerini saklamak için kullanılan bir dizi.
  • E_EXPORT_ACTIVE: Dışa aktarma özelliğinin aktifliğini belirtir (1: aktif).
  • CART_DROPDOWN_LIST: Sepet açılır listesinin görünürlüğünü kontrol eder (true/false).
  • ENDPOINT_PREFIX: API uç noktaları için önek.
  • SETTINGS: Genel ayarlar (örneğin, KVKK gerekliliği, negatif stok izni).
  • PAGE_TYPE ve PAGE_ID: Sayfanın türü ve kimliği.
  • ON_PAGE_READY: Sayfa yüklendikten sonra çalıştırılacak fonksiyonların listesi.
  • MEMBER_INFO: Üye bilgilerini içerir (ID, ad, soyad, e-posta vb.).
  • IS_VENDOR: Tedarikçi durumunu belirtir.
  • MOBILE_ACTIVE: Mobil cihazlarda aktifliği kontrol eder (1: aktif).
  • CART_INFO, CART_COUNT, CART_TOTAL: Sepet bilgilerini içerir.
  • LANGUAGE, CURRENCY: Dil ve para birimi ayarları.
  • SEP_DEC, SEP_THO, DECIMAL_LENGTH: Ondalık ve binlik ayırıcılar ile ondalık basamak sayısı.
  • THEME_VERSION: Tema sürümü.
  • CART_CSRF_TOKEN, CSRF_TOKEN: Güvenlik belirteçleri.

Twig İçerisinde JavaScript İşlemleri

Twig şablonları içerisinde JavaScript işlemleri, ON_PAGE_READY dizisi kullanılarak sayfa yüklemesi tamamlandıktan sonra çalıştırılır. Bu, sayfa ve genel JavaScript dosyalarının yüklendiğinden emin olunmasını sağlar.

Örnek:

ON_PAGE_READY.push(function () {
   console.log('General Js Yüklemesi tamamlandı')
});

Açıklama:

  • ON_PAGE_READY.push: Sayfa yüklendiğinde çalıştırılacak fonksiyonları sıraya ekler ve çalıştırır.

Bileşenlere Erişim

Tarayıcı konsoluna components yazıldığında, sistemde tanımlı tüm bileşenlere erişilebilir. Aşağıda mevcut bileşenlerin listesi yer almaktadır:

  • accordion: Akordiyon bileşeni.
  • addClass: Elemanlara sınıf ekleme.
  • addToCart: Sepete ürün ekleme.
  • captchaToggle: CAPTCHA yenileme.
  • cartCountPrice: Sepet sayısı ve fiyat gösterimi.
  • cartDrawer: Sepet yan menüsü.
  • cartPreview: Sepet önizlemesi.
  • catalog: Ürün kataloğu.
  • collection: Favori koleksiyonlar.
  • compare: Ürün karşılaştırma.
  • copyText: Metin kopyalama.
  • countDown: Geri sayım sayacı.
  • currency: Para birimi seçimi.
  • drawer: Yan menü.
  • dropdown: Açılır menü.
  • fastRegister: Hızlı kayıt.
  • favourite: Favori ürünleri yönetme.
  • flagMask: Ülke bayrakları gösterimi.
  • formSubmit: Form gönderimi.
  • getRelated: İlgili ürünleri alma.
  • imageMap: Resim haritası.
  • init: Başlatma işlemleri.
  • isRequired: Zorunlu alan kontrolü.
  • language: Dil seçimi.
  • lazyLoadedBg: Geç yüklenen arka plan resimleri.
  • lightGallery: Resim/video galerisi.
  • liveSearch: Canlı arama.
  • login: Kullanıcı girişi.
  • logout: Kullanıcı çıkışı.
  • mask: Giriş maskeleri.
  • memberName: Üye adı gösterimi.
  • menuHover: Menü hover efekti.
  • multiAddtoCart: Çoklu sepete ekleme.
  • multiSelect: Çoklu seçim.
  • newsletter: Bülten aboneliği.
  • nomembership: Üyeliksiz işlemler.
  • passwordDifficulty: Şifre zorluğu kontrolü.
  • passwordToggle: Şifre görünürlük değiştirme.
  • personalization: Kişiselleştirme.
  • popup: Açılır pencere.
  • priceAlarm: Fiyat alarmı.
  • productLink: Ürün bağlantıları.
  • qty: Ürün miktarı kontrolü.
  • removeClass: Elemanlardan sınıf kaldırma.
  • share: İçerik paylaşımı.
  • slider: Kaydırıcı bileşeni.
  • socialLogin: Sosyal medya girişi.
  • sticky: Sabit elemanlar.
  • stockAlarm: Stok uyarısı.
  • tabs: Sekme bileşeni.
  • taxLoader: Vergi yükleyici.
  • toggleClass: Sınıf değiştirme.
  • tooltip: İpucu gösterimi.
  • variant: Ürün varyantları.
  • zoom: Görsel yakınlaştırma.

Kullanım: Konsolda components yazıldığında, bu bileşenlerin her biri için tanımlı fonksiyonlar ve özellikler listelenir. Bu bileşenlerden önemli olanlar twif Dataset Kullanımı kısmında gösterilmiştir.

BLOCK_JS

Tarayıcı konsoluna BLOCK_JS yazıldığında, sayfadaki tüm JavaScript kod bloklarına erişilir.

Açıklama: Bu, sayfada tanımlı özel JavaScript kodlarını ve bunların yapılarını incelemek için kullanılır.

BLOCKS

Tarayıcı konsoluna BLOCKS yazıldığında, sayfadaki tüm blokların ayar (settings) değerlerine erişilir.

Açıklama: Her bir blok, tema içerisinde belirli bir işlevi yerine getiren bir yapıdır. Bu komut, blokların yapılandırma ayarlarını detaylı bir şekilde gösterir.

Diğer Global Değişkenler

Aşağıdaki global değişkenler, tema geliştirme sürecinde ek işlevsellik sağlar:

  • COMMON_LANG: Ortak dil çevirileri.
  • COUNTRIES: Ülke listesi.
  • DEFAULT_READY: Varsayılan hazır fonksiyonlar.
  • FLAG_MASK: Ülke bayrakları için maske.
  • HEADER_STICKY_HEIGHT: Sabit başlığın yüksekliği.
  • MEMBER_INFO: Üye bilgileri (yukarıda tanımlı).
  • PAGE_ID: Sayfa kimliği (yukarıda tanımlı).
  • PAGE_TYPE: Sayfa türü (yukarıda tanımlı).
  • PERSONALIZATION: Kişiselleştirme ayarları.
  • SNIPPET_JS: JavaScript snippet’leri.
  • TSOFT_APPS: T-Soft uygulamaları.
  • callbacks: Geri çağırma fonksiyonları.

Açıklama: Bu değişkenler, tema geliştirme sürecinde farklı işlevler için kullanılır ve genellikle sayfa genelinde erişilebilir.

Table of contents