JS Yardımcı Fonksiyonları

Bu sayfa, general.js dosyasında tanımlı olan ve tema genelinde global olarak erişilebilen yardımcı JavaScript fonksiyonlarını belgeler. API isteklerinden DOM manipülasyonuna, fiyat formatlamadan form doğrulamaya kadar tüm yardımcıları theme.js içinden doğrudan çağırabilirsiniz.

getLocale()

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

Parametre almaz.

Dönüş değeri: string — yerel ayar kodu (örneğin tr-TR, en-US).

const locale = getLocale(); // "tr-TR"

request()

Asenkron HTTP istekleri gönderir.

Dönüş değeri: Promise — yanıt verisi (JSON veya metin).

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

LocalApi.get()

localStorage üzerinden veri alır.

Dönüş değeri: any — alınan veri veya varsayılan değer.

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

LocalApi.set()

localStorage üzerine veri kaydeder.

Dönüş değeri: boolean — işlem başarılıysa true.

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

LocalApi.remove()

localStorage üzerinden veri siler.

Dönüş değeri: boolean — işlem başarılıysa true.

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

scrollBehavior()

Sayfayı belirtilen bir elemana kaydırır.

Dönüş değeri: Yok.

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

loader()

Sayfa yükleme göstergesini kontrol eder.

Dönüş değeri: Yok.

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

addClass()

Belirtilen elemanlara sınıf ekler.

Dönüş değeri: Yok.

addClass(document.querySelectorAll('.item'), 'active');

removeClass()

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

Dönüş değeri: Yok.

removeClass(document.querySelectorAll('.item'), 'active');

toggleClass()

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

Dönüş değeri: Yok.

toggleClass(document.querySelectorAll('.item'), 'active');

getUrlParam()

URL'den belirli bir parametreyi alır.

Dönüş değeri: string | null — parametre değeri veya null.

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

setUrlParam()

URL'ye bir parametre ekler veya günceller.

Dönüş değeri: URL — güncellenmiş URL nesnesi.

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

deleteUrlParam()

URL'den belirli bir parametreyi siler.

Dönüş değeri: URL — güncellenmiş URL nesnesi.

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

setCookie()

Çerez (cookie) oluşturur.

Dönüş değeri: Yok.

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

getCookie()

Belirtilen çerezin değerini alır.

Dönüş değeri: string — çerez değeri veya boş string.

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

browser()

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

Parametre almaz.

Dönüş değeri: string — tarayıcı adı (örneğin Google Chrome, Mozilla Firefox).

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

isMobile()

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

Dönüş değeri: boolean — mobil cihazsa true.

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

getLink()

URL'ye parametre ekler veya günceller ve sonucu string olarak döndürür.

Dönüş değeri: string — güncellenmiş URL.

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

evalScripts()

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

Dönüş değeri: Yok.

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

evalScriptsAdd()

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

Dönüş değeri: boolean — işlem başarılıysa true.

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

scriptAdd()

Sayfaya harici bir script dosyası ekler.

Dönüş değeri: Yok.

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

setLanguage()

Sayfa dilini değiştirir.

Dönüş değeri: Yok.

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

setCurrency()

Sayfa para birimini değiştirir.

Dönüş değeri: Yok.

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

copyText()

Metni panoya kopyalar ve bir bildirim gösterir.

Dönüş değeri: Yok.

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

awaitTimeOut()

Belirtilen süre kadar bekleyen bir Promise döndürür.

Dönüş değeri: Promise — bekleme tamamlandığında çözülür.

await awaitTimeOut(1000); // 1 saniye bekler

modal()

Bir modal pencere oluşturur ve gösterir.

Dönüş değeri: Yok.

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

modalClose()

Modal pencereyi kapatır.

Dönüş değeri: Yok.

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

drawer()

Bir yan menü (drawer) oluşturur ve gösterir.

Dönüş değeri: Yok.

drawer({
    id: 'cartDrawer',
    html: response,
    position: 'right',
    close: false,
    title: 'Sepetim'
});

drawerClose()

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

Parametre almaz.

Dönüş değeri: Yok.

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

notify()

Bir bildirim (toast) gösterir.

Dönüş değeri: Yok.

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

mask()

Giriş alanlarına maske uygular.

Dönüş değeri: Yok.

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

format()

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

Dönüş değeri: string — formatlanmış sayı (örneğin 1.234,56).

const formatted = format(1234.567); // "1.234,57" — varsayılan d değeri 2'dir

vat()

KDV dahil fiyatı hesaplar ve formatlar.

Dönüş değeri: string — KDV dahil formatlanmış fiyat.

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

priceToFloat()

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

Dönüş değeri: number | false — dönüştürülmüş sayı veya hata durumunda false.

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

triggerEvent()

Belirtilen elemanda bir olay tetikler.

Dönüş değeri: Yok.

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

outsideClick()

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

Dönüş değeri: Yok.

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

timeConverter()

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

Dönüş değeri: string — formatlanmış tarih.

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

taxLoader()

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

Dönüş değeri: Yok.

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

stringToObject()

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

Dönüş değeri: object — anahtar-değer nesnesi.

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

snippetUri()

Snippet URL'si oluşturur.

Dönüş değeri: string — oluşturulan URL.

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

loadSnippet()

Bir snippet'i sunucudan yükler.

Dönüş değeri: Yok.

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

getOffsetTop()

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

Dönüş değeri: number — elemanın üst mesafesi (px).

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

checkValidity()

Formun geçerliliğini kontrol eder.

Dönüş değeri: boolean — form geçerliyse true.

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

popoverAlert()

Form alanında hata mesajı gösterir.

Dönüş değeri: Yok.

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

popoverAlertHide()

Gösterilen hata mesajlarını gizler.

Dönüş değeri: Yok.

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

passwordToggle()

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

Dönüş değeri: Yok.

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

captchaToggle()

CAPTCHA resmini yeniler.

Dönüş değeri: Yok.

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

messageCount()

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

Parametre almaz.

Dönüş değeri: Yok.

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

formLoader()

Form alanlarını veriyle doldurur.

Dönüş değeri: Yok.

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

tsRegion()

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

Dönüş değeri: Yok.

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

Sonraki adımlar