Veri bağlama

Bölümünüzün ürün göstermesi için iki yol var: veri prop'u (önerilen) veya SDK çağrısı.

Veri prop'u

Ürün listesi tipinde bir prop tanımlarsınız. Mağaza sahibi kaynağı seçer, vitrin sorguyu çözer ve bileşeninize hazır ürün dizisi gelir.

Mağaza sahibinin seçebildiği kaynaklar:

Mod	Anlamı
auto	Katalogdan sıralı akış (en yeni, fiyat vb.) + adet
static	Elle seçilmiş ürünler, seçtiği sırayla
category	Belirli bir kategori
context	Sayfanın konusu — kategori sayfasında o kategori, ürün sayfasında o ürün

context modu dinamik sayfaların anahtarıdır: tek bir dizilim tüm kategori sayfalarına hizmet eder.

import type { ProductGridProps } from '../generated/types';

export default function ProductGrid({ heading, products }: ProductGridProps) {
  return (
    <section>
      <h2>{heading}</h2>
      <div className="wk-grid">
        {products.map((p) => (
          <a key={p.id} href={`/products/${p.slug}`} className="wk-card">
            {p.images?.[0] && <img src={p.images[0]} alt={p.name} />}
            <h3>{p.name}</h3>
            <span>{p.price} ₺</span>
          </a>
        ))}
      </div>
    </section>
  );
}

Bu yolu tercih edin: sunucuda çözüldüğü için ilk boyamada veri hazırdır, yükleniyor durumu yönetmeniz gerekmez ve mağaza sahibi kaynağı istediği gibi değiştirebilir.

SDK çağrısı

Bazı bölümler kendi verisini çekmek zorundadır — sepet çekmecesi, arama kutusu, hesap sayfası gibi tarayıcıda yaşayan şeyler.

import { useEffect, useState } from 'react';
import { winkwop, type WinkwopCart } from 'winkwop-theme-sdk';

export default function CartBadge() {
  const [cart, setCart] = useState<WinkwopCart | null>(null);

  useEffect(() => {
    winkwop.cart.get().then(setCart).catch(() => {});
  }, []);

  return <span>{cart?.item_count ?? 0}</span>;
}

Tam yüzey: SDK referansı.

Hangisini seçmeli

Durum	Yol
Ürün/kategori listelemek	Veri prop'u
Sayfanın konusuna göre içerik	Veri prop'u, context modu
Sepet durumu, arama, müşteri hesabı	SDK
Kullanıcı etkileşimiyle değişen veri	SDK

Görseller

Ürün görselleri size mutlak URL olarak gelir; ek bir işlem yapmanız gerekmez. Görsel dizisi boş olabilir, her zaman kontrol edin:

{p.images?.[0] ? <img src={p.images[0]} alt={p.name} /> : <div className="wk-placeholder" />}