Prop tipleri

Panelde tanımladığınız her prop'un bir tipi vardır. Tip, formda hangi girdinin çizileceğini ve bileşeninize hangi TypeScript tipinin geleceğini belirler.

Basit tipler

Tip	Formda	Bileşende	Ek ayarlar
text	Tek satır girdi	string	placeholder
textarea	Çok satır	string	placeholder
color	Renk seçici	string	—
image	Görsel yükleme	string (URL)	—
url	Adres girdisi	string	placeholder
range	Kaydırıcı	number	min, max, step, unit
select	Açılır liste	string	options: { value, label }[]
boolean	Anahtar	boolean	—
links	Bağlantı listesi	{ label, url }[]	—

Hepsi label, default ve info alır. info, alanın altında görünen açıklama satırıdır.

range örneği

id: columns   min: 2   max: 6   step: 1   unit: sütun   default: 4

<div style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }} />

links örneği

export default function Footer({ links }: FooterProps) {
  return (
    <nav>
      {links.map((link) => (
        <a key={link.url} href={link.url}>{link.label}</a>
      ))}
    </nav>
  );
}

Veri tipleri

Bu üç tip özeldir: mağaza sahibi bir sorgu tanımlar, vitrin onu çözer ve bileşeninize hazır veri gelir.

Tip	Bileşende	Mağaza sahibi ne seçer
product-list	WinkwopProduct[]	Kaynak: tümü / seçili / kategori / sayfaya göre
product	WinkwopProductDetail	Belirli ürün ya da sayfanın ürünü
category	WinkwopCategory	Belirli kategori ya da sayfanın kategorisi

product-list modları

Mod	Davranış
auto	Katalog akışı; sort ve limit ile
static	Elle seçilen ürünler, seçilen sırayla
category	Tek kategori
context	Sayfanın konusu — kategori sayfasında o kategorinin ürünleri

context modu dinamik sayfaların anahtarıdır: /collections/:slug için tek bir dizilim tüm kategorilere hizmet eder.

Sorguyu siz yapmayın

Veri prop'u kullandığınızda listeleme sunucuda çözülür: ilk boyamada veri hazırdır, yükleniyor durumu yoktur ve mağaza sahibi kaynağı istediği gibi değiştirebilir. SDK'yı yalnızca tarayıcıda yaşayan veriler için kullanın (sepet, arama, hesap).

Kod adı kuralları

• Küçük harf ve rakam, kelimeler camelCase: ctaText, columns
• Aynı bölüm içinde tekrar edemez
• Sonradan değiştirmeyin — mağazaların kaydettiği ayarlar bu ada bağlıdır