Sayproof bileşeninin kullandığı ve CSS kurallarınızın ya da script'lerinizin dayanabileceği tüm data-review-* attribute'ları.
Bu attribute’lar bir sözleşmedir (sürüm 3): aynı sürüm içinde kaldırılmaz ve anlamları değişmez; yeni attribute’lar eklenebilir. CSS kurallarınızı ve script’lerinizi bu attribute’lara göre yazın. Kullanım örnekleri için: Düzen ve CSS seçicileri.
Bu attribute’lar container’a (data-review-mount) eklenir. Container’da bulunmayan bir değer için script etiketindeki değer kullanılır. Bu attribute’lardan biri değiştiğinde bileşen kendini yeniler.
Attribute
Değer
data-review-mount
Öğenin bir yorum container’ı olduğunu belirtir. Bir sayfada birden fazla container bulunabilir.
data-review-site-key
Site anahtarı. Yalnızca script etiketinden ya da Sayproof.mount() seçeneklerinden okunur; container’daki değer yok sayılır. Böylece sayfaya sonradan eklenen bir içerik yorumları başka bir kanala yönlendiremez.
data-review-base
Sayproof API adresi. Yalnızca script etiketinden ya da Sayproof.mount() seçeneklerinden okunur; container’daki değer yok sayılır. Böylece sayfaya sonradan eklenen bir içerik müşterinin formda yazdıklarını başka bir sunucuya gönderemez.
data-review-product
Ürün kodu: varyant ya da grup kodu
data-review-scope
variant (varsayılan) ya da group
data-review-product-name
Ürün adı. Okunur ancak şu anda gösterimde kullanılmaz; ileride kullanılmak üzere ayrılmıştır.
data-review-locale
tr ya da en. Container’da ve script etiketinde belirtilmezse <html lang> değeri, o da yoksa kanalın dili kullanılır.
data-review-layout
list (varsayılan) ya da grid
data-review-style
cards ya da sidebar: düzen. Belirtilmezse kanalın panelde seçilen düzeni kullanılır.
data-review-theme
warm, trust, editorial, minimal, soft, bold, natural ya da night: hazır tasarım. Belirtilmezse ya da tanınmayan bir değer verilirse kanalın panelde seçilen tasarımı kullanılır.
data-review-mode
headless: script özet, liste ve sıralama oluşturmaz; yalnızca yorum yazma akışını yürütür
data-review-gate
Yorum yazma alanının gösterileceği öğenin CSS seçicisi. Eşleşen öğe yoksa alan container’ın içinde gösterilir.
data-review-viewer
pending: oturum açmış müşterinin durumu bekleniyor; yanıt gelene kadar yorum yazma alanı gösterilmez
Ortalama puan bloğu ve içindeki yıldız, yorum sayısı ve doğrulanmış yorum sayısı grubu
data-review-average
Ortalama puan
data-review-stars
Her zaman beş yıldız karakteri (★★★★★). Dolu kısım data-review-fill değerine göre yıldız renginde, kalanı --review-track renginde gösterilir; özette ortalamaya göre dolar. Metin karşılığı aria-label içindedir.
data-review-count
Yorum sayısı
data-review-verified-count
Doğrulanmış yorum sayısı; değeri sayının kendisidir, yalnızca sıfırdan büyükse gösterilir
data-review-shared-count
Diğer pazarlardan gelip listede gösterilen yorum sayısı (“Diğer pazarlardan 3 yorum”); değeri sayının kendisidir. Yalnızca diğer pazarlardan yorum gösteriliyorsa eklenir; bu yorumlar ortalamaya katılmaz. Gizlenemez.
data-review-imported-count
Pazaryerinden aktarılan yorumların payı (“4 yorumun 3’ü Trendyol’dan”); değeri aktarılan yorum sayısıdır. Yalnızca aktarılmış yorum varsa eklenir; bu yorumlar ortalamaya katılır. Gizlenemez.
data-review-distribution
Puan dağılımı listesi (<ol>, 5 yıldızdan 1 yıldıza)
data-review-star, data-review-star-count
Dağılımdaki bir yıldız düzeyinin satırı ve o düzeydeki yorum sayısı
data-review-star-filter
Satırdaki düğme; değeri yıldız düzeyidir. Tıklandığında liste o puandaki yorumlarla sınırlanır, yeniden tıklandığında filtre kalkar. Seçiliyken aria-pressed="true"; o düzeyde yorum yoksa disabled.
Yıldızların ve çubuğun doluluğu ya da ölçek işaretçisinin konumu: 0 ile 100 arasında, 5’in katları. Yıldızlarda puanın 5’e oranı, 5’in en yakın katına yuvarlanır (4,3 → 85). Yorumu olan bir yıldız düzeyinin çubuğu en az 5’tir.
data-review-aspects-group, data-review-aspects
Basamaklı ölçekli değerlendirme başlıklarının özeti (role="group" içinde <dl>); en az bir puan verilmiş başlık varsa gösterilir
data-review-aspect
Özetteki bir başlık: <div data-review-aspect="<anahtar>"><dt>başlık</dt><dd>ölçek · uçların adları · en yakın basamak ve puan sayısı</dd></div>
data-review-scale, data-review-scale-marker
Basamaklı ölçeğin çizgisi ve üzerindeki işaretçi; işaretçinin konumu data-review-fill değerindedir
data-review-scale-ends
Ölçeğin iki ucundaki basamakların adları
data-review-aspect-value
Başlığın metin değeri: özette en yakın basamak ve puan sayısı, yorumda seçilen basamak
Yorum özeti kartı (v2 ile gelecek; şu an çizilmez), marka yorum özetini açtığında ve ürünün en az 10 yorumu olduğunda data-review-main’in ilk öğesi olarak, fotoğraf şeridinden önce gösterilir. Filtrelerden etkilenmez. Sunucuda hazırlanan HTML ve script aynı yapıyı üretir:
<sectiondata-review-ai-summary>
<h3data-review-ai-summary-title>Müşteriler ne diyor</h3>
<pdata-review-ai-summary-text>Alıcıların çoğu kalıbın iyi oturduğunu söylüyor. 2 yorumda kargonun geç geldiği belirtiliyor.</p>
<uldata-review-ai-topicsaria-label="Öne çıkan konular">
<lidata-review-ai-topic="fit"data-review-ai-sentiment="positive">Kalıp · 7<spandata-review-sr> · çoğunlukla olumlu</span></li>
<lidata-review-ai-topic="delivery"data-review-ai-sentiment="negative">Kargo ve teslimat · 2<spandata-review-sr> · çoğunlukla olumsuz</span></li>
</ul>
<pdata-review-ai-summary-note>Yapay zekâ ile 10 yorumdan özetlendi · 12 Ekim 2026 · <adata-review-ai-summary-linkhref="…"target="_blank"rel="noopener">Nasıl hazırlanıyor?</a></p>
</section>
Attribute
Anlamı
data-review-ai-summary
Yapay zekâ ile hazırlanmış yorum özetinin kartı (<section>) (v2 ile gelecek; şu an çizilmez). Gizlenemez.
data-review-ai-summary-title
“Müşteriler ne diyor” başlığı
data-review-ai-summary-text
Özet metni
data-review-ai-topics
Öne çıkan konuların listesi; konusu belirlenmiş yorum yoksa eklenmez
data-review-ai-topic, data-review-ai-sentiment
Bir konu ve yorumların çoğunluğundaki duygu. Konu fit (Kalıp), quality (Kalite), delivery (Kargo ve teslimat) ya da packaging (Paketleme); duygu positive, negative ya da neutral. En çok geçen en fazla 4 konu gösterilir; metni konu adı ve konunun geçtiği yorum sayısıdır. Duygu ekran okuyucular için data-review-sr içinde yazılır: “çoğunlukla olumlu”, “çoğunlukla olumsuz” ya da “görüşler karışık”.
data-review-ai-summary-note
Alt satır: özetin kaç yorumdan ve hangi gün hazırlandığı
data-review-ai-summary-link
Yöntem beyanına giden “Nasıl hazırlanıyor?” bağlantısı; yeni sekmede açılır
Ürünün yorumlarındaki en yeni fotoğraf ve videoların şeridi (en fazla 12); en az bir dosya varsa gösterilir. Filtrelerden etkilenmez.
data-review-gallery-title
Şeridin başlığı (“Fotoğraf ve videolar”)
data-review-gallery-list
Yatay kaydırılan liste
data-review-gallery-item
Bir dosyanın düğmesi; data-review-media-kind (image ya da video) ve data-review-media-index (şeritteki sırası, 0’dan başlar) taşır ve fotoğraf görüntüleyiciyi açar
Filtreler birlikte uygulanır: biri değiştiğinde diğerleri korunur ve liste ilk sayfadan yeniden yüklenir; özet, fotoğraf şeridi ve filtre düğmeleri yerinde kalır. Filtre düğmeleri ve araç çubuğu yalnızca üründe en az bir yorum varsa gösterilir.
Attribute
Anlamı
data-review-filters
Filtre düğmelerinin grubu (role="group"); gösterilecek filtre yoksa eklenmez
data-review-filter
Bir filtre düğmesi. verified: yalnızca doğrulanmış alıcıların yorumları; doğrulanmış yorum sayısı sıfırdan büyük ve toplamdan küçükse gösterilir. media: fotoğraflı ya da videolu yorumlar; böyle bir yorum varsa gösterilir. topic: sık geçen bir kelimeyi içeren yorumlar. Seçiliyken aria-pressed="true"; yeniden basıldığında filtre kalkar.
data-review-topics, data-review-topics-label
Konu düğmelerinin grubu ve “Sık geçenler” etiketi
data-review-topic
Konu düğmesinin kelimesi (data-review-filter="topic" öğesinde)
Başka bir kaynaktan gelen yorumun etiketi; tür syndicated (markanın başka bir pazarından, etiket “EU pazarından” gibi kaynak pazarı yazar) ya da imported (pazaryerinden aktarılmış; etiket “Trendyol’da satın alındı · Trendyol’dan otomatik aktarıldı” gibi kaynağı yazar). Aktarılmış yorumda kaynak yorumun adresi varsa etiket <a> olur (href, target="_blank", rel="noopener"), yoksa <span> kalır; bu yorumlarda data-review-verified bulunmaz. Gizlenemez.
data-review-experience
Değeri process: siparişi iptal edilen ya da ürünü iade eden müşterinin o aşamaya kadarki deneyimini anlatan yorumun etiketi. Gizlenemez.
data-review-stars
Yorumun puanı: beş yıldız, dolu kısım data-review-fill değerindedir
data-review-title, data-review-body
Başlık ve yorum metni
data-review-long, data-review-open
data-review-body üzerinde: 420 karakterden ya da 4 satırdan uzun metin 4 satırda kesilir; ziyaretçi metni açtığında data-review-open eklenir
data-review-translated
Çevrilmiş yorumda metnin altındaki satır (v2 ile gelecek; şu an çizilmez): “Çevrildi” ve data-review-show-original düğmesi. Yorum ziyaretçinin dilinde değilse ve o dile çevirisi varsa başlık ve metin çeviriyle gösterilir. Gizlenemez.
data-review-show-original
“Aslını göster” / “Çeviriyi göster” düğmesi (aria-pressed) (v2 ile gelecek; şu an çizilmez); aslı gösterilirken başlık ve metin yorumun dilini lang niteliğinde taşır
data-review-expand
“Devamını oku” / “Daha az göster” düğmesi (aria-expanded). Yalnızca metin gerçekten 4 satırı aşıyorsa görünür; bileşenin genişliği değiştiğinde yeniden ölçülür.
data-review-item-aspects
Yorumda verilen basamaklı ölçekli başlık puanları (<dl>); her satır data-review-aspect taşır, <dd> ölçeği ve seçilen basamağın adını (data-review-aspect-value) içerir
Fotoğraf ve video önizlemeleri; tür image ya da video
data-review-media-open, data-review-media-index
Önizleme düğmesi ve dosyanın yorumdaki sırası (0’dan başlar); fotoğraf görüntüleyiciyi açar
data-review-seller-response
Satıcı yanıtı; yorumla aynı akışta. Gizlenemez.
data-review-resolution
Çözüm kaydı; yorumla aynı akışta. Gizlenemez.
data-review-reply-label
Satıcı yanıtı ya da çözüm kaydı etiketi
data-review-actions
Oy grubunun ve “Bildir” düğmesinin bulunduğu satır
data-review-vote, data-review-vote-label
Oy grubu (role="group") ve “Faydalı mı?” etiketi
data-review-helpful, data-review-helpful-count
“Evet” düğmesi ve oy sayısı. Düğme bir başparmak simgesi (satır içi <svg>) ve sayıyı içerir; tam metin (“Evet (n)”) aria-label içindedir. Seçiliyken aria-pressed="true".
“Hayır” düğmesi ve oy sayısı; simge ters çevrilmiş olarak gösterilir, tam metin (“Hayır (m)”) aria-label içindedir. Seçiliyken aria-pressed="true". Seçili düğmeye yeniden basıldığında oy geri alınır, diğerine basıldığında oy o yöne taşınır.
data-review-vote-count
Oy düğmesinin içinde yalnızca sayıyı gösteren öğe
data-review-actions-message
Satırın durum mesajı (örneğin oyun kaydedilemediği)
Marka soru-cevabı açtığında kök öğenin son çocuğu olarak eklenir (data-review-frame’in ardından). Script bu bölümü ayrı bir parça olarak, yalnızca soru-cevap açıkken yükler; sunucuda hazırlanan HTML aynı yapıyı taşır.
Cevabın üst satırı ve yazanın adı (markanın cevabında kanalın marka adı)
data-review-answer-badge
Markanın cevabındaki “Marka” etiketi. Müşteri cevabında yerine data-review-verified (“Doğrulanmış alıcı”) bulunur. Gizlenemez.
data-review-answer-body
Cevap metni
data-review-answer-open, data-review-answer-form
“Cevapla” düğmesi (aria-expanded) ve cevap formu; yalnızca ziyaretçinin satın alma doğrulaması varken (davet bağlantısı, sipariş doğrulaması ya da oturum açmış müşteri) eklenir
data-review-questions-empty
Soru yokken gösterilen mesaj
data-review-questions-more
Sonraki soru sayfasını yükleyen düğme
data-review-ask, data-review-question-form
“Soru sor” düğmesi (aria-expanded) ve soru formu
data-review-question-asker
Oturum açmış müşteride ad ve e-posta alanlarının yerine gösterilen satır: “Ayşe K. olarak soruyorsunuz. Cevap gelince e-postanıza haber veririz.”; ad gönderilmediyse “Hesabınızla soruyorsunuz. Cevap gelince e-postanıza haber veririz.”
data-review-question-notify
Oturum açmamış ziyaretçinin formunda “Cevap gelince e-postayla haber ver” onay kutusunu taşıyan <label>; kutu işaretlenince e-posta alanı görünür ve zorunlu olur
data-review-question-notice
Formdaki bilgi metni
data-review-privacy
Soru ve cevap formunda bilgi metninin altındaki paragraf; içindeki bağlantı (“Kişisel verilerin işlenmesi hakkında aydınlatma metni”) kanalda girilen aydınlatma metnini yeni sekmede açar (target="_blank", rel="noopener"). Kanalda aydınlatma metni bağlantısı yoksa eklenmez.
data-review-questions-message
Bölümün durum mesajı (role="status"): gönderildi, eksik alan ya da hata
Yorum yazma alanının kök öğesi; kök öğeyle aynı data-review-theme değerini taşır
data-review-gate-state
pending (sunucuda hazırlanan HTML ya da oturum açmış müşterinin durumu bekleniyor), closed, open (form açık), refused (uygun sipariş yok) ya da submitted (yorum gönderildi)
data-review-gate-info
Oturum açmamış ziyaretçinin gördüğü bilgi metni
data-review-gate-verify
Sipariş doğrulamasını açan düğme. pending durumunda script devralana kadar disabled olarak gösterilir.
data-review-gate-form
Sipariş numarası ve e-posta formu
data-review-gate-message
Tek ve genel hata mesajı
data-review-gate-write
Oturum açmış müşteriye gösterilen “Yorum yaz” düğmesi; yalnızca sunucu uygunluğu doğruladığında
data-review-viewer-state
can_write ya da written
data-review-own-standing
Müşterinin kendi yorumunun durumu: published, pending, rejected ya da removed
Form bir dialog içinde açılır ve body öğesine eklenir. Bileşen sayfada açık bir modal <dialog> öğesinin içindeyse form o dialog’un içine eklenir; böylece üstteki katmanın altında kalmaz. Dialog içinde Tab tuşu her yıldız satırında ve her basamak grubunda bir kez durur; grup içinde ok tuşlarıyla seçim yapılır.
Attribute
Anlamı
data-review-form-overlay, data-review-form-dialog
Arka plan katmanı ve dialog (role="dialog"; odak dialog içinde tutulur, Esc tuşu kapatır)
Formun ürün bölümlerinin altındaki ad bölümü: isteğe bağlı ad alanı (<label> içinde input[type=text]) ve adın gizlenmesi için data-review-hide-name onay kutusu. Düzeltme formunda alanlar yorumdaki mevcut adla ve seçimle dolu gelir. Sipariş detayındaki değerlendirmede bölüm bir kez, ürün formlarının altında yer alır ve her ürünün gönderiminde kullanılır
data-review-hide-name
“Adım sitede gizli kalsın” onay kutusunu taşıyan <label>; yorum formunda, soru formunda ve cevap formunda bulunur. İşaretliyse ad sitede her sözcüğün ilk harfi ve *** olarak görünür
data-review-form-prompts
Ürünün değerlendirme başlıkları varsa metin alanının altındaki tarafsız sorular (“Yazarken şunlara değinebilirsiniz: Kalıp nasıldı? …”); alan aria-describedby ile bu satıra bağlanır. Hazır cümle ya da öneri içermez.
Değerlendirme başlıkları; ürün için başlık tanımlıysa gösterilir. Hem ürünle hem teslimat ve hizmetle ilgili başlık varsa ilki “Ayrıntılı puanlama”, ikincisi “Teslimat ve hizmet” altında sorulur ve data-review-form-aspects-title iki kez yer alır
Fotoğraf ve video ekleme: bölüm, ekleme düğmesi, liste, tek dosya, yükleme durumu (pending, ready, refused, düzeltmede önceki dosyalar için kept) ve mesaj
data-review-form-media-remove
Düzeltme formunda önceki bir fotoğrafı ya da videoyu yorumdan kaldıran düğme (data-review-form-media-state="kept" öğesinde)
Bir dosya hazırlanırken ve yüklenirken (pending durumunda): ilerleme metni (“Hazırlanıyor %42”, ardından “Yükleniyor %17”) ve bu dosyayı iptal eden düğme; ikisi de iş bitince öğeden kalkar
data-review-form-notice, data-review-form-hint
Yayın bilgilendirmesi ve yardımcı metin
data-review-privacy
Yayın bilgilendirmesinin altındaki aydınlatma metni bağlantısı (<p> içinde <a>, yeni sekmede açılır); yalnızca kanalda aydınlatma metni bağlantısı girilmişse
Bir önizlemeye ya da fotoğraf şeridindeki bir dosyaya tıklandığında dosya bir dialog içinde büyütülür. Görüntüleyici ilk açılışta ayrı bir parça olarak yüklenir ve yorum formuyla aynı dialog yapısını kullanır (data-review-form-overlay, data-review-form-dialog, data-review-form-head, data-review-form-title, data-review-form-close). Başlık “Fotoğraf ve videolar”dır; açıklama satırı (data-review-form-lede) gösterilen dosyanın sırasını verir (“2 / 5”). Şeritten açıldığında şeritteki tüm dosyalar, yorumdan açıldığında o yorumun dosyaları gezilir. Birden fazla dosya varsa sol ve sağ ok tuşları önceki ve sonraki dosyaya geçer; odak bir videodayken ok tuşları videoya bırakılır. Esc tuşu dialog’u kapatır ve odak dialog’u açan düğmeye döner.
Attribute
Anlamı
data-review-lightbox
Görüntüleyici dialog’u; data-review-form-dialog öğesinde bulunur
data-review-lightbox-stage
Dosyanın ve önceki/sonraki düğmelerinin bulunduğu alan
data-review-lightbox-figure
Büyütülmüş dosya (<figure>): fotoğraf ya da oynatıcı denetimleri açık video
Oturum açmış müşterinin sipariş detayı sayfasında siparişin her ürünü için sayfanın içinde bir puan ve yorum formu gösterilir (dialog açılmaz). Kurulum için: Oturum açmış müşteri › Sipariş detayı sayfası.
Attribute
Anlamı
data-review-order
Sayfanıza eklediğiniz öğe; değeri sipariş numarasıdır. Script bu öğenin içeriğini oluşturduğu bölümle değiştirir. Site anahtarı, API adresi ve tasarım (data-review-theme) container’da olduğu gibi öğenin kendi attribute’larından, yoksa script etiketinden okunur; metinlerin dili sipariş yanıtının dilidir.
data-review-order-state
Öğenin içindeki <script type="application/json"> etiketi; Sayproof’un sipariş yanıtını taşır
data-review-order-root
Bölümün kök öğesi; data-review-theme taşır
data-review-order-title
Bölümün başlığı (“Ürünleri değerlendirin”)
data-review-order-lines, data-review-order-line
Ürün listesi ve bir ürünün satırı; satırın değeri sipariş satırının kimliğidir (line_reference)
data-review-line-state
Satırın durumu: can_write, pending, published, rejected, removed, waiting ya da closed. Yorum gönderildikten sonra pending olur.
data-review-order-form
Yorum yazılabilen satırdaki form. Ürün bölümü yorum formuyla aynı alanları taşır (data-review-form-product, data-review-form-name, data-review-form-rating, data-review-form-body, data-review-form-media, data-review-form-aspects).
data-review-order-foot
Formun alt satırı: mesaj (data-review-form-message) ve satıra ait Gönder düğmesi (data-review-form-submit)
data-review-order-status
Yorum yazılamayan satırda ya da gönderimden sonra gösterilen durum metni (role="status")
data-review-form-notice
Yayın bilgilendirmesi; en az bir satıra yorum yazılabiliyorsa listenin altında gösterilir
data-review-privacy
Yayın bilgilendirmesinin altındaki aydınlatma metni bağlantısı; kanalda aydınlatma metni bağlantısı girilmişse ve en az bir satıra yorum yazılabiliyorsa gösterilir
Script stillerini üç <style> etiketiyle yükler: #sayproof-style (varsayılan bileşen), #sayproof-style-form (yorum formu, sipariş doğrulaması ve sipariş detayındaki değerlendirme; ilk açılışta yüklenir) ve #sayproof-style-lightbox (fotoğraf görüntüleyici; ilk açılışta yüklenir). #sayproof-style, ilk yorum listesi isteğiyle paralel yüklenen ayrı bir parçadan gelir; headless kullanımda eklenmez. Script etiketindeki nonce değeri üç etikete de eklenir. CSS değişkenleri için: CSS değişkenleri.
data-review-order-state etiketinin içeriği, sunucunuzun GET /v1/viewer/order isteğine aldığı yanıtın kendisidir; etiketin içine yazarken <, > ve & karakterlerini escape edin. Script öğeyi bulur, içeriğini değerlendirme bölümüyle değiştirir; site anahtarı ve API adresi script etiketinden alınır.