Genel Bakış
Bir T-SOFT teması; mağaza vitrinini oluşturan Twig şablonlarını, Tailwind stillerini ve statik varlıkları bir araya getirir. Tema motoru sunucu tarafında çalışır; sayfayı HTML olarak üretip istemciye teslim eder, böylece vitrin hem hızlı açılır hem SEO uyumlu kalır. Mağaza CDN paketine sahipse statik varlıklar ayrıca dağıtım ağı üzerinden sunulur.
Tema motoru nasıl çalışır?
Bir müşteri mağazayı ziyaret ettiğinde T-SOFT, URL'ye karşılık gelen sayfa tipini belirler, gereken mağaza verisini Twig'e aktarır ve şablonu sunucuda işleyerek hazır HTML'i döndürür.
Sayfa tipi seçimi
URL'ye göre ürün, kategori, ana sayfa veya sepet gibi bir sayfa tipi belirlenir.
Veri bağlamı
T-SOFT, o sayfa ve aktif section için gereken değişkenleri Twig'e UPPERCASE adlarla aktarır — PRODUCTS, P, TOTAL, SETTING, BLOCK gibi. Hangi global'lerin geldiğini T-Soft Theme Devtools eklentisinden canlı görebilirsiniz.
Section sıralaması
Mağaza sahibinin panelden sayfaya eklediği section'lar tanımlı sırayla işlenir.
İşleme
Motor; Twig değişkenlerini çözer, snippet'ları çağırır ve Tailwind sınıflarıyla HTML üretir.
Yanıt
Sayfa, derlenmiş varlıklarla birlikte istemciye iletilir. CDN paketi olan mağazalarda statik varlıklar en yakın dağıtım noktasından gelir.
Bir temanın bileşenleri
Her tema, aşağıdaki yapı taşlarından oluşur. Ayrıntısı için Tema Yapısı sayfasına bakın.
| Bileşen | Açıklama |
|---|---|
.theme | Temanın manifest dosyası: ad, yazar, sürüm. |
section/ | Sayfaya panelden eklenebilen modüler bölümler. |
snippets/ | Birden fazla section'da yeniden kullanılan parçalar (ör. product-card). |
assets/css/ | Özel CSS — başlangıç noktası theme.css. |
assets/js/ | Özel JavaScript — başlangıç noktası theme.js. |
locales/ | Çeviri sözlükleri. T-SOFT'un öntanımlı sözlüğünü ezebilir veya tamamen yeni anahtar tanımlayabilirsiniz. |
Hızlı bir örnek
Aşağıdaki section bir vitrin başlığı ve ürün ızgarası render eder. Çift süslü parantez ({{ }}) değişkeni ekrana yazar; {% raw %}{% %}{% endraw %} etiketleri ise mantık bloklarını çalıştırır. Ürün kartı ayrı bir snippet'tan gelir.
<section class="py-12">
<h2 class="text-2xl font-bold mb-6">{{ t.block_title }}</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
{% for key, P in PRODUCTS %}
{{ snippet('product-card', { product: P }) }}
{% endfor %}
</div>
</section>
Geliştirme akışı
# 1. CLI'ı kur ve hesabınla bağlan
npm install -g tsoft-cli
tsoft login
# 2. Yeni bir tema iskelesi oluştur (veya mevcut bir temayı fork'la)
tsoft theme create
tsoft theme fork
# 3. Tema dizinine gir
cd example-tsoft-biz/my-theme
# 4. Hot-reload ile yerelde geliştir
tsoft theme dev
# 5. Yayına gönder
tsoft theme push
T-Soft Theme Devtools (Chrome eklentisi)
T-Soft Theme Devtools Chrome eklentisi, section ve snippet geliştirirken kullanılan yardımcı araçtır. Mağaza yönetim ekranı açıkken Chrome DevTools'a "T-Soft Devtools" adında bir sekme ekler ve o anki sayfada erişilebilir değerleri canlı listeler.
Üç sekmesi vardır:
| Sekme | İçerik | Ne işe yarar |
|---|---|---|
| Global Değişkenler | O sayfada tanımlı tüm global'ler (APP_ENV, CART_INFO, CURRENCY, COOKIE_LAW, DESIGN_MODE, FAVICON, IS_ACTIVE_POPUP, IS_ADMIN_LOGGED…) ve canlı değerleri | Twig'de {{ ... }} ile yazacağınız adın gerçekten var olup olmadığını teyit etmek |
| Blok Değişkenleri | Aktif section/snippet'a gelen değişkenler ve panelden gelen ayar değerleri | Section'a hangi alanların düştüğünü, snippet'a hangi parametrelerin geçtiğini somut görmek |
| Dil Değişkenleri | O bloğa enjekte edilen t sözlüğü (block + common birleştirilmiş hali) | {{ t.<anahtar> }} çağrılarında hangi anahtarların hazır olduğunu görmek |