Başlarken
Temalar şudur: korumalı Liquid — sabit bir veri sözleşmesine göre sunucu tarafında işlenen yalnızca veri şablonları. Temalar şunu içerir: sıfır JavaScript: sepet, öğe seçenekleri ve ödeme, işaretlemenizin bildirimsel olarak bağlandığı platform ticaret çalışma zamanından gelir.
Başlangıç temasını indirin (.zip)
- Başlangıç paketini indirin ve açın.
- Şunu yeniden adlandırın:
slugşuradatheme.json. - Bölümleri şurada düzenleyin:
sections/; Parçacıkları şuraya ekleyin:snippets/. - Klasör içeriğini zip'leyin ve inceleme için gönderin.
Paket düzeni
mytheme.zip
├── theme.json # manifest (data, never code)
├── templates/index.json # OS 2.0 sectioned template (or index.liquid single-file)
├── sections/*.liquid # section files, each with its schema block
├── snippets/*.liquid # reusable partials for the render tag
├── config/settings_schema.json # theme-level settings (Shopify-style groups)
├── locales/en.json … # theme strings for the t filter
├── assets/ # css / images / fonts — static only
└── preview.png # listing screenshotSınırlar: 10 MB Posta kodu 2 MB dosya başına, klasör derinliği ≤ 3. İzin verilen dosya türleri: .liquid .json .css .png .jpg .jpeg .webp .svg .woff2.
PHP yok. JavaScript yok. SVG'ler script veya foreignObject içermemelidir.
theme.json Manifest
{
"name": "My Theme",
"slug": "my-theme", // letters/numbers/dashes — becomes the install path
"version": "1.0.0", // published versions are immutable; ship updates as new versions
"author": "You",
"description": "…",
"min_platform_version": "2.0"
}Şablonlar ve bölümler (OS 2.0)
templates/index.json listeler bölüm örnekleri; her bölüm şurada bir Liquid dosyasıdır:
sections/ ayarlar şemasını bir şema bloğunda taşır. Limitler:
≤ 25 bölüm şablon başına, ≤ 50 blok bölüm başına.
// templates/index.json
{
"sections": {
"hero": { "type": "hero", "settings": { "heading": "Welcome" } },
"menu": { "type": "menu-grid",
"blocks": { "b1": { "type": "badge", "settings": { "label": "New" } } },
"block_order": ["b1"] }
},
"order": ["hero", "menu"]
}Bir bölüm dosyasının içinde şunu alırsınız: section.id, section.type,
section.settings.* ve section.blocks (her blok:
id / type / settings.*). Ayar türleri: text, textarea,
color, checkbox, select (Seçenekler), range
(min/maks), image_picker.
Veri — Drop referansı
Şablonlar şuna ulaşabilir: yalnızca aşağıdaki özellikler (platformun Drop sınıflarından oluşturulur — bu tablo sapamaz). Globaller:
restaurant, options, settings, menu,
allergies, banners, branches, active_branch,
table, customer, localization, flags,
stats, ve section bölüm dosyalarının içinde. Başka herhangi bir şey boş işlenir (ve yüklemede hata verir).
AllergyDrop
id int
image string
title string
AnnouncementDrop
key string
text string
BannerDrop
id int
image string
image_url string
link_url string
subtitle string
title string
BlockDrop
id string
settings App\Storefront\Drops\SettingsDrop
type string
BranchDrop
accepts_orders bool
id int
is_open bool
name string
status string
CategoryDrop
id int
image_url string
items array
name string
CustomerDrop
name string
phone string
store_credit float
store_credit_formatted string
ExtraDrop
id int
name string
price float
FeaturesDrop
age_gate bool
call_waiter bool
catering bool
coupons bool
curbside bool
customer_wallet bool
dietary_filters bool
expiry bool
fitment bool
gift_cards bool
google_review bool
loyalty bool
meal_plans bool
multi_currency bool
reservations bool
scheduling bool
service bool
store_reviews bool
tips bool
variant_goods bool
waitlist bool
FlagsDrop
allow_order bool
delivery bool
on_table bool
payment bool
room_service bool
scheduling bool
takeaway bool
HoursDrop
closes_at string
has_hours bool
is_open bool
manual_closed bool
now_time string
opens_at string
state string
today string
today_key string
week array
ItemDrop
age_restricted bool
available_from_label string
available_now bool
description string
dietary_tags array
discount_percent int
expiry_date string
extras array
has_variants bool
id int
image string
is_daily_special bool
is_gluten_free bool
is_halal bool
is_popular bool
is_sold_out bool
is_vegan bool
name string
on_offer bool
option_groups array
original_price float
price float
pricing_unit string
rating float
rating_count int
reviews array
schedule_label string
sku string
stock_qty int
stock_status string
turnaround_hours int
variants array
LanguageDrop
code string
direction string
name string
LocalizationDrop
currencies array
current App\Storefront\Drops\LanguageDrop
direction string
languages array
MenuDrop
categories array
is_empty bool
items array
OptionGroupDrop
choices array
id int
max_select int
min_select int
name string
required bool
OptionsDrop
allow_call_waiter bool
allow_coupons bool
allow_dietary_filters bool
allow_multi_branch_switch bool
allow_order_scheduling bool
allow_tips bool
currency_code string
currency_pos string
currency_sign string
customer_auth_mode string
delivery_charge float
enable_multi_currency bool
menu_sections string
min_order_value float
open_close_store bool
tax_charge float
tax_label string
whatsapp_number string
PlatformDrop
brand_name string
brand_url string
hide_branding bool
RestaurantDrop
address string
color string
cover string
description string
id int
logo string
main_image string
phone string
slug string
store_type string
sub_title string
title string
ReviewsDrop
author string
body string
created_at string
id int
is_verified bool
rating int
SectionDrop
blocks array
id string
settings App\Storefront\Drops\SettingsDrop
type string
SettingsDrop
SocialDrop
address string
facebook_url string
google_review_url string
instagram_url string
maps_url string
phone string
whatsapp string
whatsapp_url string
StatsDrop
scans_today int
StoryDrop
caption string
cta_label string
cta_url string
id int
image_url string
TableDrop
id int
table_no string
VariantDrop
id int
name string
price float
VocabDrop
add_to_cart string
board string
catalog string
categories string
category string
create_item string
group string
item string
items string
order string
orders string
Filtreler ve etiketler
Platform filtreleri (artı standart güvenli Liquid seti — escape, date, where, map, sort, size…):
media_urlmoneymoney_codestudio_blockstudio_textttheme_asset
t— bir anahtarı çevir. Salt okunur; bilinmeyen anahtarlar anahtarın kendisini döndürür.money/money_code— bir fiyatı restoranın para birimiyle biçimlendir.media_url— restoran görsel URL'si:{{ item.image | media_url: 'menu' }}(türler: menu, logo, cover, allergy, banner).theme_asset— paketlenmiş varlıklarınızdan birinin URL'si:{{ 'css/style.css' | theme_asset }}.
Etiketler schema (bölüm ayarları, çıktıdan çıkarılır), render
(ada göre parçacıklar — sizin snippets/ yalnızca dizin), commerce (ticaret çalışma zamanını sayfa başına bir kez yayar). Bilinmeyen filtreler/etiketler yüklemede başarısız olur.
Ticaret çalışma zamanı
Damla {% commerce %} bir kez (genellikle şablonunuzun sonunda), ardından veri özellikleriyle bağlayın — çalışma zamanı sepet durumuna, seçenek sayfasına ve ödemeye sahiptir:
<button data-mb-add="{{ item.id }}">Add</button>
<span data-mb-cart-count></span>
<span data-mb-cart-total></span>
<button data-mb-open-cart>Cart</button>
<button data-mb-call-waiter>Call waiter</button>
<div data-mb-item-sheet-mount hidden></div>
<div data-mb-cart-mount hidden></div>Çalışma zamanı arayüzünü şunun aracılığıyla özelleştirin: .mb-* sınıflar ve CSS özel özellikleri
(--mb-sheet-bg, --mb-sheet-ink, --mb-accent).
Satıcı ayarları
Satıcılar temanızı panoda şemalarınıza göre özelleştirir. Öncelik: şema varsayılanları ← şablon değerleri ← satıcı değerleri. Ayarlar tema sürümünden bağımsız olarak saklanır, bu yüzden bir güncelleme yayınlamak asla bir satıcının özelleştirmesini silmez.
Kurallar ve limitler
- Hayır
<script>, satır içi olay işleyici yok,javascript:URL yok, iframe yok — yüklemede reddedilir. - Kullanıcıya görünür verileri kaçış karakterine dönüştürün:
{{ item.name | escape }}. - İşlemeler kaynak sınırlıdır (çıktı uzunluğu + motor iş sınırları). Çalışma zamanında başarısız olan bir bölüm atlanır, asla boş bir sayfa olmaz; yüklemede ise ciddi bir hatadır.
- Yayınlanan sürümler değişmezdir — güncellemeler inceleme yoluyla yeni sürümlerdir.
- Mantıksal CSS özelliklerini kullanın (
inline-size,margin-inline…) — menüler RTL olarak da işlenir.
