Kütüphane Yüzeyleri

Editörler birbirine benzer ama aynı değildir: her yüzey kodu kendi temizleyicisinden geçirir ve yer tutucuları kendi kuralına göre doldurur ya da doldurmaz. Kütüphane şablonları bu yüzden bir yüzeyle birlikte saklanır. Bu sayfa her yüzeyin kurallarını bir arada gösterir; şablon yazarken ya da başka bir yüzeyden gelen şablonu uygularken buna bakın.

Panelde nerede

• Design → Library → New template: ilk adım yüzey seçimidir (Which surface is this template for?).
• Düzenleme ekranında Surface (Yüzey) alanı ve altında Dynamic fields kutusu seçili yüzeyin kurallarını gösterir.
• Şablon seçicide (Templates) bir şablonun altındaki not, uygulamadan önce kuralı özetler. Ayrıntı: Kütüphane.

Dört yüzey bir bakışta

	Kampanya	Ürün kartı	İçerik bloğu	Sayfa deneyi
Taşıdığı parçalar	HTML, CSS, JavaScript	HTML, CSS, JavaScript	HTML, CSS	HTML, CSS, JavaScript
${token} doldurulur mu	Hayır	Evet, kart alanları	Evet, ürün alanları ve ${attr.alan}	Hayır
Satır içi style özniteliği	Kalır	Kalır	Silinir	Silinir
form, input	Kalır	Silinir	Silinir	Silinir
button	Kalır	Kalır	Silinir	Silinir
svg	Kalır	Kalır	Silinir	Silinir
<style> etiketi	Silinir	Silinir	Silinir	Silinir
<script> etiketi	Silinir	Silinir	Silinir	Silinir
Olay öznitelikleri (onclick gibi)	Silinir	Silinir	Silinir	Silinir

JavaScript içeren bir şablonu yazmak ya da değiştirmek, yüzey ne olursa olsun, Custom Code modülünü ister (API 402); HTML ve CSS her hesapta kullanılabilir.

Her yüzeyde CSS ayrı alana yazılır; markup içindeki <style> etiketi hiçbir yüzeyde kalmaz. Bu yüzden CSS sekmesi yoksa ya da CSS'iniz markup'ın içine gömülüyse mağazada stilsiz görünür.

Kampanya

Özel kampanya ve AI Studio tasarımları. HTML, CSS ve JavaScript taşır.

• Yer tutucu doldurulmaz: ${price} mağazada düz metin olarak görünür. Ürün adı ya da fiyat gibi bilgiyi JavaScript ile sayfanın kendisinden okuyun. (Kampanya metin alanlarının ürün yer tutucuları ayrı bir sözdizimidir: Koşullu İçerik.)
• JavaScript sayfa düzeyinde bir IIFE içinde çalışır (this === window), kapsayıcı değişkeni verilmez; kendi elemanlarınızı HTML'de tanımladığınız benzersiz bir kök kimliğiyle bulun. Satır içi onclick çalışmaz, addEventListener kullanın.
• Önizleme kampanya widget'ının temizleyicisinden geçer ve kanalın marka renklerini kullanır.

Ürün kartı

Öneri şeridindeki ve arama sonuçlarındaki kart. HTML, CSS ve JavaScript taşır.

• Kart her ürün için ayrı çizilir; ${name}, ${formattedPrice}, ${imageUrl}, ${url} gibi alanlar o ürünün değeriyle dolar. ${addToCartAttrs} gibi eylem bağlayıcıları bir açılış etiketinin içine yazılır. Tam liste: Özel Kart Oluşturma.
• Kart şeritte tekrarlanır: kimlik (id) kullanmayın, CSS seçicilerini kartın kök sınıfı altına yazın.
• JavaScript kart başına bir kez çalışır; product, container ve widget hazırdır ve sorgular container içinde yapılır.
• Kartın kendi JavaScript'ini kaydetmek kod düzenleme yetkisi (Admin) ve Custom Code modülü ister.

İçerik bloğu

Ürün sayfasına yerleşen blok. Yalnızca HTML ve CSS taşır; JavaScript sekmesi yoktur.

• Blok, gösterildiği sayfadaki ürünün değerleriyle dolar: ${title}, ${brand}, ${formattedPrice}. Beslemenizin ek alanları ${attr.anahtar} olarak yazılır. Değeri olmayan alan boş basılır. Liste: Yer Tutucular.
• En katı temizleyiciden geçer: satır içi stil, form, düğme ve SVG hem mağazada hem önizlemede silinir. Düğme yerine bağlantı, açılır soru için details ve summary kullanın.
• CSS otomatik olarak yalnızca bu bloğa sınırlanır.
• Önizlemede ürün alanları doldurulmaz; değerler mağazada ürün sayfasında dolar.

Sayfa deneyi

Sayfa deneyi eylemleri: eklenecek HTML, enjekte edilecek CSS, çalıştırılacak JavaScript. Her parça bir eylem satırıdır ve satır kendi alanını tutar.

• Hiçbir yer tutucu doldurulmaz. Ürün ya da sepet verisi ${...} biçiminde yazılırsa ziyaretçiye düz metin olarak ulaşır; veriyi sayfadan JavaScript ile okuyun.
• HTML temizleyiciden geçer (içerik bloğuyla aynı katılıkta). Tıklanabilir öge için a kullanın; açılır içerik için details ve summary.
• CSS sayfanın head bölümüne olduğu gibi eklenir ve tüm sayfaya uygulanır. Eklediğiniz markup için kuralları kök sınıfın altına sınırlandırın; sayfada zaten var olan bir öğeyi stillerken yalnızca elinizdeki seçicileri kullanın.
• JavaScript her sayfa görüntülemesinde bir kez, sayfa düzeyinde çalışır; eklenen HTML henüz sayfada olmayabilir, eleman yoksa sessizce dönün. Tek sayfa uygulamada varyant yeniden uygulanır: kodu iki kez çalışmaya karşı koruyun.

Bir yüzeyden diğerine şablon taşımak

Uygulamadan önce seçici, şablonun bu alana ne yapacağını söyler:

Mesaj	Anlamı
Will apply	Bu parçalar alana yerleşir
Not applied, because this place has nowhere to put it	Parçanın bu alanda yeri yok (örneğin içerik bloğuna JavaScript) ve düşer
Ürün alanı yer tutucuları dolmaz uyarısı	Şablondaki ${...} değerleri bu yüzeyde doldurulmaz, mağazada düz metin görünür. Ürün kartı ya da içerik bloğu şablonunu kampanyaya ya da sayfa deneyine uygulayınca çıkar
Başka bir yüzey için yazılmış uyarısı	Bu alanın temizleyicisi farklıdır; bazı etiket ve stiller düşebilir
Nothing in this template can be applied here	Şablonun hiçbir parçası bu alana uymuyor; uygulanamaz

Şablonun yüzeyini düzenleme ekranında değiştirirseniz yeni yüzeyin taşımadığı parçalar kaydederken silinir (örneğin kampanya şablonunu içerik bloğuna çevirmek JavaScript'ini atar).

Mağaza editöründe

Mağaza editörü (sayfa deneyi ve ürün sayfasında blok kurma) Kütüphane'yi içerik bloğu gözüyle okur: yalnızca HTML'i olan şablonlar listelenir, JavaScript sonraya bırakılır ve listede söylenir; ürün alanları dolmayacaksa uyarı çıkar. Şablon tek bir HTML öğesi olarak ve kendi CSS'iyle gelir. Bkz. Blok Tasarımcısı.