İçeriğe geç
Obrolo
Mağazanı Ücretsiz Aç
HTML-first tema referansı

Dinamik alanlar ve şablon söz dizimi

Obrolo’nun HTML + Tailwind kaynağına güvenli biçimde verdiği tüm platform alanlarını, döngüleri, koşulları ve commerce form action’larını burada bulabilirsiniz.

LLM kısa rehberiLLM tam referansı
Platform alanı
340
Döngü kaynağı
44
Commerce action
4
Kaynak otoritesi: Bu referans versioned server-side compiler allowlist’ini yansıtır. Noktalı alanlar yalnız aşağıdaki listeden okunur; ORM nesnelerinde serbest alan gezinmesi yapılmaz. Envanterde bulunması her sayfada değer garantisi vermez: aktif route ve view-model bağlamında bulunmayan bir değer boş metin olarak render edilir.

250 platform alanı · 44 döngü · 4 action

01 · Başlangıç

Tam HTML dokümanı ile başlayın

Kaynak tam olarak bir <html>, <head>,<body> ve <main> içermeli; doctype ve viewport zorunludur. Tailwind sınıfları doğrudan class attribute’unda yazılır.

home.htmlHTML + Tailwind
<!doctype html>
<html lang="{store.locale}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{page.seo.title}</title>
  </head>
  <body class="bg-white text-slate-950">
    <main>
      <h1 class="text-4xl font-bold">{hero-title}</h1>

      <section
        data-ob-if="{show-featured}"
        data-ob-each="featuredProducts"
        data-ob-as="product"
        data-ob-limit="{featured-limit}"
      >
        <a href="{product.url}">{product.title}</a>
      </section>
    </main>
  </body>
</html>

{hero-title}, {show-featured} ve{featured-limit} özel alan olarak editörde otomatik oluşur; noktalı anahtarlar platform allowlist’inden çözülür.

02 · Önizleme

Sayfalar arası gezerken preview bağlamını koruyun

Önizleme, aynı mağaza hostuna giden iç bağlantıları imzalı preview rotasına dönüştürür. Tema içinde canlı mağaza domain’ini sabitlemek bu sınırı kırar; platform URL binding’leri ve aynı-origin göreli rotalar hem önizleme hem canlı yayın için güvenli sözleşmedir.

  1. 1İç rotalarda global.routes.*, link.href, child.href, product.url, page.product.url ve platformun sağladığı diğer URL binding’lerini kullanın.
  2. 2Sabit bir iç rota gerekiyorsa /collections/all gibi aynı-origin ve / ile başlayan göreli URL yazın.
  3. 3Mağazanın production domain’ini HTML içine sabitlemeyin; farklı hosta giden bağlantılar preview token’ını korumaz.
  4. 4Preview runtime aynı hosta çözülen iç bağlantıları /__ob/html-theme/preview/{token}/... biçimine güvenli şekilde çevirir.
  5. 5Önizleme token’ı 30 dakika geçerlidir; süresi dolduğunda admin’den yeni önizleme başlatın.

Doğru: <a href="{global.routes.home}">, <a href="{link.href}">, <a href="/collections/all">

Yanlış: <a href="https://magaza-domaini.com/collections/all">

03 · Editör girdileri

Kendi dinamik alanlarınızı tanımlayın

Nokta içermeyen {alan-adi} placeholder’ı yeni bir içerik alanı üretir. Anahtar küçük harfle başlamalı ve yalnız küçük harf, rakam ve tire içermelidir:^[a-z][a-z0-9-]*$.

text

Metin

textarea

Uzun metin

image

Görsel

url

URL

boolean

Açık / kapalı

number

Sayı

category

Kategori

products

Ürün listesi

Metin içeriği varsayılan olarak text; görsel src ve videoposter alanları image; bağlantı href alanıurl olarak çıkarılır. Gerekirse data-ob-input-type ile açıkça tip verin. Aynı anahtar farklı tiplerde kullanılırsa derleme reddedilir.
TipKaydedilen değer
text / textarea / urlstring
booleantrue / false
numberfinite number
image{ key, url }
categoryTenant-owned kategori ID
productsTenant-owned ürün ID[]

04 · Composition

Header ve footer’ı bir kez yazın

Admin’de Ortak Bölümler çalışma alanında güvenli bir HTML fragment’ı oluşturun; ardından sayfa kaynağına boş ve açıkça kapanan<ob-include name="header"></ob-include> etiketini ekleyin. Include, yalnız <body> veya <main> elementinin doğrudan çocuğu olabilir ve aynı bölüm bir sayfada yalnız bir kez kullanılabilir.

Bölüm adedi

16

Tek kaynak

64 KiB

Toplam kaynak

512 KiB

1. Ortak bölüm kaynağı

Bölüm anahtarı ^[a-z][a-z0-9-]{0,39}$ kuralına uyar. Bölüme ait özel alanlar, çakışmayı önlemek için bölüm adıyla başlamalıdır:{header-promo-text}.

header.htmlHTML + Tailwind
<header class="border-b border-stone-200 bg-white">
  <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
    <a href="{global.routes.home}" class="font-black">{global.site.name}</a>
    <p class="text-sm text-stone-600">{header-promo-text}</p>
    <a href="{global.routes.cart}" class="font-medium">
      Sepet <span data-ob-cart-count></span>
    </a>
  </div>
</header>

2. Sayfada include edin

Kaynak, compile-time’da sayfaya genişletilir ve immutable IR’a bağlanır. Ortak bölüm kaynağı değişince onu kullanan sayfalar birlikte doğrulanıp yeniden derlenir. Bölümün locale değerleri ise preview/publication sırasında sayfa değerleriyle merge edilir; yalnız değer değişikliği IR veya CSS’i yeniden derlemez.

home.htmlHTML + Tailwind
<!doctype html>
<html lang="{store.locale}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{page.seo.title}</title>
  </head>
  <body class="bg-white text-stone-950">
    <ob-include name="header"></ob-include>
    <main>
      <h1>{page.title}</h1>
    </main>
  </body>
</html>
Ortak bölüm tam doküman değildir; doctype, html, head, body veya main taşıyamaz. Başka bir ob-include, commerce data-ob-action formu ya da nested include kullanamaz. Composition sürümleri: html-theme-composition-v0, html-theme-composition-v1.

04 · Görsel düzenleme

Bölümler, hazır bileşenler ve renkler

HTML/Tailwind kaynak kodu düzenlemenin temelidir. Görsel editör güvenli bölümleri aynı üst element içinde sıralar; desteklenen alanları ekler, çoğaltır, kaldırır veya gizler. Değişiklik seçili kaynak aralığına uygulanır; diğer HTML, yorumlar ve biçimlendirme korunur. Döngü, form, commerce ve ortak parça sınırları işlemleri kısıtlayabilir; her element serbestçe taşınabilir değildir. Tüm değişiklikler sunucudaki compiler’dan geçer ve draft üzerinde çalışır; canlı site yayınlama sonrası güncellenir.

data-ob-section, data-ob-section-label, data-ob-component ve data-ob-section-hidden yalnız section, article, div, header ve footer üzerinde sabit değerlerle kullanılabilir. Ad, bileşen ve gizleme metadata’sı aynı elementte bölüm kimliği gerektirir. Mevcut kodda metadata zorunlu değildir; editör tanıdığı güvenli bölümlere ilk değişiklikte kalıcı kimlik ekler. Önizlemenin data-ob-preview-* niteliklerini kaynak koda yazmayın.

Hazır FAQ ve ürün açıklaması tasarımları kütüphaneden sabit sürümlü HTML/Tailwind kopyası olarak eklenir; data-ob-component harici kod yüklemez. Tasarım değiştirirken aynı ad ve tipteki içerik alanları korunur. Çoğaltma bağımsız bölüm, HTML ve alan kimlikleri üretir. Ürün verisi kullanan bileşenler platform binding’lerini korur.

Tema paleti ve bölüm renkleri

Palet arka plan, metin ve vurgu için #RRGGBB renkleri kullanır. Kaynakta [--ob-color-background:#ffffff], [--ob-color-text:#0f172a] ve [--ob-color-accent:#047857] statik Tailwind sınıflarıyla saklanır. Bu değerleri tasarımda bg-[var(--ob-color-background,#ffffff)], text-[color:var(--ob-color-text,#0f172a)] ve text-[color:var(--ob-color-accent,#047857)] gibi sınıflarla kullanın.

Tema paleti sekiz sayfanın body kapsamına uygulanır; ortak parçalar ve bölümler bu değişkenleri miras alır. Bölüm rengi yalnız seçili bölümde değişkeni ezer. Sabit renkli alt element sınıfları otomatik dönüştürülmez; palet, değişkenleri kullanan veya rengi miras alan alanları etkiler. “Tema rengini kullan”, bölümün ilgili renk override’ını ve editörün eklediği yardımcı sınıfı kaldırır. Ham CSS, style attribute’u, JavaScript veya dinamik Tailwind placeholder’ı eklenmez.

05 · Platform bindings

Obrolo’nun sağladığı tüm alanlar

Kullanım biçimi {page.product.title} şeklindedir. Bir döngününproduct, variant, item veya linkalanları yalnız ilgili alias kapsamındayken değer taşır. safe-html yalnız platformun sanitize edip allowlist’e aldığı alanlarda kullanılabilir; özel alanlar hiçbir zaman raw HTML olarak render edilmez.

Global mağaza

Runtime view-model sağladığında site, footer, rota ve navigasyon verileri.

global.site.nametext
global.site.titletext
global.site.descriptiontext
global.site.logoimage
global.site.logo.alttext
global.site.homeUrlurl
global.footer.descriptiontext
global.footer.copyrighttext
global.routes.homeurl
global.routes.searchurl
global.routes.carturl
global.routes.accounturl
global.announcement.enabledboolean

Mağaza

Aktif mağaza ve yerel ayar bilgileri.

store.nametext
store.localetext
store.directiontext
store.logoimage
store.homeUrlurl

Tema

Runtime bağlamında mevcut olduğunda tema kimliği ve sürümü.

theme.idtext
theme.versiontext

Sayfa

Aktif sayfanın SEO, içerik, ürün ve koleksiyon bağlamı.

page.titletext
page.seoTitletext
page.seoDescriptiontext
page.seo.titletext
page.seo.descriptiontext
page.seo.canonicalUrlurl
page.seo.robotstext
page.hero.titletext
page.bodysafe-html
page.messagetext
page.querytext
page.homeLink.labeltext
page.homeLink.hrefurl
page.catalogIndexUrlurl
page.clearFiltersUrlurl
page.selectedSorttext
page.productPage.totalnumber
page.productPage.pagenumber
page.productPage.hasItemsboolean
page.productPage.hasNoItemsboolean
page.productPage.hasPreviousboolean
page.productPage.hasNextboolean
page.productPage.previousUrlurl
page.productPage.nextUrlurl
page.featuredProducts.hasItemsboolean
page.featuredProducts.hasNoItemsboolean
page.product.idtext
page.product.slugtext
page.product.urlurl
page.product.titletext
page.product.descriptionHtmlsafe-html
page.product.imageimage
page.product.price.currenttext
page.product.price.compareAttext
page.product.inStockboolean
page.product.onSaleboolean
page.product.defaultVariantIdtext
page.product.detailSummary.titletext
page.product.detailSummary.copytext
page.product.hasDetailSummaryboolean
page.product.hasNoDetailSummaryboolean
page.product.hasDetailSummaryTitleboolean
page.product.hasNoDetailSummaryTitleboolean
page.product.hasDetailSummaryCopyboolean
page.product.hasNoDetailSummaryCopyboolean
page.product.hasDetailSpecsboolean
page.product.hasNoDetailSpecsboolean
page.product.hasDetailRowsboolean
page.product.hasServiceItemsboolean
page.product.badgeLabeltext
page.product.detailTitletext
page.product.storyTitletext
page.product.faqTitletext
page.product.recommendationsTitletext
page.product.hasFeaturesboolean
page.product.hasPolicyItemsboolean
page.product.hasStoryBlocksboolean
page.product.hasSupportItemsboolean
page.product.hasFaqsboolean
page.product.hasTestimonialsboolean
page.product.hasPurchaseSignalsboolean
page.product.hasComparisonboolean
page.product.hasProofboolean
page.product.hasPreludeboolean
page.product.hasCampaignboolean
page.product.hasSpotlightsboolean
page.product.hasSocialboolean
page.product.hasNewsletterboolean
page.product.prelude.titletext
page.product.prelude.copytext
page.product.prelude.imageimage
page.product.prelude.hasImageboolean
page.product.proof.titletext
page.product.proof.copytext
page.product.proof.disclaimertext
page.product.testimonials.titletext
page.product.testimonials.subtitletext
page.product.campaign.titletext
page.product.campaign.copytext
page.product.campaign.ctaLabeltext
page.product.campaign.imageimage
page.product.campaign.hasImageboolean
page.product.comparison.titletext
page.product.comparison.standardLabeltext
page.product.comparison.productLabeltext
page.product.newsletter.titletext
page.product.newsletter.copytext
page.product.newsletter.placeholdertext
page.product.newsletter.buttonLabeltext
page.product.social.titletext
page.product.vendortext
page.product.hasVendorboolean
page.product.hasNoVendorboolean
page.product.skutext
page.product.hasSkuboolean
page.product.badgesLabeltext
page.product.hasBadgesboolean
page.product.hasNoBadgesboolean
page.product.storyImageimage
page.product.galleryCountnumber
page.product.hasMultipleImagesboolean
page.product.sizeGuideimage
page.product.hasSizeGuideboolean
page.product.colorOptionCountnumber
page.product.colorOptionsLabeltext
page.product.sizeOptionCountnumber
page.product.sizeOptionsLabeltext
page.product.outOfStockboolean
page.collection.idtext
page.collection.titletext
page.collection.descriptionHtmlsafe-html
page.collection.urlurl
page.contactForm.submitLabeltext
page.hasContactFormboolean
page.product.campaign.hasImageOnlyboolean
page.product.campaign.hasVideoboolean
page.product.campaign.videoimage
page.product.faqImageimage
page.product.featureComposition.eyebrowtext
page.product.featureComposition.subtitletext
page.product.featureComposition.titletext
page.product.hasFaqImageboolean
page.product.hasFeatureCompositionboolean
page.product.hasMarqueeItemsboolean
page.product.hasRitualboolean
page.product.hasShowcaseboolean
page.product.hasShowcaseImagesboolean
page.product.hasShowcaseVideosboolean
page.product.hasSocialChipsboolean
page.product.hasSocialImagesboolean
page.product.hasSocialVideosboolean
page.product.hasStandaloneFeaturesboolean
page.product.prelude.ctaLabeltext
page.product.ritual.backgroundimage
page.product.ritual.eyebrowtext
page.product.showcase.titletext

Ürün / döngü ürünü

Ürün bağlamı veya product alias'ı içindeki ürün verileri.

product.idtext
product.slugtext
product.urlurl
product.titletext
product.descriptionHtmlsafe-html
product.imageimage
product.pricenumber
product.priceFormattedtext
product.compareAtPricenumber
product.compareAtPriceFormattedtext
product.inStockboolean
product.onSaleboolean
product.defaultVariantIdtext
product.hasImageboolean
product.hasNoImageboolean
product.vendortext
product.hasVendorboolean
product.hasNoVendorboolean
product.hasBadgeboolean
product.primaryBadgetext
product.outOfStockboolean
product.hasDiscountboolean
product.discountLabeltext
product.hasColorSwatchesboolean

Kategori

Aktif kategori bağlamı.

category.idtext
category.titletext
category.descriptiontext
category.urlurl

Koleksiyon

Aktif koleksiyon bağlamı.

collection.idtext
collection.titletext
collection.descriptiontext
collection.urlurl

Arama

Arama sorgusu ve başlığı.

search.querytext
search.titletext

Sepet

Private cart bağlamı sağlandığında istek anındaki sepet özeti.

cart.idtext
cart.itemCountnumber
cart.hasItemsboolean
cart.hasNoItemsboolean
cart.subtotalFormattedtext
cart.shippingFormattedtext
cart.totalFormattedtext

Müşteri

Özel sayfalardaki sınırlı müşteri durumu.

customer.loggedInboolean
customer.firstNametext

Ödeme

Platformun sağladığı yasal sözleşme bağlamı.

checkout.legal.versiontext
checkout.legal.preInformationUrlurl
checkout.legal.distanceSalesUrlurl
checkout.legal.privacyUrlurl
checkout.payment.methodtext

Sayfalama

Liste sayfalarının sayfa ve rota bilgileri.

pagination.currentPagenumber
pagination.totalPagesnumber
pagination.previousUrlurl
pagination.nextUrlurl

Sepet satırı

item alias'ı içindeki sepet satırı verileri.

item.idtext
item.lineKeytext
item.titletext
item.quantitynumber
item.imageimage
item.urlurl
item.priceFormattedtext
item.totalFormattedtext
item.selectionsLabeltext

Varyant

variant alias'ı içindeki ürün varyantı verileri.

variant.idtext
variant.titletext
variant.priceFormattedtext
variant.availableboolean

Navigasyon bağlantısı

link alias'ı içindeki menü bağlantıları.

link.labeltext
link.hrefurl
link.titletext
link.hasChildrenboolean
link.isLeafboolean

Alt navigasyon bağlantısı

link.children döngüsündeki tek seviyeli alt menü bağlantıları.

child.labeltext
child.hrefurl
child.titletext
child.hasChildrenboolean
child.isLeafboolean

Duyuru mesajı

global.announcement.messages döngüsündeki güvenli duyuru metni ve bağlantısı.

announcement.texttext
announcement.hrefurl
announcement.hasLinkboolean

Filtre

page.filterSchema döngüsündeki yayınlanmış filtre parametresi, aralık ve seçenek durumu.

filter.labeltext
filter.valuetext
filter.countnumber
filter.idtext
filter.parametertext
filter.controltext
filter.minnumber
filter.maxnumber
filter.selectedMinnumber
filter.selectedMaxnumber
filter.isRangeboolean
filter.isColorboolean
filter.isOptionsboolean

Yayın

Runtime bağlamında mevcut olduğunda immutable yayın bilgileri.

release.idtext
release.themeIdtext
release.themeVersiontext

06 · Yapısal bindings

Döngüler, koşullar ve filtreler

Döngü için data-ob-each ve kaynağın zorunlu alias’ınıdata-ob-as birlikte kullanın. Döngüler en fazla 3 seviye iç içe geçebilir ve her döngü en fazla 50 öğe render eder.

Liste kaynağıZorunlu alias
productsproduct
featuredProductsproduct
category.productsproduct
collection.productsproduct
search.resultsproduct
product.colorSwatchesswatch
product.gallerymedia
product.variantsvariant
page.relatedProductsproduct
page.filterSchemafilter
filter.valuesvalue
page.sortOptionsoption
page.breadcrumbsbreadcrumb
page.product.breadcrumbsbreadcrumb
page.product.optionDefinitionsoption
page.product.detailSpecsspec
page.product.detailRowsrow
page.product.serviceItemsservice
page.product.featuresfeature
page.product.policyItemspolicy
page.product.storyBlocksstory
page.product.supportItemssupport
page.product.faqsfaq
page.product.testimonialstestimonial
page.product.purchaseSignalssignal
page.product.comparisonRowscomparison
page.product.proofStatsstat
page.product.spotlightsspotlight
page.product.socialImagesmedia
page.product.socialVideosmedia
page.product.socialChipsannouncement
page.product.marqueeItemsannouncement
page.product.featureCompositionImagesmedia
page.product.showcaseImagesmedia
page.product.showcaseVideosmedia
page.product.showcaseItemsfeature
option.valuesvalue
cart.itemsitem
page.productPage.itemsproduct
global.navigation.headerlink
global.navigation.footerlink
global.announcement.messagesannouncement
link.childrenchild
child.childrengrandchild

Koşul

data-ob-if="{show-banner}" boolean özel alanı;data-ob-if="product.inStock" ise allowlist’teki boolean platform alanını kullanır. Yalnız değer tam olarak true olduğunda render edilir.

Sıralama ve filtreler

Sabit data-ob-sort değerleri: best-selling, newest, oldest, price-asc, price-desc, title-asc, title-desc. Bu attribute ziyaretçinin seçtiği query sırasını temsil etmez. Limit, kategori ve ürün ID filtreleri yalnız kendi tipindeki tek özel alanı kabul eder.

data-ob-section"faq-main"

Kalıcı bölüm kimliği: küçük harfle başlar; küçük harf, rakam ve tire ile 1–120 karakter. Dahil edilen ortak parçalarla birlikte sayfada benzersiz olmalıdır.

data-ob-section-label"Sıkça sorulan sorular"

Editörde görünen ad: boş olmayan, en fazla 120 karakterlik sabit metin; kontrol karakteri ve süslü parantez kabul edilmez.

data-ob-component"htc-faq-editable-accordion@1"

Eklenen hazır bileşenin sabit sürüm kimliği. Kimlik küçük harfle başlar; küçük harf, rakam ve tire ile 1–80 karakter, @ sonrası başında sıfır olmayan 1–6 haneli pozitif sürümdür.

data-ob-section-hidden"true"

Bölümü canlı render’dan çıkarır; editör önizlemesinde erişilebilir tutar. Göstermek için attribute’u kaldırın; false geçersizdir. Form veya ortak parça içeren bölüm gizlenemez.

data-ob-bind"text:{hero-title}"

İzinli hedefler: text, href, src, poster, alt, title, value ve content.

data-ob-if"{show-banner}"

Boolean özel alan veya allowlist platform boolean alanı true ise render eder.

data-ob-each"featuredProducts"

Admin'de öne çıkarılan ürünler üzerinde sınırlı döngü kurar.

data-ob-navigation-items[]

Header/footer bağlantı editörünün tema kaynağına yazdığı sabit JSON menü listesidir. Yalnız global.navigation.header veya global.navigation.footer döngüsünde kullanılır; boş liste menüyü boş gösterir, attribute kaldırılırsa otomatik menüye dönülür. label, href ve isteğe bağlı children kabul edilir; en fazla 3 seviye, her listede 50 ve toplam 200 bağlantı olabilir. İç içe başka döngü, form veya commerce action içinde kullanılamaz.

data-ob-source-overrides[]

İçerik kaynağı editörünün aynı elementteki mevcut text, href, src veya alt bağlantıları için yazdığı sabit JSON seçimleridir; element başına en fazla 32 seçim kabul edilir. manual güvenli bir sabit değer, platform aynı tipte izin verilen ürün/mağaza alanı kullanır. page.product.image için galeri sırası 1–24 olabilir; bulunmayan sıra boş render edilir. Özgün binding korunur; seçim kaldırılırsa ona dönülür. Katalog veya dil değerleri değişmez; döngü, form ve korunan kontrollerde kullanılamaz.

data-ob-as"product"

Döngü kaynağının zorunlu alias'ını belirtir.

data-ob-action"cart.add"

Formu sabit platform commerce action'ına bağlar.

data-ob-sort"price-asc"

Listeyi tema tarafından sabit sırada render eder; ziyaretçi kontrollü PLP sıralaması değildir.

data-ob-limit"{featured-limit}"

number tipinde tek özel alan kabul eder.

data-ob-category"{featured-category}"

category tipinde tek özel alan kabul eder.

data-ob-product-ids"{featured-products}"

products tipinde tek özel alan kabul eder.

data-ob-input-type"textarea"

Element içindeki özel alanın editör tipini açıkça belirler.

data-ob-cart-count""

Public artifact’a kişisel veri koymadan sepet adedini merkezi storefront runtime ile günceller.

data-ob-mega-menu""

Tek trigger ve panel taşıyan platform kontrollü mega menü köküdür.

data-ob-mega-trigger""

button[type=button] üzerinde kullanılır; ARIA state’ini runtime yönetir.

data-ob-mega-panel""

Kök içindeki tek mega menü panelini işaretler.

data-ob-product-gallery""

Yalnız ürün sayfasında, platform runtime’ının yöneteceği galeri kökünü işaretler.

data-ob-gallery-track"main"

Galeri kökü içindeki benzersiz main, rail veya viewport track rolünü belirtir.

data-ob-gallery-slide""

Track içinde doğrudan product.gallery döngüsünü media alias’ıyla tekrarlar; indeks ve aria-current runtime’a aittir.

data-ob-gallery-status""

Aktif görsel sayacını platform runtime’ının güncelleyeceği tek durum alanıdır.

data-ob-gallery-empty""

Galeri görseli kalmadığında runtime’ın göstereceği tek boş durum alanıdır.

data-ob-filter-form""

Koleksiyon veya arama formunu güvenli, query-aware katalog runtime’ına bağlar.

data-ob-catalog-index"{page.catalogIndexUrl}"

Yalnız yayınla birlikte üretilen aynı-origin katalog indeksine bağlanır.

data-ob-collection-id"{page.collection.id}"

Koleksiyon sayfasındaki sonuç kapsamını sabitler; arama sayfasında * kullanılır.

data-ob-products""

Filtre veya sıralama sonucunda platformun güvenli ürün kartlarını yerleştireceği tek konteynerdir.

data-ob-result-count""

Sonuç adedinin platform tarafından güncelleneceği metin alanıdır.

data-ob-empty-state""

Sonuç kalmadığında platformun göstereceği boş durum alanıdır.

data-ob-filter-key"{filter.parameter}"

Filtre kontrolünü yayınlanmış allowlist anahtarına bağlar.

data-ob-filter-value"{value.value}"

Filtre kontrolünün güvenli değerini facet sonucu ile eşler.

data-ob-filter-count""

Facet sayısının katalog sorgusundan sonra güncelleneceği alandır.

data-ob-card-class"sf-product-card"

Platformun yeniden ürettiği ürün kartında korunacak statik, derleyici denetimli sınıfları belirtir.

data-ob-sort-control""

Katalog sıralama select'ini query-aware merkezi runtime'a bağlar; tema yalnız HTML ve sınıfları belirler.

data-ob-quick-add""

data-product-slug taşıyan ürün kartı Hızlı Ekle köküdür; varyant ve sepet işlemi platforma aittir.

data-ob-quick-add-trigger""

Hızlı Ekle panelini açan button[type=button] işaretidir.

data-ob-quick-add-panel""

Temanın tasarladığı ve runtime'ın görünürlüğünü yönettiği Hızlı Ekle panelidir.

data-ob-quick-add-title""

Runtime'ın seçilecek varyant boyutuna göre güncellediği başlıktır.

data-ob-quick-add-options""

Stoktaki varyant seçeneklerinin güvenli button olarak yerleştirileceği tasarım alanıdır.

data-ob-quick-add-close""

Hızlı Ekle panelini kapatan button[type=button] işaretidir.

data-ob-quick-add-status""

Yükleme ve sepete ekleme sonucunun merkezi runtime tarafından yazıldığı canlı durum alanıdır.

07 · PLP sözleşmesi

Fiyat filtresi ve ziyaretçi kontrollü sıralama

Koleksiyon ve arama sayfalarında data-ob-each="products" ile çizilen liste, standart bir GET formunun query parametreleriyle yeniden render edilir. Bunun için bir data-ob-action yoktur. data-ob-sort-control, yalnız name="sort" taşıyan select’i değişince formu gönderen opsiyonel progressive-enhancement hook’udur; JavaScript olmadan Uygula düğmesi aynı sözleşmeyi çalıştırır.

Query alanıAnlamı
qArama metni; en fazla 120 karakter.
sortYayınlanmış allowlist içindeki sıralama anahtarı.
page1 tabanlı sayfa; varsayılan 1.
pageSizeSayfa başına ürün; public gateway üst sınırı 48.
f.price.minGenel minimum fiyat; para biriminin ana biriminde.
f.price.maxGenel maksimum fiyat; para biriminin ana biriminde.
filter.parameterKategoriye yayınlanan dinamik parametre; ör. f.fiyat veya f.renk.

Desteklenen sort değerleri

relevance, best_selling, newest, oldest, price_asc, price_desc, title_asc, title_desc. best_selling, yayının oluşturulduğu anda kapanan son 30 günlük başarılı sipariş adet sırasıdır. Eşitlikler gelir, son satış ve sabit ürün kimliğiyle çözülür.

Genel fiyat alanı f.price.min/f.price.max’tır ve değerler699.90 gibi ana para birimindedir. Kategori şeması f.fiyat gibi özel bir anahtar yayınladıysa, page.filterSchema içindekifilter.parameter otoritedir; aralık input adlarını{filter.parameter}.min ve {filter.parameter}.max kurun.

collection.htmlHTML + Tailwind
<!doctype html>
<html lang="{store.locale}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{page.seo.title}</title>
  </head>
  <body>
    <main>
      <h1>{page.collection.title}</h1>
      <form action="" method="get" data-ob-filter-form data-ob-catalog-index="{page.catalogIndexUrl}" data-ob-collection-id="{page.collection.id}">
        <span data-ob-result-count>{page.productPage.total} ürün</span>
        <fieldset data-ob-each="page.filterSchema" data-ob-as="filter">
          <legend>{filter.label}</legend>
          <div data-ob-if="filter.isRange">
            <label>Minimum <input type="number" name="{filter.parameter}.min" min="{filter.min}" max="{filter.max}" value="{filter.selectedMin}"></label>
            <label>Maksimum <input type="number" name="{filter.parameter}.max" min="{filter.min}" max="{filter.max}" value="{filter.selectedMax}"></label>
          </div>
          <label data-ob-if="filter.isOptions" data-ob-each="filter.values" data-ob-as="value">
            <input type="checkbox" name="{filter.parameter}" value="{value.value}" data-ob-filter-key="{filter.parameter}" data-ob-filter-value="{value.value}">
            {value.label} <span data-ob-filter-count>({value.count})</span>
          </label>
        </fieldset>
        <label>
          Sırala
          <select name="sort" data-ob-sort-control>
            <option data-ob-each="page.sortOptions" data-ob-as="option" data-ob-if="option.selected" value="{option.value}" selected>{option.label}</option>
            <option data-ob-each="page.sortOptions" data-ob-as="option" data-ob-if="option.unselected" value="{option.value}">{option.label}</option>
          </select>
        </label>
        <button type="submit">Uygula</button>
        <section data-ob-products data-ob-card-class="sf-product-card">
          <article class="sf-product-card" data-ob-each="products" data-ob-as="product">
          <a href="{product.url}"><h2>{product.title}</h2><span>{product.priceFormatted}</span></a>
          </article>
        </section>
        <section data-ob-empty-state hidden>Bu filtreye uygun ürün bulunamadı.</section>
      </form>
    </main>
  </body>
</html>
İki sözleşmeyi karıştırmayın: data-ob-sort="price-asc"derleme/render sırasında sabit loop sırası verir; ziyaretçinin seçimi için?sort=price_asc kullanılır. Query değerleri underscore, sabit loop değerleri tire biçimindedir.

08 · Hazır bileşenler

Güvenli hareket ve mega menü tarifleri

Bu parçalar HTML/Tailwind tema dokümanınızın <body> bölümüne kopyalanabilir. Hareketler kullanıcı JavaScript’i veya custom CSS çalıştırmaz; sürümlü compiler preset’i ve first-party storefront runtime’ı tarafından sağlanır.

animate-ob-marqueeanimate-ob-marquee-fastanimate-ob-marquee-slowanimate-ob-waveanimate-ob-wave-fastanimate-ob-wave-slowob-motion-reverseob-motion-pausedhover:ob-motion-pausedfocus-within:ob-motion-pausedpeer-checked:ob-motion-paused

Dolu ve boş sepet görünümü

Sepet ve ödeme sayfalarında cart.hasItems, sepette en az bir satır olduğunda; cart.hasNoItems, sepet boşken true olur. data-ob-if ile ilgili bölümü gösterin. Taslak önizlemesinde sepet boştur; canlıda müşterinin oturumuna bağlı sepet kullanılır.

cart-empty-state.htmlHTML + Tailwind
<section data-ob-if="cart.hasItems">
  <p>Sepetinizde {cart.itemCount} ürün var.</p>
</section>
<section data-ob-if="cart.hasNoItems">
  <p>Sepetiniz henüz boş.</p>
  <a href="{global.routes.home}">Alışverişe başla</a>
</section>

Dinamik mega menü + native mobil menü

Header navigasyonunu DB'den okur. Masaüstünde platform runtime'ı; mobilde details/summary kullanır.

dynamic-mega-menu.htmlHTML + Tailwind
<header class="relative border-b border-stone-200 bg-white">
  <nav class="mx-auto hidden max-w-7xl items-center gap-8 px-6 py-4 lg:flex" aria-label="Ana menü">
    <div data-ob-each="global.navigation.header" data-ob-as="link">
      <div data-ob-if="link.hasChildren" data-ob-mega-menu class="relative">
        <button type="button" data-ob-mega-trigger class="inline-flex items-center gap-2 py-2 font-medium">
          {link.label}<span aria-hidden="true">⌄</span>
        </button>
        <div data-ob-mega-panel class="absolute left-0 top-full z-40 min-w-64 rounded-xl border border-stone-200 bg-white p-3 shadow-xl">
          <a
            data-ob-each="link.children"
            data-ob-as="child"
            href="{child.href}"
            title="{child.title}"
            class="block rounded-lg px-3 py-2 hover:bg-stone-100"
          >{child.label}</a>
        </div>
      </div>
      <a data-ob-if="link.isLeaf" href="{link.href}" class="py-2 font-medium">{link.label}</a>
    </div>
  </nav>

  <nav class="space-y-2 px-4 py-3 lg:hidden" aria-label="Mobil menü">
    <div data-ob-each="global.navigation.header" data-ob-as="link">
      <details data-ob-if="link.hasChildren" class="rounded-lg border border-stone-200 px-3 py-2">
        <summary class="cursor-pointer font-medium">{link.label}</summary>
        <div class="mt-2 space-y-1 border-t border-stone-100 pt-2">
          <a
            data-ob-each="link.children"
            data-ob-as="child"
            href="{child.href}"
            class="block rounded-md px-2 py-2 hover:bg-stone-100"
          >{child.label}</a>
        </div>
      </details>
      <a data-ob-if="link.isLeaf" href="{link.href}" class="block rounded-lg px-3 py-2">{link.label}</a>
    </div>
  </nav>
</header>

DB duyuru marquee'si + erişilebilir duraklatma

Altı mesaja kadar duyuruyu iki kez render ederek kesintisiz akış kurar; kullanıcı checkbox ile hareketi durdurabilir.

announcement-marquee.htmlHTML + Tailwind
<section data-ob-if="global.announcement.enabled" class="overflow-hidden bg-stone-950 px-4 py-3 text-white">
  <input id="announcement-pause" type="checkbox" class="peer ml-auto h-4 w-4">
  <label for="announcement-pause" class="ml-2 cursor-pointer text-xs">Akışı durdur</label>
  <div class="mt-2 flex w-max animate-ob-marquee peer-checked:ob-motion-paused hover:ob-motion-paused focus-within:ob-motion-paused">
    <div class="shrink-0 pr-10" data-ob-each="global.announcement.messages" data-ob-as="announcement">
      <span class="whitespace-nowrap">{announcement.text}</span>
    </div>
    <div aria-hidden="true" class="shrink-0 pr-10" data-ob-each="global.announcement.messages" data-ob-as="announcement">
      <span class="whitespace-nowrap">{announcement.text}</span>
    </div>
  </div>
</section>

Dört katmanlı hareketli footer dalgası

Inline SVG güvenli kalır; hareket her SVG'yi saran platform animasyonlu div üzerinde çalışır.

layered-footer-wave.htmlHTML + Tailwind
<footer class="relative mt-24 bg-[#25140c] px-6 pb-12 pt-24 text-stone-100">
  <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 -top-16 h-20 overflow-hidden">
    <div class="absolute -left-[90px] top-0 w-[calc(100%+180px)] animate-ob-wave-slow opacity-25">
      <svg viewBox="0 0 1440 120" class="block h-20 w-full" preserveAspectRatio="none"><path fill="#d6d3d1" d="M0 64C240 16 480 112 720 64s480-48 720 0v56H0Z"></path></svg>
    </div>
    <div class="absolute -left-[90px] top-2 w-[calc(100%+180px)] animate-ob-wave ob-motion-reverse opacity-35">
      <svg viewBox="0 0 1440 120" class="block h-20 w-full" preserveAspectRatio="none"><path fill="#a8a29e" d="M0 54c240 52 480-36 720 10s480 42 720-8v64H0Z"></path></svg>
    </div>
    <div class="absolute -left-[90px] top-5 w-[calc(100%+180px)] animate-ob-wave-fast opacity-55">
      <svg viewBox="0 0 1440 120" class="block h-20 w-full" preserveAspectRatio="none"><path fill="#78716c" d="M0 68c240-38 480 34 720-2s480-30 720 8v46H0Z"></path></svg>
    </div>
    <div class="absolute -left-[90px] top-8 w-[calc(100%+180px)] animate-ob-wave-slow ob-motion-reverse">
      <svg viewBox="0 0 1440 120" class="block h-20 w-full" preserveAspectRatio="none"><path fill="#25140c" d="M0 66c240 38 480-30 720 6s480 34 720-4v52H0Z"></path></svg>
    </div>
  </div>
  <div class="mx-auto max-w-7xl">
    <p class="text-sm text-stone-300">{global.footer.copyright}</p>
  </div>
</footer>

Genel avantaj / kampanya şeridi

Özel editör alanlarıyla yönetilen üç mesajı, ikinci grubun erişilebilirlik ağacından gizlendiği yavaş bir şeritte tekrarlar.

benefits-marquee.htmlHTML + Tailwind
<section class="overflow-hidden border-y border-stone-200 bg-stone-50 py-4">
  <div class="flex w-max animate-ob-marquee-slow hover:ob-motion-paused">
    <div class="flex shrink-0 gap-12 pl-6 pr-12 font-medium">
      <span>{benefit-one}</span><span>{benefit-two}</span><span>{benefit-three}</span>
    </div>
    <div aria-hidden="true" class="flex shrink-0 gap-12 pl-6 pr-12 font-medium">
      <span>{benefit-one}</span><span>{benefit-two}</span><span>{benefit-three}</span>
    </div>
  </div>
</section>

Mega menü işaretleri presence-only’dir ve değer alamaz. Runtime ARIA state’ini, Escape, dışarı tıklama, focus ve touch davranışını kendisi yönetir. Hareket sınıflarıprefers-reduced-motion etkin olduğunda otomatik durur.

09 · Commerce

JavaScript olmadan form action’ları

data-ob-action yalnız <form> üzerinde kullanılır. Formunmethod ve action attribute’larını tema yazmaz; compiler sabit, same-origin endpoint’i ve güvenlik token’larını üretir.

ActionPlatform endpoint’iSayfaZorunlu alanlar
cart.add/v1/storefront/actions/cart/addproductproductSlug={page.product.slug} veya {product.slug}; quantity
cart.update/v1/storefront/actions/cart/updatecartlineKey={item.lineKey}; quantity={item.quantity}
cart.remove/v1/storefront/actions/cart/removecartlineKey={item.lineKey}
checkout.start/v1/storefront/actions/checkout/startcheckoutİletişim, teslimat ve compiler tarafından zorunlu tutulan yasal onay alanları
checkout.start zorunlu alanlarının tam listesi
contact.emailcontact.firstNamecontact.lastNamecontact.phoneshipping.line1shipping.cityshipping.regionshipping.countrylegal.versionlegal.privacyNoticeProvidedlegal.preInfoAcceptedlegal.distanceSalesAccepted

legal.version, {checkout.legal.version} değerine bağlı olmalı; üç yasal onay alanı da zorunlu checkbox olmalıdır.

Checkout seçimleri ve opsiyonel alanlar
shipping.line2shipping.postalshippingSelection.quoteIdshippingSelection.serviceCodeshippingSelection.amountpayment.methodbilling.sameAsShippingbilling.firstNamebilling.lastNamebilling.phonebilling.line1billing.line2billing.citybilling.regionbilling.postalbilling.country

Farklı adres için billing.sameAsShipping=false gönderildiğinde ad, soyad, telefon, adres, şehir, bölge ve ülke billing alanları zorunludur. Kargo seçimi tek alan değildir; POST /v1/storefront/shipping/options yanıtındaki tekliftenshippingSelection.quoteId,shippingSelection.serviceCode ve shippingSelection.amountbirlikte gönderilir. payment.method değeri{checkout.payment.method} binding’iyle gönderilmeli ve aktif sağlayıcıyla eşleşmelidir; bugün canlı checkout için desteklenen değerPAYTR’dır. Havale/EFT ödeme akışı henüz desteklenmez.

Eksiksiz checkout formu

Bu örnek, JavaScript kullanmadan desteklenen iletişim, teslimat, ödeme, farklı fatura adresi ve yasal onay alanlarını birlikte gösterir. Compiler method,action, aktif yayın ve güvenlik token’larını otomatik ekler.

checkout.htmlHTML + Tailwind
<!doctype html>
<html lang="{store.locale}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{page.seo.title}</title>
  </head>
  <body class="bg-white text-slate-950">
    <main class="mx-auto max-w-3xl px-4 py-10">
      <h1 class="text-3xl font-bold">Ödeme</h1>
      <form data-ob-action="checkout.start" class="mt-8 space-y-6">
        <fieldset class="grid gap-3 sm:grid-cols-2">
          <legend class="font-bold">İletişim</legend>
          <input type="email" name="contact.email" autocomplete="email" placeholder="E-posta" maxlength="180" required>
          <input type="text" name="contact.firstName" autocomplete="given-name" placeholder="Ad" maxlength="80" required>
          <input type="text" name="contact.lastName" autocomplete="family-name" placeholder="Soyad" maxlength="80" required>
          <input type="tel" name="contact.phone" autocomplete="tel" placeholder="Telefon" minlength="6" maxlength="30" required>
        </fieldset>

        <fieldset class="grid gap-3 sm:grid-cols-2">
          <legend class="font-bold">Teslimat adresi</legend>
          <input type="text" name="shipping.line1" autocomplete="address-line1" placeholder="Adres" maxlength="180" required>
          <input type="text" name="shipping.line2" autocomplete="address-line2" placeholder="Apartman, daire vb." maxlength="180">
          <input type="text" name="shipping.postal" autocomplete="postal-code" placeholder="Posta kodu" maxlength="30">
          <input type="text" name="shipping.city" autocomplete="address-level2" placeholder="Şehir" maxlength="100" required>
          <input type="text" name="shipping.region" autocomplete="address-level1" placeholder="İlçe / bölge" maxlength="100" required>
          <input type="text" name="shipping.country" autocomplete="country" value="TR" maxlength="80" required>
        </fieldset>

        <fieldset>
          <legend class="font-bold">Ödeme yöntemi</legend>
          <label class="mt-2 flex gap-2">
            <input type="radio" name="payment.method" value="{checkout.payment.method}" checked required>
            Güvenli kart ödemesi
          </label>
        </fieldset>

        <fieldset>
          <legend class="font-bold">Fatura adresi</legend>
          <label class="mt-2 flex gap-2">
            <input type="checkbox" name="billing.sameAsShipping" value="false" class="peer">
            Farklı bir fatura adresi kullan
          </label>
          <div class="mt-3 hidden gap-3 peer-checked:grid sm:grid-cols-2">
            <input type="text" name="billing.firstName" autocomplete="billing given-name" placeholder="Fatura adı" maxlength="80">
            <input type="text" name="billing.lastName" autocomplete="billing family-name" placeholder="Fatura soyadı" maxlength="80">
            <input type="tel" name="billing.phone" autocomplete="billing tel" placeholder="Fatura telefonu" maxlength="30">
            <input type="text" name="billing.line1" autocomplete="billing address-line1" placeholder="Fatura adresi" maxlength="180">
            <input type="text" name="billing.line2" autocomplete="billing address-line2" placeholder="Apartman, daire vb." maxlength="180">
            <input type="text" name="billing.postal" autocomplete="billing postal-code" placeholder="Posta kodu" maxlength="30">
            <input type="text" name="billing.city" autocomplete="billing address-level2" placeholder="Şehir" maxlength="100">
            <input type="text" name="billing.region" autocomplete="billing address-level1" placeholder="İlçe / bölge" maxlength="100">
            <input type="text" name="billing.country" autocomplete="billing country" value="TR" maxlength="80">
          </div>
        </fieldset>

        <input type="hidden" name="legal.version" value="{checkout.legal.version}">
        <label class="flex gap-2"><input type="checkbox" name="legal.privacyNoticeProvided" value="true" required> Gizlilik bildirimini okudum.</label>
        <label class="flex gap-2"><input type="checkbox" name="legal.preInfoAccepted" value="true" required> Ön bilgilendirme formunu kabul ediyorum.</label>
        <label class="flex gap-2"><input type="checkbox" name="legal.distanceSalesAccepted" value="true" required> Mesafeli satış sözleşmesini kabul ediyorum.</label>

        <button type="submit" class="w-full rounded-lg bg-blue-600 px-5 py-3 font-bold text-white">Şimdi öde</button>
      </form>
    </main>
  </body>
</html>
Tüm checkout alanlarının zorunluluk ve uzunluk kuralları
Input nameZorunlulukKural
contact.emailHer zamanGeçerli e-posta, en fazla 180 karakter
contact.firstNameHer zaman1-80 karakter
contact.lastNameHer zaman1-80 karakter
contact.phoneHer zaman6-30 karakter
shipping.line1Her zaman2-180 karakter
shipping.line2OpsiyonelEn fazla 180 karakter
shipping.cityHer zaman2-100 karakter
shipping.regionHer zaman2-100 karakter
shipping.postalOpsiyonelEn fazla 30 karakter
shipping.countryHer zaman2-80 karakter; Türkiye için TR
billing.sameAsShippingOpsiyoneltrue, false, 1 veya 0; verilmezse true
billing.firstNameKoşulluFarklı fatura adresinde dolu, en fazla 80 karakter
billing.lastNameKoşulluFarklı fatura adresinde dolu, en fazla 80 karakter
billing.phoneKoşulluFarklı fatura adresinde dolu, en fazla 30 karakter
billing.line1KoşulluFarklı fatura adresinde dolu, en fazla 180 karakter
billing.line2OpsiyonelEn fazla 180 karakter
billing.cityKoşulluFarklı fatura adresinde dolu, en fazla 100 karakter
billing.regionKoşulluFarklı fatura adresinde dolu, en fazla 100 karakter
billing.postalOpsiyonelEn fazla 30 karakter
billing.countryKoşulluFarklı fatura adresinde dolu, en fazla 80 karakter
shippingSelection.quoteIdBirlikte opsiyonelEn fazla 200 karakter; güncel teklifin üst seviye quoteId değeri
shippingSelection.serviceCodeBirlikte opsiyonelEn fazla 120 karakter; seçilen services öğesinden
shippingSelection.amountBirlikte opsiyonelNegatif olmayan sayı; seçilen services öğesinden birebir
payment.methodOpsiyonel{checkout.payment.method}; aktif sağlayıcıyla eşleşir
legal.versionHer zaman{checkout.legal.version}; 4-80 karakter
legal.privacyNoticeProvidedHer zamanrequired checkbox, value=true
legal.preInfoAcceptedHer zamanrequired checkbox, value=true
legal.distanceSalesAcceptedHer zamanrequired checkbox, value=true

Kargo seçenekleri API sözleşmesi

Aynı-origin POST/v1/storefront/shipping/options isteği mevcut oturum sepetini ve aşağıdaki teslimat adresini kullanır. Dönen üst seviye quoteIdile seçilen services[] öğesinin serviceCode veamount değerleri checkout formuna birlikte taşınır. TeklifexpiresAt sonrasında kullanılamaz.

shipping-options-request.jsonHTML + Tailwind
{
  "shipping": {
    "line1": "Bağdat Caddesi No: 10",
    "line2": "Daire 4",
    "city": "İstanbul",
    "region": "Kadıköy",
    "postal": "34710",
    "country": "TR"
  }
}
shipping-options-response.jsonHTML + Tailwind
{
  "item": {
    "quoteId": "quote_...",
    "expiresAt": "2026-09-04T12:30:00.000Z",
    "services": [
      {
        "serviceCode": "standard",
        "serviceName": "Standart",
        "carrierCode": "YURTICI",
        "carrierName": "Yurtiçi Kargo",
        "estimatedMinDays": 1,
        "estimatedMaxDays": 3,
        "amount": 0,
        "currency": "TRY",
        "isCheapest": true,
        "isFastest": true
      }
    ]
  }
}

HTML-first sınırı: Tema kaynağında özel JavaScript çalışmaz ve bugünservices[] için bir platform loop/binding bulunmaz. Bu nedenle temanın kendi başına endpoint çağırıp dinamik kargo kartları üretmesi desteklenmez. İnteraktif kargo seçimi için platformun yerleşik checkout yüzeyini kullanın; HTML formunda ancak platform tarafından sağlanan güncel üçlü seçim birlikte gönderilebilir. Değerleri sabitlemeyin veya tahmin etmeyin.

Ödeme yöntemi matrisi

PAYTRCanlı mağaza

Kart ödeme akışında /checkout/paytr sayfasına yönlendirir.

MOCKYönetilen demo

Yalnız platformun managed-demo checkout bağlamında yayınlanır.

IYZICORezerve, kullanım dışı

Şemada geriye dönük uyumluluk için kabul edilir; aktif provider olmadığı sürece gönderilmemelidir.

Havale/EFTDesteklenmiyor

checkout.start için geçerli bir payment.method değildir.

Yönlendirme ve hata kodları

checkout-started

Sipariş başlatıldı; PAYTR dışındaki destekli akış checkout sayfasına ob_order ile döner.

action_token_invalid

Form token’ı geçersiz veya oturumla eşleşmiyor.

action_release_inactive

Form eski ya da aktif olmayan bir yayına ait.

checkout_consent_required

Zorunlu yasal onaylardan biri verilmedi.

checkout_legal_documents_unavailable

Checkout için yayınlanmış yasal dokümanlar hazır değil.

checkout_privacy_notice_unavailable

Gizlilik bildirimi hazır değil.

checkout_legal_documents_changed

Form açıldıktan sonra yasal doküman sürümü değişti.

shipping_quote_not_found

Kargo teklif kimliği bulunamadı.

shipping_quote_expired

Kargo teklifi sona erdi; seçenekler yeniden alınmalı.

shipping_service_not_found

Seçilen servis teklifte yok.

shipping_selection_amount_mismatch

Gönderilen tutar seçilen servis tutarıyla eşleşmiyor.

billing_address_required

Farklı fatura adresinin zorunlu alanları eksik.

payment_method_unavailable

Gönderilen ödeme yöntemi mağazanın aktif sağlayıcısıyla eşleşmiyor.

Action sonucu aynı sayfaya ob_action query parametresiyle döner. PAYTR checkout başarıyla başlatıldığında platform /checkout/paytr rotasına 303 yönlendirmesi yapar. Tema kullanıcıya mesaj gösterecekse yalnız bu dokümante edilmiş kodları güvenli bir allowlist üzerinden eşlemelidir.

10 · Yaşam döngüsü

Draft, derleme ve yayın durumları otomatik güncellenir

Revision durumu ile compile durumu farklıdır. Düzenlenebilir revizyonDRAFT kalırken derleme PENDING, RUNNING,READY veya FAILED olur. Editör bekleyen durumlarda yaklaşık 1,5 saniyede bir sunucuyu yeniden sorgular; kullanıcı sayfayı yenilemez.

DRAFTRevision

Düzenlenebilir tema revizyonu. Kaynak ve alan değerleri yalnız bu durumda değiştirilebilir.

PENDINGCompile

Derleme kuyruğa alındı. Editör durum bilgisini yaklaşık 1,5 saniyede bir otomatik yeniler.

RUNNINGCompile

Compiler HTML, binding, composition ve Tailwind çıktısını doğruluyor. Sayfa yenilemek gerekmez.

READYCompile

Tüm sayfalar, ortak bölümler, IR ve CSS hazır. Önizleme ve yayınlama yapılabilir.

FAILEDCompile

Derleme durdu. Editördeki satır/sütun diagnostic’lerini düzeltip yeniden kaydedin.

FROZENRevision

Yayın isteği alındı; revizyon immutable olur ve yeni düzenleme için yeni draft hazırlanır.

Yayın önkoşulları: Revizyon DRAFT, compile durumuREADY, sekiz zorunlu sayfa eksiksiz, her sayfanın IR çıktısı hazır, ortak bölümler tutarlı ve derlenmiş CSS artefact’ı güncel olmalıdır. Yayın isteği revizyonuFROZEN yapar ve immutable Storefront V2 yayın kuyruğuna gönderir.

11 · Compiler sınırı

Sayfa tipleri, güvenlik ve limitler

Page keyRender yoluTipik preview / runtime bağlamı
homePublish-time artifactEk bağlam yok
collectionPublish-time artifact + query-aware public renderercategoryId opsiyonel; boşsa tüm kategoriler
productPublish-time artifactproductId opsiyonel; boşsa global şablon deterministik aktif örnek ürünle render edilir
searchPublish-time artifact + query-aware public rendererArama sorgusu request rotasından gelir
contentPublish-time artifactcontentSlug zorunlu
not-foundPublish-time artifactEk bağlam yok
cartRequest-time private HTMLDraft preview boş sepet; canlıda session-bound sepet bağlamı
checkoutRequest-time private HTMLDraft preview boş sepet/legal; canlıda session-bound checkout bağlamı

Reddedilen kaynaklar

Custom CSS ve JavaScript; script, style, iframe,object, embed, base, link,template, foreignobject, animate veset; inline style, srcdoc, on*, dış form action’ları, tehlikeli URL’ler ve dinamik Tailwind class placeholder’ları.

Sabit limitler

Kaynak
256 KiB
DOM node
10.000
Binding
2.000
Döngü derinliği
3
Döngü öğesi
50
Duyuru mesajı
6
Alt menü bağlantısı
32
Ortak bölüm
16
Bölüm kaynağı
64 KiB
Bölüm toplamı
512 KiB
Final çıktı
8 MiB

Compiler tarafından yönetilen title, description, robots, canonical, JSON-LD, derlenmiş CSS ve storefront runtime final dokümana platform tarafından güvenli biçimde eklenir. Kaynakta 53 adet data-ob-* attribute’u allowlist’tedir; bilinmeyen bir attribute derlemeyi durdurur.