İçindekiler

  1. TOC

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ı
    modal: { // Sepete ekleme sonrası drawer ya da variatn seçimleri
      variant: [],
      add: [],
    },
  },
  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
})

Senaryo 4: Sepete ekleme sonrası drawer açtırma

Sepete ekleme sonrası default davranışlar haricinde drawer açtırmak için kullanılır. Ayrıca sepete ekleme öncesi varyant seçimi için popup yerine kullanılır.

callbacks.cart.modal.variant.push(function (response, fnc) {
  console.log(response, fnc)
})

callbacks.cart.modal.add.push(function (response, fnc) {
  console.log(response, fnc)
})

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.