Örnekler

Sık kullanılan script örnekleri. Hepsi kendi sitenize uyarlanmalıdır — seçiciler sizin temanıza göre değişir. Her örnek, çalışma modeline uygun olarak bir (function () { … })(); içindedir (üst düzey return kullanılamaz) ve DOM'u beklemek için MutationObserver kullanır.

Ürün sayfasına bilgi kutusu

Hedefleme: prefix tipiyle ürün sayfası yolu (örneğin /urun/).

(function () {
  if (window.__kargoKutusu) return;
  window.__kargoKutusu = true;

  function ekle() {
    var hedef = document.querySelector('.product-price');
    if (!hedef || document.querySelector('.sw-kargo-kutusu')) return !!hedef;
    var kutu = document.createElement('div');
    kutu.className = 'sw-kargo-kutusu';
    kutu.textContent = '500 TL üzeri kargo bedava';
    hedef.insertAdjacentElement('afterend', kutu);
    return true;
  }

  try {
    if (ekle()) return;
    // Tema geç çizilebilir: eleman gelene kadar izle, sonra bırak.
    var gozlemci = new MutationObserver(function () {
      if (ekle()) gozlemci.disconnect();
    });
    gozlemci.observe(document.body, { childList: true, subtree: true });
    setTimeout(function () { gozlemci.disconnect(); }, 10000);
  } catch (e) {
    console.warn('[kargo kutusu]', e);
  }
})();

CSS alanına:

.sw-kargo-kutusu {
  background: var(--selwise-surface-alt, #f6f6f6);
  border-radius: var(--selwise-radius-sm, 4px);
  color: var(--selwise-text, #111);
  font-size: 13px;
  margin-top: 8px;
  padding: 8px 12px;
}

Selwise'e özel olay gönderme

Sitenizde Selwise'in otomatik yakalamadığı bir etkileşim varsa:

(function () {
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.beden-tablosu-ac');
    if (!btn || !window.Selwise) return;
    window.Selwise.track('size_guide_open', {
      entityType: 'product',
      entityId: btn.dataset.sku,
      metadata: { source: 'script' },
    });
  });
})();

track, ikinci parametre olarak entityType, entityId ve metadata alanlarını okur; başka anahtarlar yok sayılır. Olay adları: Olay Referansı, window.Selwise metodları: JavaScript API.

Kendi çerez banner'ınızın kararını iletmek

Kendi banner'ınızı kullanıyorsanız karar anında Selwise'e iletin:

(function () {
  document.addEventListener('benim-consent-karari', function (e) {
    if (!window.Selwise) return;
    if (e.detail.analytics || e.detail.marketing) {
      window.Selwise.grantConsent({
        analytics: !!e.detail.analytics,
        marketing: !!e.detail.marketing,
      });
    } else {
      window.Selwise.revokeConsent();
    }
  });
})();

setConsent diye bir metot yoktur; onay metotları grantConsent, revokeConsent, showConsentPreferences ve withdrawConsent'tir. Ayrıntı: Onay Yönetimi.

Çerez yazmadan önce izni kontrol etmek

Selwise scripti onay beklemeden çalıştırır; izne bağlı bir şey saklıyorsanız kontrol sizin işinizdir:

(function () {
  var onay = window.Selwise && window.Selwise.getConsentState();
  // null: ziyaretçi henüz cevap vermedi
  if (!onay || !onay.marketing) return;
  localStorage.setItem('benim-pazarlama-isaretim', '1');
})();

Modal'ı kendi butonunuzdan açmak

Modal kampanyasının tetikleyicisini Custom Event yaptıysanız (varsayılan olay adı selwise:open-modal), olayı document üzerinden gönderin — modal olayı document'ta dinler:

(function () {
  document.addEventListener('click', function (e) {
    if (!e.target.closest('.kampanya-ac')) return;
    document.dispatchEvent(new CustomEvent('selwise:open-modal'));
  });
})();

Panelde olay adını değiştirdiyseniz burada da o adı kullanın. Ayrıntı: Modal.

Tek sayfa uygulamasında rota değişimini izlemek

Selwise scripti yol değişince yeniden çalıştırmaz. Rotayı kendiniz izleyin ve işi her seferinde idempotent uygulayın:

(function () {
  if (window.__rotaIzleyici) return;
  window.__rotaIzleyici = true;

  function uygula() {
    if (!location.pathname.startsWith('/urun/')) return;
    // idempotent iş: eklemeden önce var mı diye bak
  }

  ['pushState', 'replaceState'].forEach(function (ad) {
    var asil = history[ad];
    history[ad] = function () {
      var sonuc = asil.apply(this, arguments);
      setTimeout(uygula, 0);
      return sonuc;
    };
  });
  window.addEventListener('popstate', uygula);
  uygula();
})();

Yol kuralını prefix tipiyle / yapın: kural yalnızca ilk yüklenen yola bakar, kodun içindeki startsWith ise her geçişte güncel yolu denetler. Böylece ziyaretçi sitenize ana sayfadan girip ürün sayfasına tıkladığında da çalışır.

Yapmayın

Yapmayın	Neden
Dış script yüklemek	Sayfa hızını ve güvenliği etkiler; sitenizin kendi altyapısına ekleyin. Yapay zekâ yazımında da bu bir uyarı sebebidir
Çerez ya da form alanı okumak, üçüncü tarafa veri göndermek	Kod ödeme sayfasındaki her şeyi görebilir; onay ve KVKK sorumluluğu sizdedir
document.write, alert, confirm, prompt	Sayfayı bozar ya da bloklar
Sonsuz döngü, ağır senkron işlem	Sayfayı kilitler
Üst düzey return	Söz dizimi hatasıdır; script hiç çalışmaz
Sayfa içeriğini büyük ölçüde değiştirmek	Bakımı zorlaşır, tema güncellemesinde kırılır