İnceleme Kriterleri

Markete gönderilen her tema, yayınlanmadan önce T-SOFT teknik birimi tarafından incelenir. Bu sayfa incelemede bakılan başlıkları ve gönderim öncesi kendi kendinize uygulayabileceğiniz kontrol listesini içerir.

Kod ayrımı

Twig şablonları yalnızca işaretleme içerir. Stil ve davranış ayrı dosyalara yazılır.

{# ❌ Stil ve davranış şablonun içinde #}
<style>.promo-badge { background: #fd6905; }</style>
<div class="promo-badge" onclick="openPromo()">{{ t.promo }}</div>
<script>function openPromo() { /* ... */ }</script>

{# ✅ İşaretleme şablonda, stil Tailwind'de, davranış theme.js'te #}
<div class="bg-primary text-white px-3 py-1 rounded" data-promo-trigger>
  {{ t.promo }}
</div>

Twig'den JavaScript'e veri aktarımı data-* öznitelikleriyle yapılır; şablona script gömerek değil. Hazır bileşenleri bağlamak için data-toggle kataloğunu kullanın.

Bkz. Asset · JavaScript · Data-Toggle Bileşenleri

HTML ve stil

HTML kodlaması Tailwind ile yapılır. Sabit değerler yerine panelden yönetilen semantik class'lar kullanılır.

Dinamik class üretimi incelemede sık görülen bir hatadır — olası tüm class'lar kaynakta açıkça yazılmalıdır. Ayrıntı için bkz. Tailwind.

Bkz. Tailwind · Temayı Özelleştir

Dil dosyaları

Ekranda görünen hiçbir metin şablona sabit yazılmaz. Tüm metinler locales/ altındaki sözlüklerden gelir.

{# ❌ Sabit metin — çeviri yapılamaz #}
<button class="btn-primary">Sepete Ekle</button>

{# ✅ Sözlükten gelir #}
<button class="btn-primary">{{ t.add_to_cart }}</button>

Dil dosyaları eksiksiz olmalıdır: temada çağrılan her anahtar, desteklenen her dil dosyasında tanımlı olmalıdır. Gönderim öncesi kullanılan anahtarları çıkarıp sözlüklerle karşılaştırın:

# Temadaki tüm t.<anahtar> çağrılarını çıkar
grep -rEho 't\.[a-z0-9_]+' section/ snippets/ | sort -u

# Şablonlarda kalan sabit Türkçe metinleri ara
grep -rn '>[^<{]*[çğıöşü]' section/ snippets/

Bkz. Locale ve Çeviriler

Responsive tasarım

Tema tüm kırılımlarda kullanılabilir olmalıdır. İncelemede sayfalar gerçek cihaz genişliklerinde açılır.

Bkz. Tailwind

Alışveriş akışı

Alışveriş süreci baştan sona hatasız tamamlanmalıdır. İncelemede aşağıdaki adımlar gerçek bir mağazada denenir.

Hata durumları da kontrol edilir: stokta olmayan ürün, seçilmemiş varyant, boş sepet ve sonuç dönmeyen arama ekranları anlamlı bir mesaj göstermelidir.

Bkz. JS Bileşenleri · Data-Toggle Bileşenleri

Konsol temizliği

Tarayıcı konsolu temiz olmalıdır. Gezinme sırasında hata veya uyarı üretmeyen bir tema beklenir.

Geliştirme sırasında bıraktığınız console.log satırları gönderim öncesi temizlenmelidir.

// ✅ Eleman yoksa kod sessizce atlanır, konsola hata düşmez
const addToCartBtn = document.querySelector('[data-add-to-cart]');
if (addToCartBtn) {
  addToCartBtn.addEventListener('click', handleAddToCart);
}

Bkz. JavaScript

Performans ve görseller

Performans incelemenin ayrı bir başlığıdır. Kurallar Performans sayfasında ayrıntılı anlatılır; incelemede beklenen özet şudur:

Bkz. Performans

İsimlendirme ve düzen

Kod, üzerinde başkasının çalışacağı varsayımıyla yazılır. İsimler ne yaptıklarını anlatmalıdır.

Dosya ve klasör adlarında kebab-case kullanılır. Kullanılmayan dosyalar, yoruma alınmış ölü kod blokları ve deneme amaçlı section'lar gönderim öncesi silinmelidir.

Bkz. Tema Yapısı · Snippet

Tema meta bilgileri

.theme manifestindeki bilgiler markette görünen bilgilerdir; doğru ve güncel olmalıdır.

Bkz. Tema Yapısı

Gönderim öncesi kontrol listesi

Sıradaki adım