JavaScript Fonksiyonları

Bu doküman, general.js dosyasında tanımlı olan ve tema geliştirme sürecinde kullanılabilecek JavaScript fonksiyonlarını ayrıntılı bir şekilde açıklamaktadır. Fonksiyonlar, bileşenler ve yardımcı araçlar olarak kategorize edilmiştir. Her bir fonksiyonun amacı, parametreleri ve kullanım örnekleri aşağıda detaylandırılmıştır.

Genel Açıklama

general.js dosyası, tema geliştirme sürecinde dinamik işlevsellik sağlamak için kullanılan bir dizi fonksiyon ve bileşen içerir. Bu fonksiyonlar, API isteklerinden DOM manipülasyonuna, kullanıcı arayüzü etkileşimlerinden veri yönetimine kadar geniş bir yelpazede görev yapar. Aşağıda, bu fonksiyonların detaylı açıklamaları ve kullanım örnekleri sunulmaktadır.

Yardımcı Fonksiyonlar

getLocale()

Sayfanın diline göre yerel ayar (locale) bilgisini döndürür.

Parametreler:

  • Yok

Dönüş Değeri:

  • string: Yerel ayar kodu (örneğin, tr-TR, en-US).

Örnek:

const locale = getLocale(); // Örneğin: "tr-TR"

request(method, url, data, accept)

Asenkron HTTP istekleri gönderir.

Parametreler:

  • method (string, opsiyonel): HTTP yöntemi (GET, POST, vb.). Varsayılan: GET.
  • url (string): İstek gönderilecek URL.
  • data (any, opsiyonel): Gönderilecek veri (örneğin, FormData).
  • accept (string, opsiyonel): Beklenen yanıt türü (JSON).

Dönüş Değeri:

  • Promise: Yanıt verisi (JSON veya metin).

Örnek:

request('GET', '/api/data', null, 'JSON')
    .then(response => console.log(response))
    .catch(error => console.error(error));

LocalApi.get(key, def)

localStorage üzerinden veri alır.

Parametreler:

  • key (string): Alınacak verinin anahtarı.
  • def (any, opsiyonel): Varsayılan değer. Varsayılan: false.

Dönüş Değeri:

  • any: Alınan veri veya varsayılan değer.

Örnek:

const value = LocalApi.get('compare', null); // user anahtarındaki veriyi alır

LocalApi.set(key, val, timeout)

localStorage üzerine veri kaydeder.

Parametreler:

  • key (string): Kaydedilecek verinin anahtarı.
  • val (any): Kaydedilecek veri.
  • timeout (number, opsiyonel): Verinin geçerlilik süresi (saniye cinsinden). Varsayılan: 1 yıl.

Dönüş Değeri:

  • boolean: İşlem başarılıysa true, aksi takdirde false.

Örnek:

LocalApi.set('user', { id: 1 }, 3600); // 1 saatlik geçerlilik süresi

LocalApi.remove(key)

localStorage üzerinden veri siler.

Parametreler:

  • key (string): Silinecek verinin anahtarı.

Dönüş Değeri:

  • boolean: İşlem başarılıysa true, aksi takdirde false.

Örnek:

LocalApi.remove('user'); // user anahtarını siler

scrollBehavior(href, height, trigger)

Sayfayı belirtilen bir elemana kaydırır.

Parametreler:

  • href (stringobject, opsiyonel): Kaydırılacak elemanın seçicisi veya DOM elemanı.
  • height (number, opsiyonel): Üstten kaydırma mesafesi. Varsayılan: 0.
  • trigger (boolean, opsiyonel): Elemana tıklamayı tetikler mi? Varsayılan: false.

Örnek:

scrollBehavior('#section1', 100); // #section1 elemanına 100px üstten kaydır

loader(status)

Sayfa yükleme göstergesini kontrol eder.

Parametreler:

  • status (boolean, opsiyonel): Yükleme göstergesi gösterilsin mi? Varsayılan: false. True olduğunda body’e is-loading classı atar.

Örnek:

loader(true); // Yükleme göstergesini göster
loader(false); // Yükleme göstergesini gizle

addClass(element, cls)

Belirtilen elemanlara sınıf ekler.

Parametreler:

  • element (NodeListArray): Sınıf eklenecek elemanlar.
  • cls (string): Eklenecek sınıf(lar).

Örnek:

addClass(document.querySelectorAll('.item'), 'active'); // Tüm .item elemanlarına active sınıfı ekler

removeClass(element, cls)

Belirtilen elemanlardan sınıf kaldırır.

Parametreler:

  • element (NodeListArray): Sınıf kaldırılacak elemanlar.
  • cls (string): Kaldırılacak sınıf(lar).

Örnek:

removeClass(document.querySelectorAll('.item'), 'active'); // Tüm .item elemanlarından active sınıfını kaldırır

toggleClass(element, cls)

Belirtilen elemanlarda sınıfı değiştirir (ekler/kaldırır).

Parametreler:

  • element (NodeListArray): Sınıf değiştirilecek elemanlar.
  • cls (string): Değiştirilecek sınıf(lar).

Örnek:

toggleClass(document.querySelectorAll('.item'), 'active'); // Tüm .item elemanlarında active sınıfını değiştirir

getUrlParam(key, url)

URL’den belirli bir parametreyi alır.

Parametreler:

  • key (string): Alınacak parametrenin anahtarı.
  • url (string, opsiyonel): Parametre alınacak URL. Varsayılan: Mevcut sayfa URL’si.

Dönüş Değeri:

  • string | null: Parametre değeri veya null.

Örnek:

const param = getUrlParam('id'); // ?id=123 -> "123"

setUrlParam(key, value, url)

URL’ye bir parametre ekler veya günceller.

Parametreler:

  • key (string): Eklenecek/güncellenecek parametrenin anahtarı.
  • value (string): Parametre değeri.
  • url (string, opsiyonel): İşlem yapılacak URL. Varsayılan: Mevcut sayfa URL’si.

Dönüş Değeri:

  • URL: Güncellenmiş URL nesnesi.

Örnek:

const newUrl = setUrlParam('id', '123', 'https://example.com'); // https://example.com?id=123

deleteUrlParam(key, url)

URL’den belirli bir parametreyi siler.

Parametreler:

  • key (string): Silinecek parametrenin anahtarı.
  • url (string, opsiyonel): İşlem yapılacak URL. Varsayılan: Mevcut sayfa URL’si.

Dönüş Değeri:

  • URL: Güncellenmiş URL nesnesi.

Örnek:

const newUrl = deleteUrlParam('id', 'https://example.com?id=123'); // https://example.com

setCookie(cookieName, cookieValue, ExDays)

Çerez (cookie) oluşturur.

Parametreler:

  • cookieName (string): Çerez adı.
  • cookieValue (string): Çerez değeri.
  • ExDays (number): Çerezin geçerlilik süresi (gün cinsinden).

Örnek:

setCookie('user', 'john', 30); // 30 gün geçerli bir çerez oluşturur

getCookie(cookieName)

Belirtilen çerezin değerini alır.

Parametreler:

  • cookieName (string): Çerez adı.

Dönüş Değeri:

  • string: Çerez değeri veya boş string.

Örnek:

const user = getCookie('user'); // "john"

browser()

Kullanıcının tarayıcısını tespit eder.

Dönüş Değeri:

  • string: Tarayıcı adı (örneğin, Google Chrome, Mozilla Firefox).

Örnek:

const browserName = browser(); // "Google Chrome"

isMobile(size)

Cihazın mobil olup olmadığını kontrol eder.

Parametreler:

  • size (number, opsiyonel): Maksimum ekran genişliği. Varsayılan: 1024.

Dönüş Değeri:

  • boolean: Mobil cihazsa true, değilse false.

Örnek:

const isMob = isMobile(); // true / false

URL’ye parametre ekler veya günceller ve döndürür.

Parametreler:

  • param (string): Eklenecek/güncellenecek parametre.
  • value (string): Parametre değeri.
  • link (string, opsiyonel): İşlem yapılacak URL. Varsayılan: Mevcut sayfa URL’si.

Dönüş Değeri:

  • string: Güncellenmiş URL.

Örnek:

const url = getLink('page', '2'); // ?page=2

evalScripts(content)

Metin içerisindeki <script> etiketlerini çalıştırır.

Parametreler:

  • content (string): Çalıştırılacak HTML içeriği.

Örnek:

evalScripts('<script>console.log("Merhaba");</script>'); // Konsola "Merhaba" yazar

evalScriptsAdd(content, id)

Metin içerisindeki <script> etiketlerini DOM’a ekler.

Parametreler:

  • content (string): HTML içeriği.
  • id (string): Script elemanlarına atanacak ID öneki.

Dönüş Değeri:

  • boolean: İşlem başarılıysa true.

Örnek:

evalScriptsAdd('<script>console.log("Merhaba");</script>', 'script1');

scriptAdd(src, onload, onerror, integrity)

Sayfaya bir script dosyası ekler.

Parametreler:

  • src (string): Script dosyasının URL’si.
  • onload (function, opsiyonel): Script yüklendiğinde çalışacak fonksiyon.
  • onerror (function, opsiyonel): Hata durumunda çalışacak fonksiyon.
  • integrity (string, opsiyonel): Script için bütünlük kontrolü.

Örnek:

scriptAdd('https://example.com/script.js', () => console.log('Yüklendi'));

setLanguage(value, callback)

Sayfa dilini değiştirir.

Parametreler:

  • value (string): Yeni dil kodu (örneğin, tr, en).
  • callback (stringfunction, opsiyonel): Dil değişimi sonrası çalışacak fonksiyon.

Örnek:

setLanguage('en', () => console.log('Dil değişti'));

setCurrency(value, callback)

Sayfa para birimini değiştirir.

Parametreler:

  • value (string): Yeni para birimi kodu (örneğin, TL, USD).
  • callback (stringfunction, opsiyonel): Para birimi değişimi sonrası çalışacak fonksiyon.

Örnek:

setCurrency('USD', () => console.log('Para birimi değişti'));

copyText(text, msg)

Metni panoya kopyalar ve bir bildirim gösterir.

Parametreler:

  • text (string): Kopyalanacak metin.
  • msg (string, opsiyonel): Bildirim mesajı.

Örnek:

copyText('Merhaba', 'Kopyalandı!'); // Metni kopyalar ve bildirim gösterir

awaitTimeOut(ms)

Belirtilen süre kadar bekler.

Parametreler:

  • ms (number): Bekleme süresi (milisaniye).

Dönüş Değeri:

  • Promise: Bekleme tamamlandığında çözülür.

Örnek:

await awaitTimeOut(1000); // 1 saniye bekler

modalClose(modal, modalObj)

Modal pencereyi kapatır.

Parametreler:

  • modal (stringHTMLElement, opsiyonel): Kapatılacak modalın seçicisi veya DOM elemanı.
  • modalObj (object, opsiyonel): Modal nesnesi.

Örnek:

modalClose('#myModal'); // #myModal ID'li modalı kapatır

modal(options)

Bir modal pencere oluşturur ve gösterir.

Parametreler:

  • options (object): Modal ayarları.
    • id (string): Modal ID’si.
    • class (string): Modal sınıfı (success, danger, info).
    • width (string): Modal genişliği (örneğin, 580px).
    • height (string): Modal yüksekliği.
    • title (string): Modal başlığı.
    • html (string): Modal içeriği.
    • timeout (number): Otomatik kapanma süresi (milisaniye).
    • close (boolean): Kapatma düğmesi gösterilsin mi?
    • disabledClose (boolean): Kapatma devre dışı mı?
    • iconHtml (string): Modal simgesi.
    • alert (boolean): Uyarı modalı mı?
    • buttons (array): Modal düğmeleri.
    • callbacks (object): Açılma/kapanma geri çağırımları.

Örnek:

modal({
    id: 'myModal',
    title: 'Başlık',
    html: '<p>Merhaba Dünya</p>',
    buttons: [{ text: 'Kapat', event: () => modalClose() }]
});

notify(options)

Bir bildirim gösterir.

Parametreler:

  • options (object): Bildirim ayarları.
    • title (string): Bildirim başlığı.
    • text (string): Bildirim metni.
    • duration (number): Bildirim süresi (milisaniye).
    • gravity (string): Bildirim konumu (top, bottom).
    • position (string): Bildirim hizası (left, right).
    • class (string): Bildirim sınıfı (success, danger, info).
    • iconHtml (string): Bildirim simgesi.

Örnek:

notify({
    text: 'Başarılı!',
    class: 'success',
    duration: 3000
});

drawerClose()

Açık olan tüm yan menüleri kapatır.

Örnek:

drawerClose(); // Tüm yan menüleri kapatır

mask(element, mask, regex, max)

Giriş alanlarına maske uygular.

Parametreler:

  • element (HTMLElement): Maske uygulanacak giriş elemanı.
  • mask (string, opsiyonel): Maske türü (string, number, email, vb.).
  • regex (string, opsiyonel): Özel düzenli ifade.
  • max (string, opsiyonel): Maksimum karakter sayısı.

Örnek:

mask(document.querySelector('#phone'), 'number', null, 10); // Telefon girişine sayı maskesi uygular

format(p, d)

Sayıyı para birimi formatına dönüştürür.

Parametreler:

  • p (number): Formatlanacak sayı.
  • d (number, opsiyonel): Ondalık basamak sayısı. Varsayılan: DECIMAL_LENGTH. Özel bir durum olmadığında boş bırakılmalıdır ki DECIMAL_LENGTH değerini alsın.

Dönüş Değeri:

  • string: Formatlanmış sayı (örneğin, 1.234,56).

Örnek:

const formatted = format(1234.567); // "1.234,57" default `d` değeri 2'dir.

vat(p, vat)

KDV dahil fiyatı hesaplar.

Parametreler:

  • p (number): KDV hariç fiyat.
  • vat (number): KDV oranı (%).

Dönüş Değeri:

  • string: KDV dahil formatlanmış fiyat.

Örnek:

const priceWithVat = vat(100, 18); // '118,00'  KDV dahil fiyat

priceToFloat(p)

Formatlanmış fiyatı sayıya dönüştürür.

Parametreler:

  • p (string): Formatlanmış fiyat (örneğin, 1.234,56).

Dönüş Değeri:

  • number | false: Dönüştürülmüş sayı veya hata durumunda false.

Örnek:

const number = priceToFloat('1.234,56'); // 1234.56

triggerEvent(element, event)

Belirtilen elemanda bir olay tetikler.

Parametreler:

  • element (HTMLElement): Olay tetiklenecek eleman.
  • event (string): Tetiklenecek olay (örneğin, click, mouseenter).

Örnek:

triggerEvent(document.querySelector('#btn'), 'click'); // #btn elemanında click olayı tetikler

outsideClick(eventElement, element, onCallback)

Elemanların dışına tıklanıldığında bir geri çağırım çalıştırır.

Parametreler:

  • eventElement (HTMLElement): İzlenen eleman.
  • element (HTMLElement): Dış tıklama kontrol edilecek eleman.
  • onCallback (function): Dış tıklamada çalışacak fonksiyon.

Örnek:

outsideClick(document.querySelector('#menu'), document.querySelector('#menu'), () => console.log('Dışarı tıklandı'));

timeConverter(UNIX_timestamp, format)

Unix zaman damgasını belirtilen formata dönüştürür.

Parametreler:

  • UNIX_timestamp (number): Unix zaman damgası.
  • format (string): Çıktı formatı (örneğin, d.m.y).

Dönüş Değeri:

  • string: Formatlanmış tarih.
  • y.m.d.h.i.s: Sırası ile yıl.ay.gün.saat.dakika.saniye ye denk gelir.

Örnek:

const date = timeConverter(1625097600000, 'd.m.y'); // "01.07.2021"

taxLoader(options)

Vergi dairesi listesini yükler ve bir seçim menüsü oluşturur.

Parametreler:

  • options (object): Ayarlar.
    • selector (stringHTMLElement): Seçim menüsünün bağlanacağı eleman.
    • limit (number): Bir seferde yüklenecek öğe sayısı.
    • start (number): Başlangıç indeksi.

Örnek:

taxLoader({ selector: '#taxOffice', limit: 15 });

stringToObject(inputString)

Query string’i bir nesneye dönüştürür.

Parametreler:

  • inputString (string): Query string (örneğin, key1=value1&key2=value2).

Dönüş Değeri:

  • object: Anahtar-değer nesnesi.

Örnek:

const obj = stringToObject('id=123&name=John'); // { id: "123", name: "John" }

snippetUri(snippet, params)

Snippet URL’si oluşturur.

Parametreler:

  • snippet (string): Snippet adı.
  • params (object): URL parametreleri.

Dönüş Değeri:

  • string: Oluşturulan URL.

Örnek:

const url = snippetUri('cart-preview', { include: 'cart' }); // '/api/storefront/snippet/cart-preview?include=cart&language=tr'

loadSnippet(options)

Bir snippet yükler.

Parametreler:

  • options (object): Ayarlar.
    • snippet (string): Snippet adı.
    • params (object): URL parametreleri.
    • success (function): Başarılı yanıt sonrası çalışacak fonksiyon.

Örnek:

loadSnippet({
    snippet: 'cart-preview',
    params: { include: 'cart' },
    success: (response) => console.log(response)
});

getOffsetTop(element)

Elemanın sayfanın üstüne olan mesafesini hesaplar.

Parametreler:

  • element (HTMLElement): Mesafesi hesaplanacak eleman.

Dönüş Değeri:

  • number: Elemanın üst mesafesi (px).

Örnek:

const offset = getOffsetTop(document.querySelector('#section')); // 500

checkValidity(form)

Formun doğruluğunu kontrol eder.

Parametreler:

  • form (HTMLFormElement): Doğrulanacak form.

Dönüş Değeri:

  • boolean: Form geçerliyse true, değilse false.

Örnek:

const isValid = checkValidity(document.querySelector('#myForm')); // true

popoverAlert(options)

Formda hata mesajı gösterir.

Parametreler:

  • options (object): Ayarlar.
    • selector (stringHTMLElement): Hata mesajının bağlanacağı eleman.
    • message (string): Hata mesajı.
    • scroll (boolean): Hata alanına kaydırılsın mı?

Örnek:

popoverAlert({
    selector: '#email',
    message: 'Geçersiz e-posta'
});

popoverAlertHide(parent)

Hata mesajlarını gizler.

Parametreler:

  • parent (HTMLElement, opsiyonel): Hata mesajlarının gizleneceği kapsayıcı. Varsayılan: document.body.

Örnek:

popoverAlertHide(document.querySelector('#myForm')); // Formdaki hata mesajlarını gizler

passwordToggle(event, input)

Şifre girişinin görünürlüğünü değiştirir.

Parametreler:

  • event (HTMLElement): Şifre görünürlük düğmesi.
  • input (HTMLElement): Şifre giriş alanı.

Örnek:

passwordToggle(document.querySelector('#toggle'), document.querySelector('#password'));

captchaToggle(element)

CAPTCHA resmini yeniler.

Parametreler:

  • element (HTMLElement): CAPTCHA resmi.

Örnek:

captchaToggle(document.querySelector('#captcha')); // CAPTCHA resmini yeniler

messageCount()

Kullanıcının mesaj sayısını alır ve gösterir.

Örnek:

messageCount(); // Mesaj sayısını günceller

formLoader(options)

Form alanlarını veriyle doldurur.

Parametreler:

  • options (object): Ayarlar.
    • selector (string): Form seçicisi.
    • url (string): Veri alınacak URL.
    • data (object): Formu dolduracak veri.
    • callback (function): Doldurma sonrası çalışacak fonksiyon.

Örnek:

formLoader({
    selector: '#myForm',
    url: '/api/form-data',
    callback: (result) => console.log(result)
});

tsRegion(options)

Bölge seçimi (ülke, şehir, ilçe) için dinamik bir arayüz sağlar.

Parametreler:

  • options (object): Ayarlar.
    • container (string): Bölge seçimi kapsayıcısı.
    • countryLimit (number): Ülke limiti.
    • storeLimit (number): Mağaza limiti.
    • regionLimit (number): Bölge limiti.
    • country, state, city, town, district (object): Her biri için ayarlar (container, selector, code, value).

Örnek:

tsRegion({
    container: '.regions',
    country: { selector: '#country' }
});

Bileşenler (Components)

Aşağıdaki bileşenler, kullanıcı arayüzü etkileşimlerini yönetmek için kullanılır. Her bileşen, belirli bir işlevi yerine getirir ve genellikle otomatik olarak başlatılır (components.init()).

favourite

Favori ürünleri yönetir.

Yöntemler:

  • 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.

Örnek:

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

collection

Ürün koleksiyonlarını yönetir.

Yöntemler:

  • init(): Koleksiyon düğmelerini başlatır.

Örnek:

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

compare

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

Yöntemler:

  • 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.

Örnek:

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

stockAlarm

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

Yöntemler:

  • remove(removeAlarm): Stok uyarısını kaldırır.
  • init(): Bileşeni başlatır.

Örnek:

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

priceAlarm

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

Yöntemler:

  • remove(removeAlarm): Fiyat uyarısını kaldırır.
  • init(): Bileşeni başlatır.

Örnek:

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

multipleDiscount

Çoklu indirim seçeneklerini yönetir.

Yöntemler:

  • setTotal(): Toplam indirimi günceller.
  • set(input): İndirim durumunu ayarlar.
  • init(): Bileşeni başlatır.

Örnek:

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

qty

Ürün miktarı kontrolünü sağlar.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

addToCart

Sepete ürün ekleme işlevselliği sağlar.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

cartPreview

Sepet önizlemesini yönetir.

Yöntemler:

  • getCartPreview(auto): Sepet önizlemesini yükler.
  • init(): Bileşeni başlatır.

Örnek:

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

cartDrawer

Sepet yan menüsünü yönetir.

Yöntemler:

  • getCartDrawer(auto): Sepet yan menüsünü yükler.
  • init(): Bileşeni başlatır.

Örnek:

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

cartCountPrice

Sepet sayısı ve fiyatını günceller.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

multiAddtoCart

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

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

multiSelect

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

Yöntemler:

  • set(btn): Seçili öğeleri günceller.
  • init(): Bileşeni başlatır.

Örnek:

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

memberName

Üye adını gösterir.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

newsletter

Bülten aboneliği formunu yönetir.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

fastRegister

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

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

login

Giriş formunu yönetir.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

nomembership

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

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

socialLogin

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

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

logout

Çıkış işlevselliği sağlar.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

isRequired

Zorunlu alanları işaretler.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

imageMap

Resim haritası işlevselliği sağlar.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

lazyLoadedBg

Geç yüklenen arka plan resimlerini yönetir.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

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

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

addClass

Elemanlara sınıf ekleme işlevselliği sağlar.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

removeClass

Elemanlardan sınıf kaldırma işlevselliği sağlar.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

toggleClass

Elemanlarda sınıf değiştirme işlevselliği sağlar.

Yöntemler:

  • init(): Bileşeni başlatır.

Örnek:

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

init

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

Örnek:

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:

  • catalogApp.init(): Katalog uygulamasını başlatır.
  • appMobile(): Mobil uygulama işlevlerini başlatır (sadece 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 resimleri scroll olayında yükler.
  • refererStorage.addItem(): Yönlendirme bilgisini kaydeder.

Örnek:

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