Bölümler

Bölüm, temanızın yapı taşıdır: mağaza sahibinin sayfaya ekleyip çıkardığı, sırasını değiştirdiği ve ayarlarını doldurduğu bir React bileşeni.

Anatomi

Her bölümün iki yüzü vardır:

• Tanım (şema) — partner panelinde yazılır, manifest'e girer. Bölümün adı, kod adı, ikonu, rolü ve kabul ettiği prop'lar.
• Bileşen — src/sections/<KodAdı>.tsx, varsayılan export.

İkisini pull bağlar. Panelde tanımladığınız prop, projenizde tip olarak belirir; bileşen o tipi kullandığı için ikisi birbirinden kopamaz.

Kurallar

Nerede olduğunuzu varsaymayın

Mağaza sahibi bölümü herhangi bir sayfaya koyabilir. "Ben ana sayfadayım" varsayan bir bölüm, kategori sayfasına konduğunda bozulur.

Varsayılan export kullanın

export default function Hero(props: HeroProps) { /* … */ }

Registry bileşeni varsayılan export üzerinden bulur.

Boş ayarlara hazırlıklı olun

Mağaza sahibi her alanı doldurmak zorunda değil. Metin boşsa etiketi de çizmeyin:

{subtitle && <p className="wk-hero__sub">{subtitle}</p>}

Yalnızca izinli paketleri içe aktarın

Kendi dosyalarınız, React, SDK ve kısa bir npm listesi (İzin verilen paketler). Listede olmayan bir paket derlemeyi durdurur — küçük yardımcıları src/lib/ altına kopyalayın.

Bağlantılarda düz <a> kullanın

<a href="/products">Tüm ürünler</a>

Vitrin tıklamaları yakalayıp sayfa yenilenmeden gezinmeyi kendisi yapar. Tema kodu router bilmez.

Kod adını sonradan değiştirmeyin

Kod adı (type) mağazaların tema JSON'unda saklanır. Değiştirirseniz o bölümü kullanan mağazalarda bölüm sessizce çizilmez.

Tek kullanımlık bölümler

Şemada "Sayfada yalnızca bir kez kullanılabilir" işaretlenirse, mağaza sahibi o bölümü bir sayfaya iki kez ekleyemez. Üst menü, alt bilgi, ürün detayı gibi bölümler için uygundur.

Rol (header/footer) seçtiğinizde bu otomatik işaretlenir.

Bölümler arası iletişim

Bölümler birbirini import edemez — her biri bağımsız çizilir ve mağaza sahibi hangisinin sayfada olduğuna karar verir. Ama aynı window'u paylaşırlar.

İletişim için CustomEvent kullanın:

// Ürün kartı: sepete ekledikten sonra çekmeceyi aç
window.dispatchEvent(new CustomEvent('tema:sepet:ac'));

// Header: olayı dinle
useEffect(() => {
  const onOpen = () => setDrawerOpen(true);
  window.addEventListener('tema:sepet:ac', onOpen);
  return () => window.removeEventListener('tema:sepet:ac', onOpen);
}, []);

Olay adlarınızı temanıza özel bir önekle yazın; başka bir temanın olaylarıyla çakışmasın.

Sabit konumlu öğelerde dikkat

position: fixed bir öğe, üst atalarından birinde backdrop-filter, transform veya filter varsa viewport'a değil o atasına göre konumlanır. Sepet çekmecesi gibi tam ekran katmanları createPortal ile document.body'ye taşıyın:

import { createPortal } from 'react-dom';

return createPortal(<div className="wk-drawer">…</div>, document.body);

Bu, referans temada gerçekten yaşanmış bir hatadır: Header'ın backdrop-filter özelliği çekmeceyi header kutusuna hapsediyor ve sayfada yatay taşma yaratıyordu.

Stil

Yeni projeler Tailwind CSS ile gelir; bölümünüzde doğrudan sınıf yazabilirsiniz:

<section className="flex items-center gap-4 px-6 py-16">…</section>

Düz CSS de yazabilirsiniz, ama üretime çıkması için import zincirine bağlı olması gerekir — src/styles.css yalnızca yerel önizlemede uygulanır.

Ayrıntı ve tuzaklar: Stil ve Tailwind.