Secici Bulma

Bir zenginleştirme kuralı, içeriği sayfanın neresine koyacağını CSS seçici ile bulur. Seçici, hedeflemek istediğiniz elemanın adresi gibidir: .product-description, #urun-detay, [data-tab="specs"].

Doğru seçiciyi bulmak bu özelliğin tek gerçek öğrenme adımıdır. Üç yol var.

1. Selwise seçici modu (önerilen)

Widget script'iniz, mağazanızda açabileceğiniz bir hata ayıklama paneli taşır. Ürün sayfanızda tarayıcı konsolunu açın ve şunu çalıştırın:

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

Sayfayı yenileyin. Sağ altta beliren panelde Seçici sekmesine geçin, ardından Eleman seç'e tıklayın. Fareyi sayfada gezdirdiğinizde elemanlar vurgulanır; tıkladığınızda o elemanın seçicisi üretilir ve panoya kopyalanır.

Panel kapatmak için:

localStorage.removeItem('selwise_debug')

2. Tarayıcının inceleme aracı

Seçici modunu kullanamıyorsanız:

1. Hedeflemek istediğiniz alana sağ tıklayın → İncele (Chrome/Edge) veya Öğeyi İncele (Firefox/Safari).
2. Açılan panelde vurgulanan satıra sağ tıklayın → Copy → Copy selector.
3. Kopyalanan değeri kuralın seçici alanına yapıştırın.

3. Yaygın seçiciler

Çoğu tema aşağıdakilerden birini kullanır. Kural formundaki seçiciyi kaydetmeden önce doğrulayabilirsiniz.

Platform	Sık kullanılan seçiciler
Shopify	.product-single__description, .product__description
WooCommerce	.woocommerce-product-details__short-description, #tab-description
Magento	.product.attribute.description, .product-info-main
IdeaSoft	.product-description, .detail-tab-content
İkas	.product-detail-description
Ticimax	.UrunAciklama, .urun-detay-aciklama
T-Soft	.product-detail-tab, .urunAciklama

İyi bir seçici nasıl olur

Kararlı olanı seçin. Temanın yapısı değiştiğinde ilk bozulan şey uzun ve derin seçicilerdir.

✅ .product-description
✅ [data-section="description"]
✅ #product-tabs

⚠️  div > div > div:nth-child(3) > p
⚠️  .css-1x7fkq2

İkinci gruptaki gibi otomatik üretilmiş sınıf adları (.css-1x7fkq2) tema her derlendiğinde değişebilir. Sayfada anlamlı bir id veya data- özniteliği varsa onu tercih edin.

Tek bir elemanı hedefleyin. Seçici birden fazla elemanla eşleşiyorsa içerik yalnızca ilkine yerleştirilir.

Kural kaydediliyor ama içerik görünmüyor

Sırayla kontrol edin:

1. Kural aktif mi? Taslak durumundaki kurallar render edilmez.

2. Ürün kodu eşleşiyor mu? Kural detayındaki kod listesinde ilgili kod "Katalogda yok" rozeti taşıyorsa, ürün feed'inizde o kod bulunmuyor demektir.

3. Seçici sayfada var mı? Ürün sayfasında konsola yazın:

   document.querySelector('.product-description')
   

   null dönüyorsa seçici o sayfada yok. Farklı ürün şablonları farklı seçiciler kullanabilir.

4. Eleman geç mi yükleniyor? Bazı temalar açıklama sekmesini tıklanınca yükler. Selwise elemanı 6 saniye boyunca bekler; daha geç gelen bir eleman yakalanamaz. Bu durumda daha erken var olan bir üst elemanı hedefleyip İçine (sona) konumunu kullanın.

5. İçerik bir iframe içinde mi? Bazı sayfa oluşturucular ürün açıklamasını iframe içinde render eder. Selwise iframe sınırını geçemez; bu durumda iframe'in kendisini veya onu saran bir elemanı hedefleyin.

6. Son render ne zaman? Kural listesindeki Son render sütunu boşsa veya günler öncesini gösteriyorsa, seçici muhtemelen bir tema güncellemesiyle birlikte kırılmıştır.