# İçerik Blokları

Yeniden kullanılabilir HTML blokları
Kaynak: https://selwise.com/docs/product-enrichment/content-blocks

İçerik bloğu, ürün sayfasına yerleştirilen yeniden kullanılabilir bir HTML ve CSS parçasıdır. Bir kez yazar, kurallarla istediğiniz ürünlere atarsınız.

## Panelde nerede

**Kişiselleştirme → Ürün Zenginleştirme** (Personalization → Product Enrichment) sayfasında **Content** sekmesi → **Content Blocks** (İçerik Blokları), adres `/dashboard/product-enrichment/blocks`. Yeni blok için **New block** (Yeni blok), var olan blok için adına ya da kalem simgesine tıklayın.

## Bloklar listesi

Sütunlar: **Block** (Blok, adı ve ayrılan yükseklik), **Status** (Durum), **Used by** (Kullanan: kaç kural bu bloğu yerleştiriyor, ya da **Not used yet**), **Updated** (Güncellenme). Arama blok adına göre yapılır; **All**, **In use** (Kullanımda) ve **Unused** (Kullanılmıyor) süzgeçleri kullanılmayan blokları bulmanızı sağlar.

Satır menüsü:

- **Duplicate block** (Bloğu kopyala): "(copy)" eklenmiş bir ad ve **Draft** durumuyla kopya oluşturur. Tasarımcıyla kurulmuş bloğun CSS'i yeniden üretilir; kopya özgün blokla aynı görünür.
- **Delete block** (Bloğu sil): bir kural hâlâ bloğu yerleştiriyorsa silinmez ve hangi kurallarda kullanıldığı söylenir. Önce o kuralları silin ya da başka bloğa geçirin.

Hesabınızın blok sayısı sınırı varsa üstte sayaç görünür; sınırda **New block** pasifleşir.

## Blok formu

| Alan | Açıklama |
|---|---|
| **Block name** (Blok adı) | Yalnızca sizin gördüğünüz ad; kural listelerinde bu adla görünür. En fazla 150 karakter |
| **Status** (Durum) | **Draft** taslak: hiçbir yerde gösterilmez. **Active**: yayında. **Archived**: arşiv, gösterilmez. Mağazaya yalnızca Active bloklar sunulur |
| **Product tokens** (Ürün alanları) | Kullanabileceğiniz yer tutucuların listesi. Bkz. [Yer Tutucular](/docs/product-enrichment/placeholders) |
| **Design** / **Code** sekmeleri | Bloğu öğe öğe tasarlarsınız ya da HTML ve CSS yazarsınız. Bkz. [Blok Tasarımcısı](/docs/product-enrichment/block-designer) |
| **HTML content** (HTML içeriği) | Sayfaya girecek içerik. En fazla 100.000 karakter |
| **CSS (optional)** | Yalnızca bu bloğa uygulanan stil. En fazla 50.000 karakter |
| **Reserved height (px)** (Rezerve yükseklik) | Blok gelene kadar ayrılacak alan; 0 ile 4000 arasında tam sayı. Boş bırakırsanız hiçbir alan ayrılmaz |
| **Live preview** (Canlı önizleme) | Formun altında, yazarken güncellenir. Bkz. [Önizleme ve Test Modu](/docs/product-enrichment/testing) |

HTML ya da CSS sınırı aşılırsa kayıt reddedilir ve alanın altında sınır yazılır. Ürün sayfasında kurulan tasarımcı bloklarının sınırları ayrıdır (bkz. Blok Tasarımcısı).

## Ayrılan yükseklik neden var

Blok, sayfa yüklendikten sonra yerleştirilir. Yükseklik ayrılmazsa blok geldiği anda altındaki içerik aşağı kayar; bu sıçrama hem rahatsız edicidir hem de Google'ın sayfa deneyimi ölçümlerine olumsuz yansır. Yaklaşık bir değer yeterlidir. Önizlemenin altındaki not ölçülen yüksekliği sizin değerinizle karşılaştırır. **Replace element** (Öğeyi değiştir) konumunda hiçbir alan ayrılmaz, çünkü değiştirilen öğe zaten o yeri tutuyor.

## Güvenlik temizliği: ne kalır, ne silinir

Blok içeriği mağazaya girmeden önce aynı izin listesinden geçer; önizleme de aynı hattı kullanır.

| Kalır | Silinir |
|---|---|
| Başlıklar, paragraf, liste, tablo, `details` ve `summary`, `a`, `img`, `picture`, `video`, `audio`, `figure`, `blockquote`, `code` ve benzeri metin etiketleri | `script`, `iframe`, `object`, `embed`, `style`, `link`, `meta`, `base` |
| `id`, `class`, `href`, `src`, `alt`, `width`, `height`, `data-` öznitelikleri, `aria-` etiketleri | `style` özniteliği ve `onclick`, `onerror`, `onload` gibi olay öznitelikleri |
| `http`, `https`, `mailto`, `tel` ve site içi göreli adresler | Form öğeleri (`form`, `input`, `button`, `select`, `textarea`), `svg`, `javascript:` adresleri |

Düğme görünümü için `button` yerine bağlantı (`a`) kullanın. Açılır SSS için `details` ve `summary` kullanın; JavaScript gerekmez. Görsel düzenleme için `style` özniteliği yerine CSS alanını kullanın: oradaki kurallar otomatik olarak yalnızca sizin bloğunuza uygulanacak şekilde sınırlanır, sayfanın kalanını bozamaz.

## Marka temasını kullanın

Renkleri sabit yazmak yerine marka değişkenlerini okuyun; marka değişince blok da değişir. Hepsinin ikinci değeri yedek değerdir (değişken tanımlı değilse o kullanılır).

```html
<div class="garanti-kutusu">
  <h4>Garanti Bilgisi</h4>
  <p>Bu üründe ${attr.garanti_suresi} garanti sunulmaktadır.</p>
</div>
```

```css
.garanti-kutusu {
  background: var(--selwise-surface-alt, #f6f6f6);
  border-radius: var(--selwise-radius, 8px);
  color: var(--selwise-text, #111);
  font-family: var(--selwise-font, inherit);
  padding: 16px;
}
```

Kullanılabilir değişkenler: [Marka Teması](/docs/brand/theme).

## Yapay zekâ, şablon ve kayıtlı bloklar

- **Code** sekmesinde HTML editörünün üstünde **Generate with AI** (Yapay Zeka ile Üret; kodda içerik varsa **Edit with AI**, Yapay Zekâ ile Düzenle) bulunur. Model bloğu ürün yer tutucularıyla yazar ve CSS'i ayrı alana koyar; JavaScript hiç üretmez. Ayrıntı: [Yapay Zekâ ile Üretim](/docs/ai-studio/overview).
- **Templates** (Şablonlar) düğmesi Kütüphane'den hazır şablon uygular. Şablon uygulamak bloğu kod destekli yapar (tasarımcı ağacı devre dışı kalır). Bkz. [Kütüphane](/docs/library/overview).
- Tasarımcıda kurduğunuz blokları **Saved blocks** (Kayıtlı bloklar) olarak saklayıp başka bloklara kopyalayabilirsiniz. Bkz. [Blok Tasarımcısı](/docs/product-enrichment/block-designer).

## Atama

Blok tek başına hiçbir yerde görünmez; hangi ürünlerde görüneceğini kurallar belirler. Bir blok birden fazla kurala atanabilir, bir kural da en fazla 10 bloğu yığabilir. Bkz. [Kural Oluşturma](/docs/product-enrichment/rules).