Storefront Runtime (Canlı Vitrin)
Tenant host’ta StorefrontLayout, anasayfa ve /p/:slug render, navbar menü birleştirme, tema CSS ve sepet/checkout izolasyonu.
Bu sayfa, öğrencinin gördüğü canlı academy vitrininin nasıl render edildiğini açıklar. Builder ve taslak mantığı için Storefront Publishing ve Academy Visual Builder sayfalarına bakın.
Tenant çözümleme özeti
Section titled “Tenant çözümleme özeti”Dosya: app/lib/tenant.ts
getTenantByRequest(db, request)—Host/X-Forwarded-Hostüzerinden subdomain veyacustomDomaineşleşmesigetEffectiveHostname()— proxy/workers.dev URL sapmalarına karşı güvenli hostgetPublicSiteOrigin()— canonical ve OG URL üretimigetStorefrontBaseUrl()— ödeme sonrası yönlendirme tabanı
MVP notu: Kayıtlı subdomain/custom domain varsa tenant döner; subscriptionStatus !== "active" vitrin routing’ini şu an engellemez. Eğitmen paneli (instructor.academy.tsx) abonelik durumuna göre ayrıca kısıtlayabilir. Detay: Academy Modülü (Tenant/Storefront).
Merkezi layout: StorefrontLayout
Section titled “Merkezi layout: StorefrontLayout”Dosya: app/components/storefront/StorefrontLayout.tsx
Paylaşılan vitrin kabuğu:
academies.themeConfig(published) içinden blok listesi vesiteThemeokunur- Google Fonts +
buildAcademySiteThemeCss()ile:rootCSS değişkenleri enjekte edilir - Bloklar sırayla render edilir (
NavbarBlock,HeroBlock, …)
Navbar menü linkleri
Section titled “Navbar menü linkleri”- Eğitmen
navbar.settings.links[]doldurduysa yalnızca bu linkler kullanılır. - Liste boşsa
mergeStorefrontNavLinks()ile yayınlanmışacademy_pagesslug’larından varsayılan menü üretilir (/p/:slug).
Bu davranış, builder’da seçilen menü ile canlı vitrinin birebir örtüşmesini sağlar.
Anasayfa vs dinamik sayfa
Section titled “Anasayfa vs dinamik sayfa”| URL | Route dosyası | İçerik kaynağı |
|---|---|---|
/:lang (tenant host) | app/routes/_index.tsx | themeConfig.blocks (homepage) |
/p/:slug | app/routes/p.$slug.tsx | academy_pages.publishedContent → { blocks } |
Sayfa render’ında genelde global navbar + sayfa blokları + global footer birleştirilir (sayfa JSON’unda navbar/footer yoksa tema bloklarından eklenir). Builder önizlemesi aynı birleştirme mantığını kullanır.
Katalog ve mod
Section titled “Katalog ve mod”- Kurs listesi:
courses.all.tsx,_index.tsx—courses.academyId === tenant.idfiltresi - Kapalı LMS (
academyMode: closed): fiyat/CTA gizleme, portal girişi vurgusu — b2b-company
Auth ve ödeme yüzeyleri
Section titled “Auth ve ödeme yüzeyleri”- Giriş/kayıt: Academy Auth Pages
- Sepet/checkout: academy host’ta tenant bağlamı korunur; apex pazaryeri ile aynı route path’leri farklı katalog/ödeme bağlamı kullanabilir
Root tema enjeksiyonu
Section titled “Root tema enjeksiyonu”Dosya: app/root.tsx
Root loader tenant çözer; layout <head> içine temel marka CSS değişkenlerini yazar. Tam site teması vitrin sayfalarında StorefrontLayout veya auth shell ile genişletilir.
İlgili route’lar
Section titled “İlgili route’lar”- Route Haritası —
/p/:slug, builder-preview (yalnızca editör) - Yerelde Academy/Subdomain —
*.localhost:8787testi