Düzen ve CSS seçicileri

Düzen

Varsayılan bileşenin sekiz hazır tasarımı ve iki düzeni vardır. Kanalın tasarımı ve düzeni panelde Mağaza görünümü ekranında seçilir; yeni kanallarda tasarım Sıcak, düzen Kartlı’dır (bkz. Mağaza görünümü). Container’daki ya da script etiketindeki data-review-theme ve data-review-style attribute’ları bu seçimi geçersiz kılar; tanınmayan bir değer yok sayılır ve kanalın panelde seçilen tasarımı ya da düzeni kullanılır. Yorumların alt alta mı ızgara hâlinde mi dizileceği data-review-layout attribute’uyla seçilir:

Attribute	Sonuç
data-review-theme="warm"	Sıcak: krem özet paneli, sarı yıldızlar, renkli baş harfler
data-review-theme="trust"	Güven: yeşil puan kutusu ve vurgular; doğrulanmış alıcıyı öne çıkarır
data-review-theme="editorial"	Editoryal: siyah beyaz, büyük puan, tırnaklı başlıklar
data-review-theme="minimal"	Sade: beyaz ve açık gri, ince çerçeveli özet
data-review-theme="soft"	Pudra: pudra pembesi tonlar, pembe yıldızlar ve yuvarlak köşeler
data-review-theme="bold"	Sportif: siyah puan kutusu, turuncu yıldızlar, büyük harfli başlıklar ve keskin köşeler
data-review-theme="natural"	Doğal: toprak ve zeytin yeşili tonlar
data-review-theme="night"	Gece: koyu zemin, açık yazı; yorum bölümü kendi koyu zeminiyle gelir
data-review-style="cards"	Kartlı: özet ve puan çubukları üstte, her yorum ayrı bir kartta
data-review-style="sidebar"	Yan panelli: geniş alanda özet ve puan çubukları solda, yorumlar sağda; dar alanda alt alta ve çizgiyle ayrılmış liste
data-review-layout="list"	Yorumlar alt alta gösterilir (varsayılan)
data-review-layout="grid"	Yorumlar ızgara hâlinde gösterilir; sütun sayısı genişliğe göre değişir

Tasarımların renkleri ve köşe değerleri CSS değişkenleriyle değiştirilebilir: CSS değişkenleri › Hazır tasarımlar.

Yerleşim sayfanın değil bileşenin kendi genişliğine göre değişir (CSS container query; container adı sayproof-reviews). Böylece bileşen sayfanızdaki dar bir sütunda da doğru görünür:

• Yan panelli düzende özetin solda durması için bileşenin en az 880 px genişliğinde olması gerekir; daha dar alanda özet listenin üstünde gösterilir.
• Özet 640 px’ten itibaren iki sütuna ayrılır: solda ortalama puan, sağda puan çubukları. Yan panelli düzenin sol sütununda özet tek sütunda kalır.
• 480 px’in altında boşluklar ve görsel önizlemeleri küçülür.

Yorum yazma alanı varsayılan olarak container’ın içinde, özetin altında gösterilir; yan panelli düzende geniş alanda özetle birlikte sol sütunda yer alır. Alanı sayfanın başka bir yerinde (örneğin ürün başlığının altında) göstermek istiyorsanız o konuma boş bir öğe ekleyin ve seçicisini data-review-gate attribute’unda belirtin:

<div id="yorum-yaz"></div>

<div data-review-mount
     data-review-product="URUN-KODU"
     data-review-gate="#yorum-yaz"></div>

Seçiciyle eşleşen bir öğe bulunamazsa alan varsayılan konumunda gösterilir.

CSS seçicileri

Bileşendeki her öğe bir data-review-* attribute’u taşır. Bu attribute’lar bir sözleşmedir: aynı sürüm içinde değişmez ve kaldırılmaz. Bileşen sınıf adı kullanmaz; CSS kurallarınızı yalnızca bu attribute’lara göre yazın.

Bileşenin stil etiketi <head> öğesinin başına eklenir ve kuralları özgüllük (specificity) eklemeyen :where(...) kapsamında tanımlanır; tasarıma ve düzene bağlı kurallar (kartların kenarlığı, yan panelli yerleşim, ızgara sütunları, hazır tasarımların farkları) da bu kapsamdadır. Bu nedenle bileşenin bir öğeye yazdığı seçiciyle aynı özgüllükteki kuralınız, ek bir önek ya da !important gerektirmeden bileşenin kuralını geçersiz kılar; örneğin [data-review-item] kuralınız kartın görünümünü her tasarımda ve düzende değiştirir. Kuralınızın yalnızca bir tasarımda ya da düzende geçerli olmasını istiyorsanız kök öğenin attribute’unu seçicinin başına ekleyin: [data-review-root][data-review-theme="editorial"], [data-review-root][data-review-style="sidebar"].

Bunun tek istisnası Gece tasarımının kök öğeye verdiği zemin, iç boşluk ve köşe yuvarlaklığıdır: bu kural kök öğenin [data-review-root] seçicisiyle aynı özgüllüktedir. Kök öğeye yazdığınız [data-review-root] kuralı bileşenin stil etiketinden sonra geldiği için yine geçerli olur.

Server-side rendering kullanıyorsanız, sunucudan gelen HTML’de kök öğenin başındaki <link data-review-stylesheet> sayfanızdaki CSS’ten sonra geldiği için eşit özgüllükteki kurallarınız script bileşeni devralana kadar uygulanmaz. Bir kuralın bu ilk görüntülemede de geçerli olmasını istiyorsanız seçicinin başına [data-review-root] ekleyin. Kural kök öğenin kendisine yazılıyorsa (örneğin Gece tasarımının zeminini değiştirmek için) seçiciyi [data-review-root][data-review-theme="night"] olarak yazın.

Örnekler

Kartları çizgilerle ayrılmış bir listeye dönüştürmek:

[data-review-item] {
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 24px 0;
  background: transparent;
}

Ortalama puanı büyütmek ve puan dağılımını özetin en üstüne almak:

[data-review-average] {
  font-size: 3rem;
  font-weight: 700;
}

[data-review-distribution] {
  order: -1;
}

Puan çubuklarını inceltmek ve dolu kısmın rengini değiştirmek:

[data-review-bar] {
  height: 4px;
}

[data-review-bar]::before {
  background: #0b4f9c;
}

Izgara hâlinde gösterimde sütun sayısını sabitlemek:

[data-review-root][data-review-layout="grid"] [data-review-list] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  [data-review-root][data-review-layout="grid"] [data-review-list] {
    grid-template-columns: minmax(0, 1fr);
  }
}

Fotoğraf ve video önizlemelerini büyütmek:

[data-review-media-open] {
  width: 128px;
  height: 128px;
}

Yalnızca Editoryal tasarımda yorum başlıklarını büyütmek:

[data-review-root][data-review-theme="editorial"] [data-review-title] {
  font-size: 1.5em;
}

Gece tasarımında yorum bölümünün kendi koyu zeminini kaldırıp sayfanızın zeminini kullanmak:

[data-review-root][data-review-theme="night"] {
  padding: 0;
  background: transparent;
}

Yorumlar yüklenemediğinde container’ı gizlemek:

[data-review-mount][data-review-failed] {
  display: none;
}

Durumların biçimlendirilmesi

Attribute	Öğe	Anlamı
data-review-busy	Kök öğe	Bir istek sürüyor (filtre ya da sıralama değişikliği, arama, “Daha fazla yorum”)
data-review-ready	Container	Bileşen hazır
data-review-failed	Container	Yorumlar yüklenemedi
data-review-gate-state	Yorum yazma alanı; headless kullanımda container	pending, closed, open, refused ya da submitted
data-review-viewer-state	Yorum yazma alanı	Oturum açmış müşteri için can_write ya da written
data-review-open	Uzun yorum metni (data-review-body)	Ziyaretçi metni “Devamını oku” ile açmış
data-review-fill	Yıldızlar (data-review-stars), puan çubuğu, ölçek işaretçisi	Doluluk ya da konum: 0 ile 100 arasında, 5’in katları. Yıldızlarda dolu kısım yıldız renginde, kalanı --review-track renginde gösterilir.
data-review-avatar-tone	Baş harf dairesi (data-review-avatar)	0 ile 5 arasında; yazarın adından belirlenen renk
data-review-line-state	Sipariş detayındaki ürün satırı (data-review-order-line)	can_write, pending, published, rejected, removed, waiting ya da closed
aria-pressed="true"	Yıldız satırı (data-review-star-filter), filtre düğmeleri (data-review-filter), “Evet” ve “Hayır” düğmeleri	Filtre uygulanmış ya da ziyaretçi o yönde oy vermiş

Tüm attribute’lar ve anlamları için: DOM attribute’ları.

Gizlenemeyen öğeler

Sıralama menüsünü, kartları, boşlukları, puan dağılımını ve fotoğrafları dilediğiniz gibi biçimlendirebilirsiniz. Ancak bazı öğeler mevzuat ya da yöntem beyanı gereği görünür kalmalıdır. Bu öğeleri CSS ile gizlemek (display: none, arka planla aynı renk, ekran dışına taşıma vb.) kullanım koşullarına aykırıdır:

• doğrulama rozeti (data-review-verified),
• yöntem beyanı bağlantısı (data-review-method-statement),
• sıralama menüsü ve seçenekleri (data-review-sort, data-review-sort-option),
• başka bir kaynaktan aktarılan yorumların kaynak etiketi (data-review-origin),
• iptal ya da iade sonrasında yazılan yorumların süreç deneyimi etiketi (data-review-experience),
• satıcı yanıtı ve çözüm kaydı (data-review-seller-response, data-review-resolution).

Öğelerin listesi ve yasal dayanakları için: Zorunlu öğeler.

Sürümler

Kök öğe data-review-version attribute’unu taşır; güncel sürüm 3’tür. Yeni bir attribute eklenmesi küçük sürüm değişikliğidir ve mevcut CSS kurallarınızı etkilemez. Bir attribute’un kaldırılması ya da anlamının değiştirilmesi ana sürüm değişikliğidir; önceki sürüm en az bir yıl desteklenir ve değişiklik sürüm notlarında duyurulur.