Genel Bakış

Ürün Zenginleştirme, belirli ürünlerin detay sayfasına kendi hazırladığınız içeriği eklemenizi sağlar. Bir beden tablosu, ürüne özel bir SSS bölümü, kumaş bakım talimatları, teknik özellik listesi — temanıza dokunmadan, yalnızca ilgili ürünlerde.

İki parçadan oluşur:

• Blok — içeriğin kendisi (HTML + CSS). Bir kez tasarlarsınız, birçok kuralda kullanırsınız.
• Kural — bu bloğu hangi ürünlerde ve sayfanın neresinde göstereceğinizi söyler.

Nasıl çalışır

1. Blok oluşturun. İçeriğinizin HTML'ini yazın. İsterseniz ayrı bir CSS alanı da doldurabilirsiniz.
2. Kural oluşturun. Bloğu seçin, ürün kodlarını girin, hedef seçiciyi ve konumu belirtin.
3. Yayınlayın. Kural aktif olduğunda, eşleşen ürünlerin detay sayfasında içerik görünür.

Widget script'iniz sayfada zaten yüklü olduğu için ek bir kurulum gerekmez.

Ürün kodları — sku mu, itemCode mu?

İkisi de olur. Kural yazarken hangi kodu kullandığınızı bilmek zorunda değilsiniz.

Kataloğunuzda her ürün iki kod taşıyabilir: ticaret platformunuzun ürettiği iç kimlik (itemCode, örn. 904236) ve sizin kendi stok kodunuz (sku, örn. 04260). Kuralı kaydettiğinizde Selwise girdiğiniz kodu her iki alanda da arar ve eşleşen ürünün her iki kimliğini birden kurala yazar. Mağazanız sayfada hangisini yayınlıyorsa eşleşme yine tutar.

Yerleşim: seçici ve konum

Kural, sayfadaki bir hedef elemanı CSS seçici ile bulur ve içeriği ona göre yerleştirir:

Konum	Sonuç
Öncesine	Hedef elemanın hemen üstüne
Sonrasına	Hedef elemanın hemen altına (varsayılan)
İçine (başa)	Hedef elemanın içine, ilk çocuk olarak
İçine (sona)	Hedef elemanın içine, son çocuk olarak
Yerine	Hedef elemanı tamamen değiştirir

Seçiciyi nasıl bulacağınız için: Seçici Bulma.

İçerikte ürün bilgisi kullanma

Bloğunuzun içinde ${'${'}token} yazarak o ürünün gerçek değerlerini basabilirsiniz:

<div class="beden-notu">
  <strong>${'${'}title}</strong> için önerilen beden tablosu:
  <p>Fiyat: ${'${'}formattedPrice}</p>
</div>

Kullanılabilir tokenlar: code, title, brand, price, formattedPrice, originalPrice, currency, url, imageUrl, inStock, stock, categories.

Kendi feed alanlarınız

Yukarıdaki liste sabittir, ama feed'inizin taşıdığı diğer her alan da kullanılabilir. Feed'iniz her senkronizasyonda taranır; standart alanların dışında kalan alanlar ${'${'}attr.alan_adı} olarak blok editöründe önerilir.

<table class="urun-ozellikleri">
  <tr><td>Garanti</td><td>${'${'}attr.garanti_suresi}</td></tr>
  <tr><td>Kumaş</td><td>${'${'}attr.kumas}</td></tr>
</table>

Alan adları sadeleştirilir: Garanti Süresi → garanti_suresi, g:material → material, @_size → size. Feed'iniz alanları bir attributes (veya specs, properties) bloğu içinde gönderiyorsa iç alanlar kendi adlarıyla gelir — Akinon'un attributes.pre_ent_beden alanı ${'${'}attr.pre_ent_beden} olur.

Hangi alanların kullanılabildiğini blok editöründeki Kendi feed alanlarınız listesinden görebilirsiniz. Liste boşsa ya feed bağlı değildir ya da son senkronizasyonda standart alanların dışında bir alan bulunamamıştır.

Aynı yere birden fazla blok

Aynı seçiciye birden fazla kural yazabilirsiniz; varsayılan davranış hepsini üst üste göstermektir. Sıralama Öncelik alanına göre belirlenir (yüksek olan üstte).

Yalnızca bir tanesinin görünmesini istiyorsanız kuralın çakışma davranışını Tek başına yapın — o zaman aynı noktadaki en yüksek öncelikli kural diğerlerini eler.

Sınırlar

• JavaScript çalıştırılmaz. Blok içeriğinde <script> etiketi ve olay öznitelikleri (onclick vb.) temizlenir. Sayfada kod çalıştırmanız gerekiyorsa Scriptler modülünü kullanın.
• Varyant düzeyinde hedefleme desteklenmiyor. Kural ürün koduna bağlanır. Çoğu temada renk/beden değiştirmek sayfa adresini değiştirmediği için, varyanta özel bilgi yazarsanız müşteri başka bir varyanta geçtiğinde içerik ekranda kalır. Varyantlar kataloğunuzda ayrı ürün olarak duruyorsa her birine ayrı kural yazabilirsiniz.
• Arama motorları için garanti yoktur. İçerik tarayıcıda, sayfa çizildikten sonra eklenir. Bu, içeriği doğrudan temanıza yazmakla aynı SEO etkisini vermez.
• style özniteliği kaldırılır. Görsel düzenlemeleri bloğun CSS alanına yazın; oradaki kurallar yalnızca sizin bloğunuza uygulanacak şekilde sınırlandırılır.

Önizleme

Blok düzenleme ekranında içeriğiniz siz yazarken alt tarafta görüntülenir. Bu önizleme widget'ın kullandığı hattın aynısından geçer: tokenlar aynı şekilde çözümlenir, işaretleme aynı izin listesinden temizlenir, CSS aynı şekilde bloğunuza sınırlanır. Yani style özniteliğiniz burada da kaybolur ve ${'${'}formattedPrice} yazdığınızda gerçek fiyatı görürsünüz — mağazada göreceğinizin farklı olması için bir sebep kalmaz.

Hangi ürünle önizlendiğini siz seçersiniz: kodu elle yazabilir ya da katalogda arayabilirsiniz. Kod alanını boş bırakırsanız kataloğunuzdan bir ürün seçilir. Yazdığınız kod katalogda yoksa bu da söylenir — o durumda tüm ürün tokenları boş görünür, mağazada da öyle olur.

Masaüstü, tablet ve mobil genişlikleri arasında geçiş yapabilirsiniz. Çerçevenin altındaki not içeriğinizin ölçülen yüksekliğini Ayrılan yükseklik alanına yazdığınız değerle karşılaştırır: eksik ayırırsanız blok geldiğinde sayfanın ne kadar kayacağını, fazla ayırırsanız ne kadar boşluk göründüğünü söyler. Bu ölçüm önizleme genişliğinde alındığı için yaklaşık bir değerdir.

Kural ekranındaki önizleme ise bir ürün için mağazanın alacağı yanıtı gösterir: o ürüne uyan tüm kurallar, sunucunun sıraladığı sırayla. Aynı seçiciye yığılan başka bir kural ya da sizin kuralınızı bastıran bir "yalnızca en yüksek öncelik" kuralı varsa burada görünür.

Canlı sitede test etmek için tarayıcı konsolunda:

localStorage.setItem('selwise_test_mode', 'true')

Test modundaki kurallar yalnızca bu ayar açıkken görünür.