Giriş

Bu doküman, JavaScript’te callback fonksiyonlarının kullanımını ve tema geliştirme sürecinde nasıl uygulanacağını ayrıntılı bir şekilde açıklamaktadır. Callback fonksiyonları, işlemler tamamlandıktan sonra ek işlemler yapılmasını sağlar ve dinamik bir kullanıcı deneyimi oluşturmak için sıkça kullanılır.

Genel Açıklama

Callback fonksiyonları, bir işlemin tamamlanmasının ardından tetiklenen fonksiyonlardır. Tema geliştirme sürecinde, form işlemleri, sepet yönetimi, ürün işlemleri ve daha birçok alanda callback fonksiyonları kullanılarak işlemler sonrası özel davranışlar tanımlanabilir. Bu fonksiyonlar, esneklik ve modülerlik sağlar.

Callback Yapısı

callbacks nesnesi, farklı kategoriler altında gruplanmış callback fonksiyonlarını saklar. Aşağıda, window['callbacks'] nesnesinin yapısı ve her bir kategorinin içerdiği callback dizileri listelenmiştir.

window['callbacks'] = {
    customer: {
        login: [],          // Giriş işlemi sonrası
        sign: [],           // Kayıt işlemi sonrası
        other: [],          // Diğer müşteri işlemleri
        subscribe: [],      // Abonelik işlemi sonrası
    },
    cart: {
        update: [],         // Sepet güncelleme sonrası
        updateAll: [],      // Tüm sepeti güncelleme sonrası
        delete: [],         // Sepetten ürün silme sonrası
        deleteAll: [],      // Sepetin tamamını silme sonrası
        load: [],           // Sepet yükleme sonrası
        add: [],            // Sepete ürün ekleme sonrası
        error: [],          // Sepet işlemlerinde hata sonrası
    },
    order: {
        address: [],        // Adres seçimi sonrası
        payment: [],        // Ödeme işlemi sonrası
        paymentMethod: {
            change: [],     // Ödeme yöntemi değişikliği sonrası
            set: [],        // Ödeme yöntemi belirleme sonrası
        },
        approve: [],        // Sipariş onayı sonrası
        cargoChange: [],    // Kargo değişikliği sonrası
    },
    product: {
        quickView: {
            open: [],       // Hızlı görünüm açıldığında
            close: [],      // Hızlı görünüm kapandığında
        },
        favourite: {
            add: [],        // Ürün favorilere eklendiğinde
            remove: [],     // Ürün favorilerden kaldırıldığında
        },
        wishList: {
            add: [],        // Ürün istek listesine eklendiğinde
            remove: [],     // Ürün istek listesinden kaldırıldığında
            load: [],       // İstek listesi yüklendiğinde
        },
        stockAlarm: [],     // Stok uyarısı sonrası
        priceAlarm: [],     // Fiyat uyarısı sonrası
        dynamicLoader: [],  // Dinamik ürün yükleyici sonrası
        personalizationUpload: [], // Kişiselleştirme yükleme sonrası
        click: [],          // Ürün tıklama sonrası
    },
    customerOrder: {
        productLoad: [],    // Sipariş ürünleri yükleme sonrası
        returnLoad: [],     // İade yükleme sonrası
        return: [],         // İade işlemi sonrası
        cancel: []          // Sipariş iptali sonrası
    }
};

Açıklama:

  • Her bir alt kategori (örneğin, cart, product) belirli bir işlevsellik alanını temsil eder.
  • Her bir dizi (örneğin, cart.add), ilgili işlem tamamlandığında çalıştırılacak callback fonksiyonlarını saklar.
  • Callback fonksiyonları, işlem sonuçlarına bağlı olarak veri (örneğin, sepet bilgileri) alabilir.

Callback Kullanımı

Callback fonksiyonları, belirli bir işlem tamamlandığında çalışacak şekilde tanımlanır. Örneğin, sepete ürün eklendiğinde bir mesaj yazdırmak için cart.add dizisine bir fonksiyon eklenir.

Örnek: Sepete Ürün Ekleme Callback’i

Sepete ürün eklendiğinde konsola bir mesaj yazdırmak için aşağıdaki kod kullanılabilir:

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

Açıklama:

  • callbacks.cart.add: Sepete ürün ekleme işleminin callback dizisi.
  • data: İşlem sonrası dönen veri (örneğin, eklenen ürünün bilgileri).
  • Yukarıdaki kod, sepete ürün eklendiğinde konsola veriyle birlikte bir mesaj yazdırır.

Data-Callback Kullanımı

Bazı HTML elemanlarında data-callback özniteliği kullanılarak callback fonksiyonları tanımlanabilir. Bu, belirli bir elemanla etkileşim sonrası özel bir fonksiyonun çalışmasını sağlar.

Örnek: HTML’de Data-Callback

Aşağıdaki HTML kodu, bir varyant seçim menüsüne tıklanıldığında variantCallback fonksiyonunu tetikler:

<div data-toggle="variant-two">
    <select data-toggle="variant" data-callback="variantCallback">
        <option>...</option>
    </select>
</div>

Data-Callback Tanımlama

variantCallback fonksiyonu, window nesnesine aşağıdaki gibi tanımlanır:

window['variantCallback'] = function(params) {
    console.log(params, 'Varyanta tıklandı');
};

Açıklama:

  • data-callback="variantCallback": Elemanla etkileşim sonrası variantCallback fonksiyonunu çağırır.
  • params: Tıklama işlemiyle ilgili parametreler (örneğin, seçilen varyantın bilgileri).
  • Yukarıdaki kod, varyant seçildiğinde konsola parametrelerle birlikte bir mesaj yazdırır.

Callback Tanımlama ve Kullanım İpuçları

  1. Modülerlik: Callback fonksiyonları, kodun modüler ve yeniden kullanılabilir olmasını sağlar. Her işlem için ayrı callback dizileri tanımlayarak kod karmaşasını önleyin.
  2. Hata Yönetimi: cart.error gibi hata callback’lerini kullanarak işlem hatalarını yönetin.
  3. Dinamiklik: data-callback özniteliği ile HTML elemanlarına dinamik davranışlar ekleyin.
  4. Veri Kullanımı: Callback fonksiyonları genellikle işlem sonuçlarını (örneğin, data) parametre olarak alır. Bu verileri analiz ederek kullanıcıya özel bildirimler gösterebilirsiniz.

Örnek Senaryolar

Senaryo 1: Ödeme Yöntemi Değişikliği

Ödeme yöntemi değiştirildiğinde bir bildirim göstermek için:

callbacks.order.paymentMethod.change.push((data) => {
    notify({
        text: `Ödeme yöntemi ${data.method} olarak değiştirildi`,
        class: 'success',
        duration: 3000
    });
});

Senaryo 2: Ürün Favorilere Eklendiğinde

Ürün favorilere eklendiğinde bir modal göstermek için:

callbacks.product.favourite.add.push((data) => {
    modal({
        id: 'favouriteModal',
        title: 'Favorilere Eklendi',
        html: `<p>${data.productName} favorilere eklendi!</p>`,
        buttons: [{ text: 'Tamam', event: () => modalClose() }]
    });
});

Senaryo 3: Dinamik Ürün Yükleyici

Dinamik ürün yükleyici tamamlandığında bir işlevi tetiklemek için:

callbacks.product.dynamicLoader.push((data) => {
    console.log('Ürünler yüklendi:', data);
    // Örneğin, yeni yüklenen ürünleri DOM'a ekle
});

Sonuç

Callback fonksiyonları, tema geliştirme sürecinde esnek ve dinamik işlevsellik sağlamak için güçlü bir araçtır. callbacks nesnesi, farklı işlem türleri için düzenli bir yapı sunar ve data-callback özniteliği ile HTML elemanlarına kolayca entegre edilebilir. Yukarıdaki örnekler ve açıklamalar, callback fonksiyonlarının nasıl tanımlanacağını ve kullanılacağını açıkça göstermektedir.