# Rozetler

İndirim, yeni ve stok etiketleri
Kaynak: https://selwise.com/docs/product-cards/badges

Rozet, kartın üzerinde görünen küçük etikettir: "İndirim", "Yeni", "Tükendi". Tasarımcıda rozet, kendi koşulu olan bir öğedir; bu sayfa rozetin ne gösterebileceğini, ne zaman görüneceğini ve nerede duracağını anlatır.

## Panelde nerede

**Product Cards** → kart → **Designer** (Tasarımcı) → katman ağacında **Add element** → **Badge** (Rozet). Rozeti genellikle **Image area** (Görsel alanı) içine koyarsınız; böylece görselin üstüne biner.

## Rozet ne gösterir

Rozetin **Badge content** (Rozet içeriği) alanı üç kaynaktan birini seçer:

| Kaynak | Ne gösterir | Örnek |
|---|---|---|
| **Fixed text** (Sabit metin) | Yazdığınız metin; en fazla 40 karakter | `Yeni`, `Çok satan` |
| **Discount %** (İndirim yüzdesi) | Liste fiyatı ile satış fiyatından hesaplanan indirim; liste fiyatı yoksa beslemedeki indirim oranı | `-25%` |
| **Product field** (Ürün alanı) | Seçtiğiniz bir ürün alanının değeri | Marka, `attr.kampanya` |

İçerik boş çıkarsa (indirim sıfırsa ya da alan boşsa) rozet hiç çizilmez; boş kutu bırakmaz. İndirim yüzdesi her zaman `-` işaretiyle ve tam sayıya yuvarlanmış yazılır: `-25%`.

Bunun çalışması için beslemenizde **hem satış hem liste fiyatı** ya da bir indirim oranı olmalıdır. Yalnızca tek fiyat gönderiyorsanız indirim hesaplanamaz ve rozet görünmez. Bkz. [Alan Eşleştirme](/docs/product-feeds/field-mapping).

## Rozet ne zaman görünür: koşullar

Yeni bir **Discount %** rozeti hazır bir koşulla gelir: `isOnSale` **is true**. Koşulu olmayan bir indirim rozeti her tam fiyatlı üründe `-0%` yazardı; bu yüzden başlangıç değeri doğru kurulur. **Visibility** bölümünde koşulu değiştirebilir, ekleyebilir ya da silebilirsiniz (en fazla 8 koşul, hepsi sağlanmalı).

Rozetlerde işinize yarayan türetilmiş işaretler:

| İşaret | Ne zaman doğru |
|---|---|
| `isOnSale` | Liste fiyatı satış fiyatından büyük. Beslemenin kendi "indirimde" işaretine bakılmaz; çünkü her ürünü indirimli işaretleyen beslemeler yaygındır |
| `hasDiscount` | İndirimde ya da beslemedeki indirim oranı sıfırdan büyük |
| `isOutOfStock` | Ürün stokta yok |
| `hasRating`, `hasSecondImage`, `hasSwatches` | Puan, ikinci görsel, renk kardeşi var |

Ayrıca doğrudan ürün alanlarına koşul kurabilirsiniz:

- **Yeni ürün**: `isNew` **is true**. Besleme böyle bir alan taşımıyorsa bu rozet hiç görünmez.
- **Çok satan**: `isBestseller` **is true**.
- **Tükendi**: `isOutOfStock` **is true**.
- **Düşük stok**: `stock` **less than** `4`, ayrı bir **Text** öğesinde (ön ek `Son `, son ek ` adet`, alan `stock`). Sayı kutusunu boş bırakırsanız karşılaştırma 0'a göre yapılır ve panel uyarır.

Beslemeniz `isNew` ya da `isBestseller` taşımıyorsa bunun yerine bir [Yeni Gelenler](/docs/recommendations/new-arrivals) stratejili widget kurup başlığında belirtebilirsiniz; rozet yerine bölüm başlığı kullanmak olur.

> **Stok sayısı ile sepet sayacını karıştırmayın**
>
> Kartta "Son 3 adet" gibi bir etiket gösteriyorsanız bu, beslemenizdeki gerçek `stock` alanından gelmelidir. [Sepet Sayacı](/docs/widgets/cart-count) widget'ının `Tükeniyor! Sadece {count} adet kaldı` şablonu **stok değil, sepet sayısı** basar; ikisini aynı sayfada kullanmak çelişkili rakamlar gösterir.

## Konum

Rozetin görselin neresinde duracağını **Style → Position** (Konum) ayarları belirler: `insetTop`, `insetRight`, `insetBottom`, `insetLeft` ve katman sırası `zIndex`. Köşe için iki değer yeterlidir: sol üst için `insetTop` ve `insetLeft` değerlerini `8px` yapın. Konum ayarları yalnızca **Image area** içindeki öğelerde sunulur; rozeti başka bir kapsayıcıya koyarsanız normal akışta durur.

Aynı köşede birden fazla rozet gerekiyorsa aralarına boşluk koymak için onları bir **Group** içine alıp o Group'u konumlayın.

## Renk

Yeni rozetin başlangıç rengi sabittir (kırmızı zemin, beyaz yazı). Markanızın indirim rengini kullanmak için **Colour** grubunda `background` alanına `var(--selwise-sale, #e11d48)`, `color` alanına `var(--selwise-sale-text, #ffffff)` yazın; marka rengi seçici de aynı biçimi üretir. İndirim rengi bilinçli olarak ayrı bir değişkendir: marka renginden türetilen bir indirim rengi, özellikle siyah markalarda, bulanık çıkar. Değişkenler için: [Marka Teması](/docs/brand/theme).

## Kaç rozet

Bir kartta ikiden fazla rozet göstermeyin. Üç etiketli bir kart, hiçbirinin fark edilmediği bir karttır.

## Eski kartlar

Tasarımcıdan önce yapılmış bir kartta **show badges** ayarı üç sabit rozeti ürünün kendi işaretlerinden (indirim, yeni, çok satan) çizerdi. Böyle bir kartı **Convert current card** ile dönüştürürseniz bu üç rozet, koşullu üç rozet öğesine çevrilir ve görünüm değişmez; sonra her birini ayrı ayrı düzenlersiniz. Bkz. [Kart Tasarımcısı](/docs/product-cards/designer).