Özel Kart Oluşturma

Şema modunun veremediği bir düzen gerekiyorsa kartın HTML'ini kendiniz yazabilirsiniz.

Panelde nerede

Product Cards → New → Mode: Advanced code.

Token'lar

HTML içinde ürün verisine token'larla erişirsiniz:

<div class="kart">
  <a href="{{url}}">
    <img src="{{image}}" alt="{{name}}" />
    <span class="marka">{{brand}}</span>
    <h4>{{name}}</h4>
    <div class="fiyat">
      <span class="guncel">{{formattedPrice}}</span>
      <span class="eski">{{formattedOldPrice}}</span>
    </div>
  </a>
</div>

Kullanılabilir token'lar

Grup	Token'lar
Kimlik	id, productId, itemCode, sku
Metin	name, title, description, shortDescription, shortDesc
Görsel ve bağlantı	image, imageUrl, url, link
Fiyat	price, formattedPrice, oldPrice, formattedOldPrice, originalPrice
İndirim	discountRate, discount
Sınıflandırma	brand, category, categories
Stok	stock, inStock
Değerlendirme	rating, reviewCount
İşaretler	isSale, isNew, isBestseller

Biçimlendirilmiş fiyat token'ları (formattedPrice) para birimini içerir; ham olanlar içermez.

Marka temasını kullanın

Renkleri sabit yazmak yerine tema değişkenlerini okuyun:

.kart {
  background: var(--selwise-surface, #fff);
  border: 1px solid var(--selwise-border, #e5e5e5);
  border-radius: var(--selwise-radius, 8px);
  font-family: var(--selwise-font, inherit);
}
.kart .guncel { color: var(--selwise-price, #111); }
.kart .eski   { color: var(--selwise-text-muted, #888); text-decoration: line-through; }

Tam liste: Marka Teması.

Sepete ekleme

Kartta sepete ekleme butonu istiyorsanız, gerekli olay bağlantısını token olarak yerleştirin. Bu token, sepet entegrasyonunun butona bağlanmasını sağlayan HTML özniteliklerini üretir — kendi onclick kodunuzu yazmayın.

Sepet entegrasyonu: Sepete Ekleme.

Boş alan kontrolü

Beslemenizde her ürün için dolu olmayan alanlar vardır. Marka yoksa {{brand}} boş string olur ve kartta boş bir satır kalır. Kendi CSS'inizde boş elementleri gizleyin:

.kart .marka:empty { display: none; }

Güvenlik

Token değerleri HTML'e güvenli şekilde yerleştirilir. Ürün verisi içindeki özel karakterler kaçırılır; besleme verisi sayfanıza kod enjekte edemez.

Ne zaman kod moduna geçilmeli

Durum	Mod
Alan sırası ve stil yeterli	schema
Özel bir düzen (üst üste binen elementler, özel rozet konumu)	advanced_code
Sitenizin mevcut ürün kartı HTML'ini birebir eşlemek	advanced_code

Son durum en yaygın sebeptir: Selwise kartının sitenizdeki kartlarla aynı görünmesini istiyorsanız, sitenizin kart HTML'ini kopyalayıp token'ları yerleştirmek en hızlı yoldur.