T-SOFT/Tema Geliştirme/JavaScript/JS Bileşenleri

JS Bileşenleri

components nesnesi, favori yönetiminden sepete eklemeye kadar mağaza arayüzünün hazır etkileşim bileşenlerini içerir. Bileşenler sayfa yüklendiğinde (DOMContentLoaded) components.init() ile otomatik ayağa kalkar ve şablonlardaki data-toggle attribute'larıyla eşleşen elemanlara bağlanır — çoğu durumda JavaScript yazmanız gerekmez, doğru attribute'u vermeniz yeterlidir.

Hangi data-toggle değerinin hangi bileşeni tetiklediğini ürün tarafı için Data Toggle — Ürün, sepet ve üyelik tarafı için Data Toggle — Sepet ve Üye sayfalarında bulabilirsiniz.

favourite

Favori ürünleri yönetir.

Yöntem	Açıklama
`add(productId, message)`	Ürünü favorilere ekler.
`remove(productId, message)`	Ürünü favorilerden kaldırır.
`fetchFavorites()`	Favori listesini alır.
`setFavorites(fav)`	Favori listesini günceller.
`set()`	Favori durumlarını DOM'a uygular.
`sendUpdates()`	Favori güncellemelerini sunucuya gönderir.
`click(element)`	Favori düğmesine tıklama işlevi.
`init()`	Bileşeni başlatır.

theme.js

components.favourite.add('123', true); // Ürün 123'ü favorilere ekler ve bildirim gösterir

collection

Ürün koleksiyonlarını (favori listeleri) yönetir.

Yöntem	Açıklama
`init()`	Koleksiyon düğmelerini başlatır.

theme.js

components.collection(); // Koleksiyon bileşenini başlatır

compare

Ürün karşılaştırmasını yönetir.

Yöntem	Açıklama
`add(productId)`	Ürünü karşılaştırma listesine ekler.
`remove(productId)`	Ürünü listeden kaldırır.
`get()`	Karşılaştırma listesini alır.
`init()`	Bileşeni başlatır.

theme.js

components.compare.add('123'); // Ürün 123'ü karşılaştırma listesine ekler

stockAlarm

Stok uyarısı işlevselliği sağlar.

Yöntem	Açıklama
`remove(removeAlarm)`	Stok uyarısını kaldırır.
`init()`	Bileşeni başlatır.

theme.js

components.stockAlarm.init(); // Stok uyarı bileşenini başlatır

priceAlarm

Fiyat uyarısı işlevselliği sağlar.

Yöntem	Açıklama
`remove(removeAlarm)`	Fiyat uyarısını kaldırır.
`init()`	Bileşeni başlatır.

theme.js

components.priceAlarm.init(); // Fiyat uyarı bileşenini başlatır

multipleDiscount

Çoklu indirim seçeneklerini yönetir.

Yöntem	Açıklama
`setTotal()`	Toplam indirimi günceller.
`set(input)`	İndirim durumunu ayarlar.
`init()`	Bileşeni başlatır.

theme.js

components.multipleDiscount.init(); // Çoklu indirim bileşenini başlatır

qty

Ürün miktarı (adet artır/azalt) kontrolünü sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.qty(); // Miktar kontrol bileşenini başlatır

addToCart

Sepete ürün ekleme işlevselliği sağlar. İlgili data-toggle yapısı için bkz. Data Toggle — Ürün.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.addToCart(); // Sepete ekle bileşenini başlatır

Sepete ekleme sonrası drawer açmak veya varyant seçimini özelleştirmek için callbacks.cart.modal kancalarını kullanın — bkz. JS Callback.

cartPreview

Sepet önizlemesini yönetir.

Yöntem	Açıklama
`getCartPreview(auto)`	Sepet önizlemesini yükler.
`init()`	Bileşeni başlatır.

theme.js

components.cartPreview.init(); // Sepet önizleme bileşenini başlatır

cartDrawer

Sepet yan menüsünü (drawer) yönetir. İlgili data-toggle yapısı için bkz. Data Toggle — Sepet ve Üye.

Yöntem	Açıklama
`getCartDrawer(auto)`	Sepet yan menüsünü yükler.
`init()`	Bileşeni başlatır.

theme.js

components.cartDrawer.init(); // Sepet yan menü bileşenini başlatır

cartCountPrice

Header'daki sepet adedi ve toplam fiyat göstergesini günceller.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.cartCountPrice(); // Sepet sayısı ve fiyat bileşenini başlatır

multiAddtoCart

Çoklu ürünü tek seferde sepete ekleme işlevselliği sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.multiAddtoCart(); // Çoklu sepete ekle bileşenini başlatır

multiSelect

Çoklu seçim işlevselliği sağlar.

Yöntem	Açıklama
`set(btn)`	Seçili öğeleri günceller.
`init()`	Bileşeni başlatır.

theme.js

components.multiSelect.init(); // Çoklu seçim bileşenini başlatır

memberName

Oturumdaki üyenin adını arayüzde gösterir.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.memberName(); // Üye adı bileşenini başlatır

Bülten aboneliği formunu yönetir.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.newsletter(); // Bülten bileşenini başlatır

fastRegister

Hızlı kayıt formunu yönetir.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.fastRegister(); // Hızlı kayıt bileşenini başlatır

Giriş formunu yönetir. İlgili data-toggle yapısı için bkz. Data Toggle — Sepet ve Üye.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.login(); // Giriş bileşenini başlatır

nomembership

Üyeliksiz alışveriş formunu yönetir.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.nomembership(); // Üyeliksiz alışveriş bileşenini başlatır

socialLogin

Sosyal medya ile giriş işlevselliği sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.socialLogin(); // Sosyal giriş bileşenini başlatır

logout

Oturumdan çıkış işlevselliği sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.logout(); // Çıkış bileşenini başlatır

isRequired

Formlardaki zorunlu alanları işaretler.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.isRequired(); // Zorunlu alan bileşenini başlatır

imageMap

Resim haritası (tıklanabilir görsel bölgeleri) işlevselliği sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.imageMap(); // Resim haritası bileşenini başlatır

lazyLoadedBg

Geç yüklenen (lazy load) arka plan görsellerini yönetir.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.lazyLoadedBg(); // Geç yükleme bileşenini başlatır

productLink

Ürün bağlantılarını yönetir.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.productLink(); // Ürün bağlantı bileşenini başlatır

addClass

data-toggle ile işaretlenen elemanlara sınıf ekleme işlevselliği sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.addClass(); // Sınıf ekleme bileşenini başlatır

removeClass

data-toggle ile işaretlenen elemanlardan sınıf kaldırma işlevselliği sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.removeClass(); // Sınıf kaldırma bileşenini başlatır

toggleClass

data-toggle ile işaretlenen elemanlarda sınıf değiştirme işlevselliği sağlar.

Yöntem	Açıklama
`init()`	Bileşeni başlatır.

theme.js

components.toggleClass(); // Sınıf değiştirme bileşenini başlatır

init

Tüm bileşenleri tek seferde başlatır.

theme.js

components.init(); // Tüm bileşenleri başlatır

Olay dinleyicileri

Sayfa yüklendiğinde (DOMContentLoaded) aşağıdaki işlemler otomatik olarak gerçekleştirilir:

İşlem	Açıklama
`catalogApp.init()`	Katalog uygulamasını başlatır.
`appMobile()`	Mobil uygulama işlevlerini başlatır (yalnızca ana sayfada).
`components.init()`	Tüm bileşenleri başlatır.
`productLoader()`	Ürün yükleyiciyi başlatır.
`messageCount()`	Mesaj sayısını günceller.
`queryControl()`	Sorgu kontrollerini yapar.
`memberKvkkControl()`	Üye KVKK kontrollerini yapar.
`passwordStrengthControl()`	Şifre gücü kontrollerini yapar.
`lazyLoadedBg`	Geç yüklenen görselleri scroll olayında yükler.
`refererStorage.addItem()`	Yönlendirme (referer) bilgisini kaydeder.

document.addEventListener('DOMContentLoaded', async () => {
    await components.init();
});

Bileşenleri elle yeniden başlatmadan önce mevcut durumu kontrol edin. Aynı bileşeni birden fazla kez init() etmek, aynı elemana birden fazla olay dinleyicisi bağlanmasına yol açabilir. Dinamik eklenen içerik için yalnızca ilgili bileşeni çağırın.

JS Bileşenleri

favourite

collection

compare

stockAlarm

priceAlarm

multipleDiscount

qty

addToCart

cartPreview

cartDrawer

cartCountPrice

multiAddtoCart

multiSelect

memberName

fastRegister

nomembership

socialLogin

logout

isRequired

imageMap

lazyLoadedBg

productLink

addClass

removeClass

toggleClass

init

Olay dinleyicileri

Sonraki adımlar

JS Fonksiyonları

Callback'ler