Section-schema
section schema
1.模版装修-装修卡片
- 卡片的配置结构（模版装修，点击卡片，右侧出现的卡片配置信息）
- 卡片配置值的保存（点击装修发布，需要将卡片配置信息，配置的值进行保存）
2.对于卡片的配置结构，是schema来实现的
- 关于schema的信息，参看：schema
schema详细讲解
以 sections/header.liquid 进行讲解
- 标签：
{% schema %}和{% endschema %}之间的内容，就是schema的配置内容
{% schema %}
{
"name": {
"text": "页头",
"lang_params": {
"en": "Header",
"tw": "頁首"
}
},
"class": "f-section-header",
"settings": [
...
}
}
{% endschema %}
1.name
- 卡片的名称，支持多语言
- 子项：text是默认值
- 子项：lang_params是其他语言的值
{
"name": {
"text": "页头",
"lang_params": {
"en": "Header",
"tw": "頁首"
}
}
}
2.settings
- 卡片的配置结构，模版装修，点击卡片，右侧出现的内容，就是这里渲染的
- 每一个子项就是一个配置
代码：
{
"settings": [
{
"type": "header",
"content": {
"text": "常规设置",
"lang_params": {
"en": "General",
"tw": "常規"
}
}
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": {
"text": "配色方案",
"lang_params": {
"en": "Color scheme",
"tw": "配色方案"
}
}
},
{
"type": "color_scheme",
"id": "color_scheme_menu",
"label": {
"text": "菜单栏配色方案",
"lang_params": {
"en": "Color scheme menu bar",
"tw": "菜單欄配色方案"
}
},
"info": {
"text": "适用于菜单和Logo分两行显示的页眉设计",
"lang_params": {
"en": "For header design where Menu and Logo are in 2 lines",
"tw": "適用於菜單和Logo分兩行顯示的頁首設計"
}
},
"default": "dark"
}
]
}
通过上面的图片和代码对应，可以看到配置内容和代码是一一对应的，这个是schema的基本语法
- 关于schema更多的语法参看:schema
3.blocks
- 卡片的子卡片配置
- 每个子卡片的结构，和卡片类似
4.disabled_on
以：sections/video.liqud为例子
- 代表该装修卡片，不可以在
header，footer这2个sections中进行添加（header，footer指的是sections文件的type） - 打开
sections/header-group.liquid, 可以看到type值为header（可以看到配置："type": "header"） - 打开
sections/footer.liquid, 可以看到type值为footer（可以看到配置："type": "footer"）
{
"disabled_on": {
"groups": [
"header",
"footer"
]
}
}
5.enabled_on
- 以文件：
sections/annoucement.liquid为例子 - 代表该卡片，只可以在header中进行添加
enabled_on原理和disabled_on类似
5.1groups
- 只可以在头部进行添加该卡片
{
"enabled_on": {
"groups": [
"header"
]
}
}
5.2templates
- 模版装修，只可以在商品详情页面（product是页面类型，需要切换到商品详情页的装修）的内容部分，才可以添加该卡片
- 其他的页面的内容部分，不可以添加（譬如：首页就不可以添加该卡片）
{
"enabled_on": {
"templates": ["product"]
}
}
6.presets
- 打开
sections/brand-list.liquid - 如果卡片配置了
presets，那么代表这个卡片可以通过添加卡片的方式，添加到装修的内容部分
{
"presets": [
{
"name": {
"text": "品牌列表",
"lang_params": {
"en": "Brands list",
"tw": "品牌列表"
}
},
"category": {
"text": "图片",
"lang_params": {
"en": "Image",
"tw": "圖片"
}
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
模版装修，添加卡片，可以看到上面的json和添加卡片的对应值
- name：对应卡片的名字
- category：对应卡片的分组
在卡片列表，点击卡片，即可将这个卡片添加到模版装修里面
- blocks：在配置中定义了4个type为image的子卡片，因此卡片添加后，默认就有4个子卡片
上面是一个装修卡片品牌列表的presets定义:
name:添加卡片后，卡片的名称category：在添加卡片列表中，对应的分组blocks：添加该卡片，创建几个子卡片
总结：
- 如果卡片配置了
presets，那么，模版装修，点击添加卡片，就可以添加该卡片 - 可以通过
disabled_on和enabled_on来限制卡片的添加，可以指定卡片只可以添加到特定的位置 - 如果卡片没有配置
presets，那么该卡片不可以通过点击添加卡片的方式进行添加。一些页面独有的卡片，就不可以通过按钮：添加卡片，进行添加 - 譬如：商品详情页的2个独立卡片，产品信息卡片（文件：sections/main-product.liquid），(文件：sections/main-product-details-tabs.liquid)，schema里面都没有
presets的定义 - 对于页面独有的卡片，模版默认加入该卡片，该卡片不可以删除，也不可以添加，属于强制加入的卡片。