Asset

assets/ klasörü, temanızın statik varlıklarını barındırır: özel CSS, JavaScript, görseller ve fontlar. T-SOFT bu dosyaları derleyip sürümleyerek sunar; mağaza CDN desteği aktif ise statik varlıklar ayrıca dağıtım ağı üzerinden teslim edilir.

assets/
├── css/
│   ├── theme.css      # Özel CSS giriş noktası
└── js/
│     ├── theme.js     # Özel JS giriş noktası

CSS — theme.css

assets/css/theme.css özel stil giriş noktanızdır. Tailwind ile derlenir; tüm Twig dosyalarındaki utility class'ları otomatik dahil edilir.

@layer components {
  .btn-primary {
    @apply px-6 h-form rounded-form font-secondary bg-primary text-white
           hover:opacity-90;
  }

  .card {
    @apply p-4 rounded-custom shadow-sm bg-white;
  }
}

@layer base {
  :root {
    --radius: 8px;
    --form-radius: 8px;
    --form-height: 2.8rem;
    --container: 1280px;
    --drawer-width: 100%;
    --body-bg-color: #ffffff;
  }

  body {
    background-color: var(--body-bg-color);
  }
}

Bu değişkenler panelden gelmez; theme.css içinde sizin tanımladığınız sabitlerdir. Tailwind kurulumu --radius'u rounded-custom, --form-radius'u rounded-form, --form-height'ı h-form class'larına bağlar; --container ve --drawer-width'i ise doğrudan CSS'te kullanırsınız:

<button class="rounded-form h-form px-6 bg-primary text-white">
  {{ t.add_to_cart }}
</button>

<div class="drawer" style="width: var(--drawer-width)">…</div>

JavaScript — theme.js

assets/js/theme.js özel JavaScript giriş noktanızdır. Vanilla JS yazabilir, global yardımcı fonksiyonları ve callback sistemini kullanabilirsiniz:

callbacks.cart.load.push(function (a, b, c) {
  console.log(a, b, c);
});

Global değişkenler, ON_PAGE_READY kalıbı ve blok verisine erişim için bkz. JavaScript'e Genel Bakış.

Görseller, fontlar, ikonlar

assets/ altında uygun alt klasörler açın — adlandırma serbesttir:

assets/
├── css/
├── js/
├── img/
│   ├── logo.svg
│   └── placeholder.png
└── icons/
    └── arrow-right.svg

Twig içinde çağırma:

<img src="{{ theme_asset('img/logo.svg') }}" alt="Logo">
<img src="{{ theme_asset('icons/arrow-right.svg') }}" alt="" aria-hidden="true">

Asset URL ve sürümleme

theme_asset() fonksiyonu, Twig içinde elle referansladığınız dosyalar için (görseller, ikonlar, ek JS modülleri…) URL üretir. theme.css ve theme.js için kullanmazsınız — onları T-SOFT yükler.

Fonksiyon üç şey yapar:

1. Mağazanın asset host'unu (CDN destekliyse CDN, değilse mağaza domain'i) URL'in başına ekler.
2. Dosya içeriği değiştiyse URL'e hash ekler — eski cache otomatik invalidate olur.
3. Cache-Control: public, max-age=31536000, immutable başlığı ile sonsuza dek cache'lenebilir hale getirir.

GET /themes/default/images/logo.svg?v=a1b2c3d4
Cache-Control: public, max-age=31536000, immutable

Yerel geliştirme

Tema dizininde tsoft theme dev ile yerel sunucu başlattığınızda asset'ler hot-reload edilir — bir CSS dosyası kaydettiğinizde sayfa yeniden yüklenmeden stil güncellenir.

cd example-tsoft-biz/my-theme
tsoft theme dev

Boyut bütçeleri

Performans için hedefler:

Bütçe aşımları için Chrome DevTools → Network panelinden derlenmiş asset boyutlarını izleyebilirsiniz. Detay için bkz. Performans.

En iyi uygulamalar

Sıradaki adım