# Görüntüleme Tipleri

Slider, grid ve carousel
Kaynak: https://selwise.com/docs/recommendations/display-types

Görüntüleme tipi, ürünlerin sayfada nasıl dizileceğini belirler. Bu sayfa oluşturucunun **Design** adımındaki **Display** (Görünüm) ve **Styling** (Stil) sekmelerini ve **Code** (Kod) sekmesini anlatır.

## Panelde nerede

**Kişiselleştirme → Öneriler** (Personalization → Recommendations) → şeridi açın → **Design** adımı → **Display** sekmesi. Renk ve ölçüler **Styling**, şeride özel CSS ve JavaScript **Code** sekmesindedir. Değişiklikler sağdaki **Live Preview**'da hemen görünür; üstündeki cihaz düğmeleri mobil, tablet ve masaüstü görünümünü gösterir.

> **Uygulama kanalında**
>
> Bu ayarlar web sitesi içindir. Uygulama kanalında şeridi uygulamanızın kendi bileşenleri çizer; özel CSS, özel JavaScript ve özel sepet betiği orada çalışmaz. Bkz. [Mobil Öneriler](/docs/mobile/recommendations).

## Görüntüleme tipleri

**Display Type** (Görüntüleme Türü) için bir tip seçersiniz. Her tipin altında ne çizdiği yazar.

| Tip | Görünüm | Ne zaman |
|---|---|---|
| **Slider** | Ürünler tek sırada; ziyaretçi oklarla ya da kaydırarak gezer. | Varsayılan. Dar alanda çok ürün. |
| **Grid** (Izgara) | Tüm ürünler bir kerede, satır başına seçtiğiniz kadar. | Ürünlerin tamamı aynı anda görünsün istendiğinde. |
| **List** (Liste) | Her satırda bir ürün, görsel yanında metin. | Dar kolonlarda, yan panelde. |
| **Tabs by role** (Rol sekmeli) | Her ürün türü bir sekme ("Çorap", "Şort"); sekmede o türün ürünleri. | Yalnızca **Complementary Products** stratejisinde. |
| **Complete the look** (Kombin) | Tek bir kombin: her parçadan bir ürün, toplam fiyat ve "Hepsini ekle" ile. | Yalnızca **Complementary Products** stratejisinde. |

Rol sekmeli ve Kombin tipleri başka bir stratejiyle seçilirse ızgara olarak çizilir ve ekran bunu yazar; bu iki tip, strateji **Complementary Products** değilse listede hiç sunulmaz (kayıtlı bir şeritte seçiliyse görünür kalır).

İki eski tip artık yeni şeritte sunulmaz: **Carousel** Slider'ın eski adıdır, **Masonry** ise sıralamayı sütunlara bölerek sıranın okunmasını bozar. Bu tiplerle kaydedilmiş bir şerit olduğu gibi çizilmeye devam eder; yeni şeritte Slider ya da Grid seçin.

## Ürün kartı

**Product Card Template** (Ürün Kartı Şablonu) şeridin kartlarının tasarımını seçer. **Use Default** kanalın varsayılan kartını kullanır (kanalda varsayılan işaretli kart yoksa kanalın ilk kartı). Kart tasarımı: [Ürün Kartları](/docs/product-cards/overview).

## Başlık ve alt başlık

| Alan | Varsayılan | Not |
|---|---|---|
| **Title** + **Show** | Açık; metin panel dilinde "Recommended For You" / "Sizin İçin Önerilenler" | En çok 200 karakter. **Show** kapalıysa başlık çizilmez. |
| **Subtitle** + **Show** | Kapalı | En çok 500 karakter. |

Varsayılan metin panelin o anki diliyle yazılır ve şeride kaydedilir; ziyaretçinin diliyle ilgisi yoktur. Mağazanız Türkçeyse İngilizce panelde oluşturduğunuz şeridin başlığını Türkçeleştirmeyi unutmayın.

## Yerleşim

**Layout** bölümünün kutuları tipe göre değişir:

| Ayar | Varsayılan | Sınır | Nerede |
|---|---|---|---|
| **Slides per View (Desktop)** | 4 | 1–10 | Liste hariç tüm tipler |
| **Slides per View (Tablet)** | 3 | 1–10 | Liste hariç tüm tipler |
| **Slides per View (Mobile)** | 2 | 1–10 | Liste hariç tüm tipler |
| **Slide Gap (px)** | 16 | 0–100 | Tüm tipler |

Slider'da bu sayı aynı anda görünen kartı, ızgarada satır başına kartı belirler. Liste her satırda tek ürün gösterdiği için yalnızca satırlar arası boşluk vardır.

Cihaz ayrımı **tarayıcı penceresine değil, şeridin kendi genişliğine** bakar: şerit 640 pikselden darsa mobil, 640 ile 1023 arasındaysa tablet, 1024 ve üstündeyse masaüstü sayısı uygulanır. Dar bir yan kolondaki şerit, geniş bir ekranda bile mobil sayısını kullanır. Mobil ve tablet sayısını boş bırakmayın: dört sütunlu bir ızgara telefonda okunmaz.

## Slider ayarları

Yalnızca **Slider** (ve eski Carousel) seçiliyken görünür:

| Ayar | Varsayılan | Açıklama |
|---|---|---|
| **Autoplay** | Kapalı | Otomatik kaydırma |
| **Speed** | 3000 ms | Geçiş aralığı; 1000–20000 ms |
| **Infinite Loop** | Açık | Sona gelince başa döner |
| **Pause on Hover** | Açık | Fare üzerindeyken durur |

> **Otomatik kaydırma dikkat dağıtır**
>
> Autoplay, ziyaretçi ürünü incelerken listeyi kaydırır ve tıklamayı zorlaştırır. Açacaksanız **Pause on Hover** açık kalsın. Çoğu mağaza için kapalı bırakmak daha iyi sonuç verir.

## Stil sekmesi

**Styling** sekmesi beş bölümden oluşur. Üstteki arama kutusu (**Search style settings**) ayar bulmanızı, **Changed only** yalnızca varsayılandan değiştirdiklerinizi görmenizi sağlar. Bir bölümde değişiklik yaptıysanız başlığının yanında çıkan geri alma simgesi (**Reset this section to defaults**) bölümü varsayılana döndürür. Renk alanlarının varsayılanları marka temanızdan gelir (`var(--selwise-...)`): rengi elle değiştirmediğiniz sürece marka rengini değiştirmek şeridi de değiştirir. Bkz. [Marka ve Tema](/docs/brand/theme).

| Bölüm | Kutular |
|---|---|
| **Navigation arrows** (Gezinme okları) — yalnızca Slider | **Enabled**, **Style** (daire / kare / minimal), **Size** (20–120), renk, zemin, kenarlık rengi ve kalınlığı (0–10), kenar yuvarlaklığı (0–200), ikon boyutu (8–64), üzerine gelince renk ve zemin, **Position** (içeride / dışarıda / altta), **Offset** (−200 ile 200) |
| **Pagination dots** (Sayfa noktaları) — yalnızca Slider | **Enabled**, **Style** (daire / çubuk / çizgi), **Size** (2–40), renk, **Active Color**, **Gap** (0–64), **Offset** |
| **Title Styles** | **Font Size** (8–96, varsayılan 24), **Font Weight** (varsayılan kalın), renk, **Text Align** (sol / orta / sağ), alt boşluk (0–200) |
| **Subtitle** | Aynı kutular; varsayılan 14 piksel, normal kalınlık |
| **Container Styles** | **Background** (varsayılan saydam), **Padding** (`40px 20px`), **Border Radius** (0–120), **Max Width** (`1200px`), **Margin** (`0 auto`) |

Başlığın ve alt başlığın görünüp görünmediği Display sekmesindeki **Show** kutularından seçilir; Styling'de ikinci bir anahtar yoktur. Oklar ve noktalar yalnızca Slider'da çizildiği için başka tiplerde bu iki bölüm hiç görünmez.

## Code sekmesi

- **Custom CSS** şeride özel stil yazmanızı sağlar. Şeridin kökü `recommendation-widget`, başlığı `recommendation-title`, alt başlığı `recommendation-subtitle` sınıfını taşır; kök öğenin `id`'si `rec-widget-` ile başlar ve şeridin kimliğiyle biter.
- **Custom JavaScript** şerit çizildikten sonra çalışır ve `widgetElement`, `products` ve `widgetConfig` değişkenlerini alır. Hata verirse şerit yine de görünür, hata yalnızca test modunda konsola yazılır.

Bu kod, sayfanızda sizin yetkinizle çalışır; yalnızca kendi yazdığınızı ya da güvendiğiniz kodu koyun.

## Rol sekmeli ve Kombin

**Complementary Products** stratejisinde iki ek tip vardır ve **Complete the look** seçildiğinde Display sekmesinde **Look settings** (Kombin ayarları) bölümü açılır. Kombin her vücut bölümünden **tek** ürün alır: bir alt giyim, bir ayakkabı, bir çanta. Ekrandaki ürünün kendi bölümü gelmez (tişört sayfasında üst giyim çıkmaz); elbise üst ve alt giyimin yerini tutar.

| Ayar | Varsayılan | Açıklama |
|---|---|---|
| **What goes under each card?** | **Part of the outfit** (Bölüm adı) | Kartların altındaki yazı: bölüm adı ("Alt giyim"), ürün türü ("Jean") ya da hiçbir şey. |
| **Parts a look may include** | Hepsi açık | Kapattığınız bölümden (ör. çorap, iç giyim) ürün önerilmez. 15 bölüm: tek parça, üst, ara katman, dış giyim, alt, ayakkabı, çorap, iç giyim, şapka, çanta, kemer, atkı, takı, gözlük, eldiven. |
| **Show the look total** | Açık | Toplam yalnızca her ürünün fiyatı varsa ve hepsi aynı para birimindeyse çizilir. |
| **Add all to basket** button | Açık | Ürünleri sırayla sepete ekler ve kaçının eklendiğini söyler. Yalnızca Akinon, IdeaSoft ve Shopify'da, ve sepete ekleme açıkken gösterilir. |
| **Total wording**, **Button wording** | Boş | Boşsa ziyaretçinin dilindeki varsayılan yazılır; en çok 60 karakter. |

Rol sekmeli tipte her rol bir sekme olur. İkisinin de çalışması için **Katalog → Ürün Rolleri** (Catalog → Product Roles) ekranında rol çiftlerini onaylamış olmanız gerekir: [Tamamlayıcı Ürünler](/docs/recommendations/complementary).

## Şerit çizilmezse

Strateji hiç ürün döndürmediğinde (yedek de yoksa) sayfada boş bir kutu ya da başlık çıkmaz; şerit hiç çizilmez. Bu bir hata değil, "gösterecek bir şey yok" cevabıdır. Nedeni için formdaki gerçek önizlemeye ve [Öneriler Görünmüyor](/docs/troubleshooting/recommendations-not-showing) sayfasına bakın.