​
Hemen Tema Genel Bakış

Hemen Tema, HemenThemes motoruyla uyumlu section tabanlı tema geliştirme ve ileride admin panelden yönetilecek low-code düzenleme yaklaşımının mimari başlangıç noktasıdır.
Son kullanıcı erişimi

Mağaza sahipleri içerik ve ayar yönetimine erişir. Tasarım, schema, section ve runtime kod alanları yalnızca geliştirici ve süperadmin kontrollü akışta açılmalıdır.

Tema builder kapsamı

Bu roadmap şu anda devasa canvas yatırımı yapmaz. İlk hedef storefront runtime, theme options, section schema export ve HemenBuilders app/script yüzeylerini doğru hazırlamaktır.

​
İçerik

Tasarım, schema ve runtime ayarlarında hazırladığınız bölüm ve bileşenleri bir araya getirerek tenant bazlı storefront deneyimini kontrol edebilirsiniz. Sayfa yapısını düzenleyebilir, bölüm sırasını değiştirebilir ve mağazaya göre farklı görsel kararlar alabilirsiniz.

​
Amaç

Headless vitrinler tek frontend kodunu kullanıp tenant’a göre farklı görünüm alabilir. Bu modelde frontend, backend’den gelen tema seçeneklerini runtime’da okur. Örnek kullanım:
  • Tek Next.js reposu ile çok mağazalı vitrin
  • Her mağaza için farklı logo ve renk
  • Tema editörü veya low-code builder entegrasyonu
  • Sektöre göre farklı anasayfa blok sırası

​
Tema seçenekleri

GET /theme/options endpointi tenant’a ait görsel ayarları döndürür. Örnek response: 
{
  "tenant": "velunamora",
  "logo_url": "https://cdn.hemenmagaza.com/velunamora/logo.svg",
  "favicon_url": "https://cdn.hemenmagaza.com/velunamora/favicon.svg",
  "colors": {
    "primary": "#0A0A0A",
    "accent": "#60CF00",
    "background": "#FFFFFF",
    "text": "#111827"
  },
  "font_family": "Inter",
  "homepage_sections": ["hero", "featured-products", "categories", "banners"]
}

​
Frontend uygulama

Next.js tarafında tema seçeneklerini layout seviyesinde okuyup CSS variables olarak basabilirsiniz. 
export function ThemeStyle({ theme }) {
  return (
    <style>{`
      :root {
        --hm-primary: ${theme.colors.primary};
        --hm-accent: ${theme.colors.accent};
        --hm-background: ${theme.colors.background};
        --hm-text: ${theme.colors.text};
      }
    `}</style>
  );
}

​
Tema editörü yazmak

Bir tema editörü geliştirirken önerilen model:
  1. Tenant’ın mevcut tema ayarlarını okuyun.
  2. Kullanıcı değişikliklerini draft state içinde tutun.
  3. Önizleme iframe’ine CSS variables gönderin.
  4. Kaydetmeden önce validasyon yapın.
  5. Publish anında backend’e tema ayarlarını yazın.
  6. Tenant cache invalidation sonucunu kullanıcıya gösterin.

​
Önemli güvenlik sınırı

Tema editörü hiçbir zaman başka tenant’ın medya, logo veya ayarlarını okuyamamalıdır. Her istek tenant bağlamı ve client scope kontrolünden geçmelidir.