JS Callback
Callback fonksiyonları, giriş yapma, sepete ekleme, ödeme yöntemi değiştirme gibi işlemler tamamlandığında tetiklenir; işlem sonrası özel davranışlar tanımlamanın standart yoludur. Callback'lerinizi theme.js içinde tanımlayarak temaya esnek ve modüler işlevsellik ekleyebilirsiniz.
Callback yapısı
window['callbacks'] nesnesi, callback dizilerini işlevsellik alanlarına göre gruplar. Her dizi, ilgili işlem tamamlandığında sırayla çalıştırılacak fonksiyonları saklar:
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 varyant 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ı
},
}
- Her üst kategori (
customer,cart,order,product,customerOrder) bir işlevsellik alanını temsil eder. - Her dizi (örneğin
cart.add), ilgili işlem tamamlandığında çalıştırılacak fonksiyonları saklar. - Callback fonksiyonları, işlem sonucuna ait veriyi (örneğin sepet bilgilerini) parametre olarak alabilir.
Callback ekleme
Bir işleme callback bağlamak için ilgili diziye push() ile fonksiyon ekleyin. Örneğin sepete ürün eklendiğinde konsola mesaj yazdırmak için:
callbacks.cart.add.push((data) => {
console.log("Sepete eklendi:", data)
})
| Öğe | 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). |
theme.js içinde tanımlayın. Böylece tüm sayfa yüklemelerinde kayıt garanti edilir ve kod tek bir yerde toplanır — bkz. JavaScript'e Genel Bakış.data-callback attribute kalıbı
Bazı HTML elemanlarında data-callback attribute'u ile callback tanımlanabilir. Bu, elemanla etkileşim sonrası window üzerinde tanımlı bir fonksiyonun çalışmasını sağlar.
Örneğin varyant seçim menüsü değiştiğinde variantCallback fonksiyonunu tetiklemek için:
<div data-toggle="variant-two">
<select data-toggle="variant" data-callback="variantCallback">
<option>...</option>
</select>
</div>
Fonksiyonu window nesnesine tanımlayın:
window["variantCallback"] = function (params) {
console.log(params, "Varyanta tıklandı")
}
| Öğe | Açıklama |
|---|---|
data-callback="variantCallback" | Etkileşim sonrası window.variantCallback fonksiyonunu çağırır. |
params | İşlemle ilgili parametreler (örneğin seçilen varyantın bilgileri). |
Kullanım ipuçları
Modülerlik
Hata yönetimi
cart.error gibi hata callback'lerini kullanarak işlem hatalarını yakalayın ve kullanıcıya bildirin.Dinamiklik
data-callback attribute'u ile HTML elemanlarına JavaScript dokunuşu olmadan davranış bağlayın.Veri kullanımı
data parametresini analiz ederek kullanıcıya özel bildirimler gösterin.Örnek senaryolar
Ödeme yöntemi değişikliği
Ödeme yöntemi değiştirildiğinde 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,
})
})
Ürün favorilere eklendiğinde
Ürün favorilere eklendiğinde 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() }],
})
})
Dinamik ürün yükleyici
Dinamik ürün yükleyici tamamlandığında bir işlem tetiklemek için:
callbacks.product.dynamicLoader.push((data) => {
console.log("Ürünler yüklendi:", data)
// Örneğin, yeni yüklenen ürünleri işleyin
})
Sepete ekleme sonrası drawer açma
callbacks.cart.modal kancaları, sepete ekleme akışının varsayılan davranışını değiştirmenizi sağlar: varyant seçimini popup yerine drawer'da göstermek ve ekleme sonrası sepet içeriğini drawer'da açmak için 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)
})
Ürün liste sayfasında "Sepete Ekle" işleminde varyant seçeneklerini drawer içinde göstermek:
callbacks.cart.modal.variant.push(function (response, cartFormData) {
drawer({
id: '',
html: response,
position: 'right',
close: false,
title: ''
})
})
Sepete ekleme tamamlandıktan sonra sepet içeriğini drawer içinde göstermek:
callbacks.cart.modal.add.push(function (response, cartFormData) {
drawerClose() // callbacks.cart.modal.variant'ta açılan drawer önce kapanmalı
drawer({
html: response
})
})