Ana içeriğe geç

Giriş

🎯 Bu modül ne yapar?​

TemplatePreviews modülü, projeniz genelinde görüntü parametrelerini standart hale getirmenizi sağlar. "Görüntü" veya "Görüntü Grubu" niteliklerine önizleme şablonları uygulayarak, tasarım gereksinimlerinize uygun tutarlı boyutlandırma ve biçimlendirme sağlarsınız.

Önizleme şablonları, niteliklerde kullanılan görüntü parametrelerini yapılandırarak, önizleme şablonunda belirlenen spesifikasyonlara göre standartlaştırılmış görüntüler sunar. Bu, ürün görüntüleri, varyant görüntüleri ve nitelik tabanlı görüntüler arasında tutarlı bir görüntü gösterimi sağlar.

Bunu, nitelik görüntü yapılandırıcınız olarak düşünün - OneEntry yönetim panelinde (Ayarlar > Önizleme Şablonları) önizleme şablonları oluşturursunuz ve bu modül, ürün niteliklerinin görüntülerinin kataloğunuzda tutarlı bir şekilde görüntülenmesi için bu yapılandırmaları alır.

📖 Basit Açıklama​

Her e-ticaret uygulaması, nitelikler arasında tutarlı ürün görüntülerine ihtiyaç duyar:

  • 🎨 Renk Örnekleri - Önizleme görüntüleri ile ürün renk varyantları (Kırmızı, Mavi, Yeşil)
  • 📏 Beden Tablosu - Görsel kılavuzlarla beden nitelik görüntüleri (Küçük, Orta, Büyük)
  • 🖼️ Malzeme Önizlemeleri - Doku ile malzeme nitelik görüntüleri (Deri, Pamuk, İpek)
  • 💎 Yüzey Seçenekleri - Görsel örneklerle yüzey bitiş görüntüleri (Parlak, Mat, Saten)
  • 👗 Desen Önizlemeleri - Örneklerle desen nitelik görüntüleri (Çizgili, Düz, Çiçekli)
  • 🏷️ Nitelik Galerileri - Tüm ürün nitelikleri için tutarlı görüntü boyutlandırması

Tutarsız nitelik görüntüleri ile ilgili sorunlar

Sorunlar:

  • 🎨 Tutarsız görüntüleme - Farklı nitelik görüntüleri farklı boyutlara sahip
  • 📊 Bakımı zor - Değişiklik, birden fazla bileşeni düzenlemeyi gerektirir
  • 🔄 Yeniden kullanılabilirlik yok - Aynı boyutlandırma mantığı her yerde tekrarlanıyor
  • 🖼️ Kötü UX - Nitelik görüntüleri uyumsuz ve profesyonel görünmüyor

TemplatePreviews çözümü

Faydalar:

  • 🎨 Tutarlı görüntüleme - Tüm nitelik görüntüleri aynı şablonu kullanır
  • 📊 Kolay bakım - Yönetim panelinde şablonu değiştirin
  • 🔄 Yeniden kullanılabilir - Tüm nitelikler için aynı şablon
  • 🖼️ Profesyonel UX - Uyumlu, standart nitelik görüntüleri

✨ Temel Kavramlar​

Şablon Önizleme Nedir?​

Şablon Önizleme, ürün nitelikleri için bir görüntü yapılandırmasıdır:

  • Nitelik Görüntüleri - Ürün nitelikleri ile ilişkili görüntüler (renk, boyut, malzeme)
  • Önizleme Boyutu - Nitelik görüntü gösterimi için boyutlar
  • Kırpma Ayarları - Nitelik görüntülerinin nasıl kırpılacağı
  • İşaretçi - Şablon referansı için benzersiz tanımlayıcı
  • Tutarlılık - Aynı şablon, standart nitelik görüntü gösterimini garanti eder

Şablon Önizleme Yapısı​

Her şablon önizlemesi bu yapıya sahiptir:

{
  id: 3,                                      // Benzersiz tanımlayıcı
  title: 'Önizleme Şablonları',                // Şablon adı (benzersiz değil)
  identifier: 'preview-templates',            // Şablon işaretçisi (benzersiz)
  proportions: {                              // Görüntü parametre setleri
    default: {                                // Varsayılan şablon yapılandırması
      horizontal: {                           // Yatay görüntüler için
        width: 234,                           // Piksel cinsinden genişlik
        height: 324,                          // Piksel cinsinden yükseklik
        alignmentType: 'middleBottom'         // Merkezleme türü (sıkıştırma ekseni)
      },
      vertical: {                             // Dikey görüntüler için
        width: 2,
        height: 3,
        alignmentType: 'leftTop'
      },
      square: {                               // Kare görüntüler için
        side: 3,                              // Piksel cinsinden kenar uzunluğu
        alignmentType: 'leftTop'
      },
    },
  },
  version: 0,                                 // Sürüm numarası
  attributeValues: {},                        // Ek nitelik verileri
  position: 1,                                // Görüntüleme pozisyonu
  isUsed: false,                              // Kullanım durumu
  attributeSetIdentifier: null                // İlişkili nitelik seti
}

Ana Alanlar:

  • identifier - Şablon referansı için benzersiz işaretçi (bunu kullanın, ID değil)
  • title - Yönetim panelinde görüntülenen şablon adı
  • proportions - Farklı yönelimler için görüntü yapılandırması
  • alignmentType - Görüntülerin nasıl kırpılacağını/merkezleneceğini tanımlar

Şablon Önizleme İş Akışı​

1. Yönetim panelinde önizleme şablonu oluştur
   (Nitelik görüntüleri için boyut tanımla)
   ↓
2. Şablonu nitelik türüne ata
   (örneğin, "Renk" nitelik "color_swatch" kullanır)
   ↓
3. SDK aracılığıyla şablonları al
   (TemplatePreviews.getTemplatePreviews())
   ↓
4. Şablonu nitelik görüntülerine uygula
   (Görüntü URL'lerinde şablon işaretçisini kullan)
   ↓
5. Tutarlı nitelik görüntü gösterimi
   (Tüm renk örnekleri aynı boyutta)

Neden TemplatePreviews Modülünü Kullanmalısınız?​

FaydasıAçıklama
Tutarlı NiteliklerTüm nitelik görüntüleri aynı boyutta
Görüntü OptimizasyonuOtomatik boyutlandırma ve sıkıştırma
Kolay BakımŞablonu değiştir, tüm nitelikleri günceller
Daha İyi UXTutarlı, profesyonel nitelik gösterimi
CDN EntegrasyonuNitelik görüntülerinin optimize edilmiş teslimi
Yeniden Kullanılabilir YapılandırmalarTüm renk örnekleri için aynı şablon

📋 Bilmeniz Gerekenler​

Şablon Önizlemeleri Yönetim Panelinde Oluşturulur​

SDK aracılığıyla şablon önizlemeleri oluşturamazsınız - bunlar OneEntry yönetim panelinde oluşturulur:

OneEntry Yönetim Paneli → Ayarlar → Önizleme Şablonları → Şablon Oluştur → İsim/İşaretçi Belirle → Parametreleri Yapılandır → Kaydet

Oluşturma Süreci:

  • İsim (benzersiz olmayan tanımlayıcı) sağlayın
  • İşaretçi (benzersiz tanımlayıcı) sağlayın
  • Tamamlamak için "Oluştur" butonuna tıklayın

Yapılandırma:

  • Şablonu seçin ve yapılandırmak için dişli simgesine tıklayın
  • Üç görüntü yönelimi için önizleme parametre setleri ekleyin:
    • Dikey - Genişlik, Yükseklik, Merkezleme Türü
    • Yatay - Genişlik, Yükseklik, Merkezleme Türü
    • Kare - Kenar uzunluğu, Merkezleme Türü
  • Bir parametre setini varsayılan şablon olarak belirleyin

SDK, şablon önizleme yapılandırmalarını almak içindir, oluşturmak için değil.

Şablon Önizlemeleri ve Şablonlar​

TemplatePreviews, özellikle ürün nitelik görüntüleri için tasarlanmıştır:

ÖzellikTemplatePreviewsŞablonlar
AmaçNitelik görüntü önizlemeleriGenel içerik görüntüleri
Kullanım DurumuRenk örnekleri, malzeme önizlemeleriKahraman görüntüleri, ürün fotoğrafları
KapsamSadece ürün nitelikleriSayfalar, bloklar, ürünler
Örnek50×50 renk örneği1920×1080 kahraman banneri

En iyi uygulama: Nitelik görüntüleri için TemplatePreviews, genel içerik için Şablonlar kullanın.

Nitelik Görüntülerine Şablon Uygulama​

OneEntry, önizleme şablonlarına dayalı olarak nitelik görüntülerini otomatik olarak optimize eder.

Şablon Önizleme Ataması​

Önizleme şablonları genellikle belirli nitelik türlerine atanır.

Tutarlı Nitelik Gösterimi​

Tutarlı nitelik görüntü gösterimi sağlamak için şablon önizlemelerini kullanın.

Şablon Önizleme Yapısı:

interface ITemplatesPreviewEntity {
  id: number;
  title: string;
  proportions: {
    default: {
      horizontal: IProportion | null;
      vertical: IProportion | null;
      square: ISquare;
    };
  };
  identifier: string;
  version: number;
  attributeValues: AttributeType;
  position: number;
  isUsed: boolean;
  attributeSetIdentifier?: string | null;
}

💡 Önemli Notlar​

Şablon Önizlemeleri Yönetim Panelinde Oluşturulur​

Unutmayın: SDK, şablon önizleme yapılandırmalarını almak içindir, oluşturmak için değil.

Şablon önizlemeleri oluşturmak/düzenlemek için: OneEntry Yönetim Panelini kullanın.

Nitelik Görüntü Optimizasyonu​

OneEntry CDN, önizleme şablonu ayarlarına dayalı olarak nitelik görüntülerini otomatik olarak optimize eder:

  • Otomatik boyutlandırma
  • Format dönüşümü (JPEG, PNG, WebP)
  • Sıkıştırma
  • Kırpma
  • Önbellekleme

Sadece şablon işaretçisini referans alırsınız.

Şablon Önizleme Önbelleklemesi​

Şablon önizlemeleri nadiren değişir - önbellekleme uygulayın:

  • Frontend: localStorage, sessionStorage
  • Backend: Redis, bellek önbelleği
  • TTL: 1 saat önerilir

Tutarlı Nitelik Gösterimi​

Aynı nitelik türü için aynı önizleme şablonunu kullanın:

  • Tüm renk nitelikleri → color_swatch şablonu
  • Tüm malzeme nitelikleri → material_preview şablonu
  • Tüm desen nitelikleri → pattern_thumbnail şablonu

Tutarlılık, UX'i iyileştirir ve profesyonel görünür.

Önerilen Şablon Boyutları​

Yaygın nitelik görüntü boyutları:

  • Renk Örnekleri: 50×50 ile 100×100
  • Malzeme Önizlemeleri: 80×80 ile 150×150
  • Desen Küçültmeleri: 60×60 ile 120×120
  • Beden Tabloları: 100×80 ile 200×150
  • Yüzey Önizlemeleri: 75×75 ile 100×100

LQIP Teknolojisi​

Önizleme şablonları, optimal yükleme performansı için Düşük Kaliteli Görüntü Yer Tutucu (LQIP) teknolojisini kullanır:

Nasıl çalışır:

  • İki elemanlı dizi yapısı döner:
    1. Küçük Resim - Hızlı yükleme için optimize edilmiş WebP formatı (birkaç yüz bayt)
    2. Üretilen Önizleme - Yüklemeden sonra küçük resmi değiştiren tam çözünürlüklü görüntü

✅ Faydalar:

  • Küçük resim ile anında gösterim
  • Tam kaliteye pürüzsüz geçiş
  • Bant genişliği tüketiminin azaltılması
  • Daha iyi kullanıcı deneyimi

Şablonları Silme​

Bir şablonu kaldırmak için:

  1. Yönetim panelinde şablonu seçin
  2. Silme simgesine tıklayın
  3. Kaldırmayı onaylayın

Not: Sadece kullanılmayan şablonlar silinebilir.

📊 Hızlı Referans Tablosu​

YöntemAçıklamaKullanım Durumu
getTemplatePreviews()Tüm önizleme şablonlarını alTüm mevcut nitelik şablonlarını listele
getTemplatesPreviewByMarker()İşaretçiye göre önizleme şablonunu alBelirli şablon yapılandırmasını al

❓ Sıkça Sorulan Sorular (SSS)​

TemplatePreviews ile Şablonlar arasındaki fark nedir?​

TemplatePreviews, özellikle ürün nitelik görüntüleri (renk örnekleri, malzeme önizlemeleri) için tasarlanmıştır, oysa Şablonlar genel içerik görüntülerini (kahraman bannerları, ürün fotoğrafları) işler. Sadece niteliklere özgü görüntüler için TemplatePreviews kullanın.

Yatay, dikey ve kare görüntüler için farklı boyutları nasıl yapılandırırım?​

Yönetim panelinde, her önizleme şablonu için üç yönelimi de yapılandırın. Sistem, görüntü yönelimini otomatik olarak algılar ve uygun oranları (yatay, dikey veya kare) uygular.

LQTP nedir ve neden önemlidir?​

LQIP (Düşük Kaliteli Görüntü Yer Tutucu), önce küçük bir küçük resmi (birkaç yüz bayt) yükler, ardından tam kaliteli görüntü ile değiştirir. Bu, anında görsel geri bildirim sağlar ve özellikle yavaş bağlantılarda algılanan performansı artırır.

Farklı önizleme şablonlarını farklı nitelik türlerine atayabilir miyim?​

Evet! Farklı işaretçelere sahip birden fazla önizleme şablonu oluşturun (örneğin, color_swatch, material_preview, pattern_thumbnail) ve bunları tutarlı bir şekilde görüntülemek için uygun nitelik türlerine atayın.

Nitelik görüntülerine bir önizleme şablonunu nasıl uygularım?​

Önizleme şablonları, yönetim panelinde yapılandırıldığında otomatik olarak uygulanır. Şablonu getTemplatesPreviewByMarker() ile alın ve nitelik görüntülerini tutarlı boyutlandırma ile oluşturmak için oranları kullanın.

Nitelik görüntüleri için önerilen boyutlar nelerdir?​

Nitelik görüntülerini küçük tutun: Optimal performans için 50-150px. Yaygın boyutlar: Renk örnekleri (50×50 ile 100×100), Malzeme önizlemeleri (80×80 ile 150×150), Desen küçültmeleri (60×60 ile 120×120).

🎓 En İyi Uygulamalar​

  • ID'ler yerine işaretçileri kullanın - İşaretçiler, ortamlar arasında kararlıdır
  • Önizleme şablonlarını önbelleğe alın - Nadir değişen veriler için API çağrılarını azaltın
  • Tutarlı boyutlar oluşturun - Aynı nitelik türü = aynı şablon boyutu
  • WebP formatını kullanın - Nitelik görüntüleri için daha iyi sıkıştırma
  • Kalite ayarlarını tanımlayın - Kalite ile dosya boyutu arasında denge (80-90 önerilir)
  • Nitelikleri şablonlara eşleyin - NitelikType → şablon eşlemesi oluşturun
  • Anlamlı işaretçiler kullanın - color_swatch, preview_1 değil
  • Mobilde test edin - Nitelik görüntülerinin küçük ekranlarda iyi göründüğünden emin olun

OneEntry yönetim panelindeki önizleme şablonları hakkında daha fazla bilgi: https://doc.oneentry.cloudhttps://doc.oneentry.cloud/docs/templates/templates_preview/

TemplatePreviews modülünün tanımı​


const { TemplatePreviews } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

🔗 İlgili Belgeler​