JavaScript'e Genel Bakış

T-SOFT temaları, sayfa genelinde erişilebilir global değişkenler, hazır bileşenler ve yardımcı fonksiyonlarla gelir. Bu sayfa JavaScript mimarisini tanıtır: hangi verilere nereden erişeceğinizi, Twig'den JS'e veri köprüsünü ve özel kodlarınızı theme.js içinde nasıl yazacağınızı öğrenin.

Global değişkenler

Aşağıdaki değişkenler her sayfada tanımlıdır ve tarayıcı konsolundan ya da kendi kodunuzdan doğrudan erişilebilir:

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) {}

Bunlara ek olarak şu global değişkenler de tanımlıdır:

ON_PAGE_READY kalıbı

Kodunuzun genel JavaScript dosyaları yüklendikten sonra çalışmasını garanti etmek için fonksiyonlarınızı ON_PAGE_READY kuyruğuna ekleyin:

ON_PAGE_READY.push(function () {
    console.log('Genel JS yüklemesi tamamlandı');
});

Kuyruğa eklenen fonksiyonlar, sayfa yüklemesi tamamlandığında sırayla çalıştırılır.

Twig'den JS'e veri aktarımı

SETTING, BLOCK gibi Twig değişkenlerini JavaScript tarafında kullanmak için json_encode ile serileştirin:

<script>
ON_PAGE_READY.push(function () {
    const setting = {{ SETTING|json_encode|raw }};
    console.log(setting);
});
</script>

Blok verisine erişim

Sayfaya eklenen her bloğun kök elemanında otomatik atanmış bir data-block-id="BLOCK.ID" attribute'u bulunur. Tüm blokların ayarları global BLOCKS dizisinde, blok bazlı işlenmiş JavaScript tanımları ise BLOCK_JS içinde tutulur.

Bir elemandan yola çıkarak ait olduğu bloğun SETTING verisine ulaşmak için closest('[data-block-id]') kalıbını kullanın:

const selectedElement = document.querySelector('[data-toggle="selected-element"]');
const id = selectedElement.closest('[data-block-id]')?.dataset.blockId || 0;

const BLOCK = Array.from(BLOCKS).find(x => x.ID == id) || {};
const SETTING = BLOCK?.SETTING || {};

Kalıbın beklediği HTML yapısı:

<div data-block-id="123">
    <nav data-toggle="selected-element">
        <a href="/profile">Profil</a>
        <a href="/orders">Siparişler</a>
        <a href="/settings">Ayarlar</a>
    </nav>
</div>

Bileşenlere erişim

Tarayıcı konsoluna components yazdığınızda sistemde tanımlı tüm bileşenleri görürsünüz. Bileşenler arasında şunlar bulunur:

accordion, addClass, addToCart, captchaToggle, cartCountPrice, cartDrawer, cartPreview, catalog, collection, compare, copyText, countDown, currency, drawer, dropdown, fastRegister, favourite, flagMask, formSubmit, getRelated, imageMap, init, isRequired, language, lazyLoadedBg, lightGallery, liveSearch, login, logout, mask, memberName, menuHover, multiAddtoCart, multiSelect, newsletter, nomembership, passwordDifficulty, passwordToggle, personalization, popup, priceAlarm, productLink, qty, removeClass, share, slider, socialLogin, sticky, stockAlarm, tabs, taxLoader, toggleClass, tooltip, variant, zoom

Bileşenlerin görevleri ve yöntemleri için bkz. JS Bileşenleri.

theme.js ile özel kod

assets/js/theme.js, temaya özgü JavaScript kodlarının yazıldığı ana dosyadır ve sayfaya otomatik dahil edilir. Şu durumlarda kullanın:

• Tema özelinde DOM manipülasyonları.
• Kullanıcı etkileşimlerine yanıt veren olay dinleyicileri.
• Tema ile ilgili API çağrıları veya veri işleme.

Callback fonksiyonları da theme.js içinden erişilebilir ve özelleştirilebilir:

window['callbacks'].cart.add.push((data) => {
    console.log('Sepete eklendi:', data);
});

Kontrollü kod yazımı

theme.js içindeki kodların en önemli ilkesi savunmacı yazımdır: bir DOM elemanına erişmeden önce varlığını kontrol edin. Bugün var olan bir buton yarın temadan kaldırılabilir; kodunuz bu durumda hata üretmemelidir.

1. Eleman kontrolü — Bir DOM elemanına erişmeden önce varlığını kontrol edin.
2. Hata yönetimi — Olası hataları yakalamak için try-catch blokları kullanın.
3. Varsayılan değerler — Değişkenlere varsayılan değerler atayarak beklenmedik durumları önleyin.
4. Temiz kod — Okunabilir ve modüler kod yazmaya özen gösterin.

const button = document.querySelector('#myButton');
if (button) {
    button.addEventListener('click', () => {
        console.log('Butona tıklandı');
    });
} else {
    console.warn('Buton bulunamadı');
}

Tema dışı kodlar için izleme kodları

Analitik, izleme veya üçüncü taraf entegrasyonları gibi tema dışı genel işlevleri theme.js'e değil, panelde Ayarlar → İzleme Kodları alanına ekleyin:

// Google Analytics izleme kodu
scriptAdd('https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y', () => {
    console.log('Google Analytics yüklendi');
});

Örnek kullanımlar

Tema özelinde bildirim gösterme:

document.addEventListener('DOMContentLoaded', () => {
    const welcomeMessage = window['COMMON_LANG']['welcome'] || 'Hoş geldiniz';
    notify({
        text: welcomeMessage,
        class: 'info',
        duration: 5000
    });
});

Buton tıklamasında API isteği:

const submitButton = document.querySelector('#submitButton');
if (submitButton) {
    submitButton.addEventListener('click', () => {
        request('POST', '/api/submit', { data: 'test' }, 'JSON')
            .then(response => {
                notify({ text: 'Başarılı!', class: 'success', duration: 3000 });
            })
            .catch(error => {
                notify({ text: 'Hata oluştu', class: 'danger', duration: 3000 });
            });
    });
}

Tema bileşenini özelleştirme:

components.favourite.add = (productId, message) => {
    console.log(`Ürün ${productId} favorilere eklendi`);
    if (message) {
        notify({
            text: 'Favorilere eklendi!',
            class: 'success',
            duration: 3000
        });
    }
};

En iyi uygulamalar

Ön tanımlı kütüphaneler

Aşağıdaki kütüphaneler sisteme global ve varsayılan olarak dahildir; kullanıma hazırdır.

Sonraki adımlar