# Örnekler

Çalışan script örnekleri
Kaynak: https://selwise.com/docs/custom-scripts/examples

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](/docs/custom-scripts/overview#çalışma-modeli) 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/`).

```js
(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:

```css
.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;
}
```

> **Bunun için önce zenginleştirmeye bakın**
>
> Ürün sayfasına içerik eklemenin doğru yolu genellikle [Ürün Zenginleştirme](/docs/product-enrichment/overview) modülüdür: kural bazlı atama, ürün verisi erişimi ve yükseklik rezervasyonu ile gelir. Script'i yalnızca zenginleştirmenin çözemediği durumlarda kullanın.

## Selwise'e özel olay gönderme

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

```js
(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ı](/docs/integration/events), `window.Selwise` metodları: [JavaScript API](/docs/integration/javascript-api).

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

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

```js
(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](/docs/integration/consent).

## Ç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:

```js
(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:

```js
(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](/docs/widgets/exit-intent-popup).

## 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:

```js
(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 |