# Ürün Kartlarına Genel Bakış

Kart sistemi nasıl çalışır
Kaynak: https://selwise.com/docs/product-cards/overview

Ürün kartı, önerilerde ve arama sonuçlarında bir ürünün nasıl görüneceğini tanımlar. Kartı tek yerde tasarlar, her yerde kullanırsınız.

## Panelde nerede

Sol menüde **Tasarım → Ürün Kartları** (Design → Product Cards), adres `/dashboard/definitions`. Bu ekran bir modül satın almayı gerektirmez, her hesapta vardır; kanala bağlıdır (kanal seçili değilse **No Site Selected** uyarısı çıkar).

## Kart nerede kullanılır

| Yüzey | Kart seçimi |
|---|---|
| Öneri widget'ları | **Recommendations** formunun görüntü bölümündeki **Product Card Template** (Ürün Kartı Şablonu) alanı |
| Arama sonuçları | **Search** yapılandırmasında sonuç ayarlarındaki **Product Card Template** alanı; seçilirse alttaki varsayılan yerleşim ayarlarını geçersiz kılar |

Kart seçmezseniz kanalın **varsayılan kartı** kullanılır: kart formundaki **Set as default product card for this site** (Bu site için varsayılan ürün kartı olarak ayarla) kutusunu işaretlediğiniz kart. Bir kanalda tek varsayılan olur; yenisini işaretlemek öncekinin işaretini kaldırır. Hiçbir kart varsayılan değilse widget kendi yerleşik kartını çizer. Kart listesinde varsayılan kartın adının yanında yıldız görünür.

## Kart listesi

Kartlar ızgarada, **kartın kendisi** çizilerek gösterilir: her hücrede kart, kataloğunuzdaki ilk ürünle ve marka temanızla mağazadaki motorla çizilir. Altında ad, varsayılan kartsa **Default card** (Varsayılan kart) rozeti, kartın nasıl çizildiği (**Designer** / **Own code**), açıksa varyant seçici türü ve kartın kaç öneri şeridinde ve aramada kullanıldığı yazar. Menüde **Edit** (Düzenle), **Make default** (Varsayılan yap), **Duplicate** (Kopyala, kopya hiçbir zaman varsayılan olmaz) ve **Delete** (Sil) bulunur. Aramayı ad ya da açıklamayla yaparsınız; süzgeç kartları çizim biçimine göre ve **Unused** (Kullanılmayan) olarak ayırır.

**Create Product Card** ile yeni kart açılır. Yeni kart boş bir tuval değil, **Standard** hazır tasarımıyla açılır: hemen düzenleyebileceğiniz gerçek bir kart görürsünüz.

> **Kullanılan kart silinemez**
>
> Bir arama yapılandırması ya da öneri şeridi kartı kullanıyorsa silme reddedilir ve kaç yerde kullanıldığı yazılır (API 409). Önce o yerlerde başka bir kart seçin. Kart adı kanal içinde benzersiz olmalıdır; aynı adla ikinci kart 409 verir. Hesabınızın paketinde kart sayısı sınırı varsa sınırda yeni kart ve kopya oluşturulamaz.

## Kartı kim düzenleyebilir

Kartları **Admin** rolü görür, oluşturur, düzenler ve siler; ayrıca özel HTML, CSS ve JavaScript alanlarını (**My own code** ve tasarımcının **Custom CSS** kutusu) yalnızca kod düzenleme yetkisi olan kullanıcı düzenler. **Marketing** rolü kartları görebilir ama oluşturamaz, düzenleyemez, silemez; kaydetmeye çalışırsa 403 alır. JavaScript yazmak ayrıca satın alınan **Custom Card Code** modülüne bağlıdır; hesapta yoksa API 402 döner ve mesaj sizi hesap yöneticinize yönlendirir. HTML ve CSS için modül gerekmez.

## Üç düzeyde çalışırsınız

| Düzey | Ne yaparsınız | Sayfa |
|---|---|---|
| **Designer** (Tasarımcı) | Kartı öğe öğe tasarlarsınız: görsel, metin, fiyat, rozet, düğme, renk örnekleri; koşullar ve animasyonlarla | [Kart Tasarımcısı](/docs/product-cards/designer) |
| **My own code** (Kendi kodum) | Tasarımcının veremediği bir düzen için kartın HTML, CSS ve JavaScript'ini kendiniz yazarsınız | [Özel Kart Oluşturma](/docs/product-cards/creating) |
| Yapay zekâ | Kartı bir cümleyle tasarlatır ya da düzenletirsiniz | [Yapay Zekâ ile Kart Tasarımı](/docs/product-cards/ai-design) |

Editör başlığındaki **Drawn by** (Kartı çizen) anahtarı hem açık olan editörü hem yayınlananı belirler: **Designer** (Tasarımcı) ya da **My own code** (Kendi kodum). Özel CSS her iki durumda da uygulanır; özel HTML ve JavaScript yalnızca **My own code** seçiliyken çizilir ve çalışır. Aynı satırdaki **Option chooser** (Seçenek seçici) seçenekli ürünlerde beden seçicinin nasıl çizileceğini belirler; bkz. [Sepete Ekleme](/docs/recommendations/add-to-cart).

## Kaydetme ve kullanıldığı yerler

**Save Changes** (Değişiklikleri Kaydet) ya da ⌘S / Ctrl+S kartı kaydeder ve sizi editörde bırakır; düğmenin yanındaki durum **Unsaved changes** (Kaydedilmemiş değişiklikler) ya da **Saved** (Kaydedildi) der, kaydetmeden sekmeyi kapatırsanız tarayıcı sorar. Kartın adının altında kartı kullanan öneri şeritleri ve arama listelenir: bir kart paylaşılır, kaydettiğiniz değişiklik hepsine aynı anda yansır. Kart seçmeyen şeritler varsayılan kartı kullanır.

## Marka teması

Kart renkleri, köşeleri ve yazı tipi varsayılan olarak marka temanızdan gelir. Kart seviyesinde ayrı ayar yapmadığınız sürece marka renginizi değiştirdiğinizde tüm kartlar birlikte değişir. Bkz. [Marka Teması](/docs/brand/theme).

## Canlı önizleme

**My own code** seçiliyken sağdaki **Live Preview** kartı mağazadaki çizim hattıyla çizer: **Single** (tek kart) ve **Grid** (dörtlü sıra), masaüstü ve mobil genişlik, açık ve koyu mağaza zemini arasında geçiş yapabilirsiniz. **Store products** (Mağaza ürünleri) kartı kendi kataloğunuzdaki ürünlerle, seçenekleriyle birlikte çizer; **Sample** (Örnek) sabit örnek ürünlere geçer. **Edge cases** (Zor durumlar) uzun başlıklı (mağaza ürünlerinde kataloğunuzun en uzun başlığı), görselsiz, indirimsiz ve stokta olmayan ürünleri koyar. Varyant seçici önizlemede de mağazadaki gibi çizilir; seçenekli bir ürün yoksa bunu söyleyen bir not çıkar. Tasarımcıda ayrı önizleme yoktur: tuval aynı hattı kullanır ve üstündeki oklarla aynı ürünler arasında gezersiniz. Kendi JavaScript'iniz önizlemede çalışmaz.

## Neden boş, neden gri

| Gördüğünüz | Sebep |
|---|---|
| **No Site Selected** | Kartlar kanala aittir; üst çubuktan kanal seçin |
| **No Product Cards Yet** | Henüz kart yok; **Create Product Card** ile başlayın |
| Kaydet 403 veriyor | Rolünüz kart düzenleyemiyor (Marketing); Admin gerekir |
| **My own code** seçilemiyor ya da editörde yalnızca **Slot bindings** var | Rolünüzün kod düzenleme yetkisi yok (başlık **Code & Bindings** olur) |
| **Option chooser** açık ama kartta seçici yok | Üründe iki ya da daha fazla seçenek yok; seçeneksiz üründe mağazada da çizilmez. Önizlemede **Sample** (Örnek) seçenekli örnek ürünleri koyar |
| JavaScript kaydı 402 | Hesapta Custom Card Code modülü yok |
| Kartta tasarım yerine eski görünüm çıkıyor | **My own code** seçili ve HTML dolu; tasarım yayınlanmaz |

## Eski kartlar

Tasarımcıdan önce oluşturulmuş bir kart alan listesinden çizilmeye devam eder; bir tüccar bilerek dönüştürmeden mağazadaki görünümü hiç değişmez. Böyle bir kartı açınca Design sekmesi **Convert current card** (Mevcut kartı dönüştür) seçeneğini sunar: bugünkü alan listesini düzenlenebilir öğelere çevirir ve mağazada şu an görünenin aynısını üretir. Dönüştürüp kaydedene kadar hiçbir şey değişmez. Bkz. [Hazır Tasarımlar](/docs/product-cards/templates).