1. 安装开发工具
1.1. 安装 SHOPLINE CLI
在 Windows、macOS 上安装 SHOPLINE CLI，这里提供了 npm 和 yarn 两种安装方法进行安装。
npm install --global @shoplineos/cli
或者
yarn global add @shoplineos/cli
cli使用教程点击
使用教程查看。
1.2. 安装 3.0 开发插件
VS Code 开发者插件，点击扩展安装包进行下载安装。详细使用教程点击使用教程查看。
2. 获取 3.0 主题代码
2.1. 添加 3.0 主题
如想在已发布的 3.0 主题进行开发，可忽略此添加 3.0 主题步骤。
点击【在线商店】>【店铺设计】>【主题商城】。
选择需要的 3.0 主题。
添加对应的 3.0 主题。
添加完成效果：
2.2. 拉取 3.0 主题代码进行开发
桌面创建空白文件夹
进入该文件夹的终端输入以下命令，登录店铺。
sl login --store 店铺handle.myshopline.com
以下是通过此命令，登录到店铺 handle 为 zhenghaonan 的示例：
输入完命令并回车，浏览器自动跳转至登录页面。
登录完成。
再输入以下命令，显示店铺所有的主题代码。
sl theme pull
以下是通过此命令，显示 zhenghaonan 店铺所有的主题代码的示例：
如您想对已发布的主题进行开发，选择带 [live] 符号的主题。
按键盘上下健，选择对应的 3.0 主题，再按回车键即可拉取。
再输入以下命令，进行实时预览开发。
sl theme serve
以下是通过此命令返回的信息：
- 本地预览链接：http://127.0.0.1:8282 此链接指向你的开发主题的链接。此 URL 可以热重新加载对本地文件的更改，或在文件更改时刷新整个页面，允许你使用店铺的数据实时预览更改。无法使用此链接预览结账页。
- SHOPLINE 后台中主题编辑器的链接：Shopline Editor
- 你可以与其他开发人员共享的预览链接：https://zhenghaonan.myshopline.com/?preview=1&themeId=690978b35ad5f3fc52297292&dev_mode=1。
2.3. 查看 3.0 主题目录
├─ blocks # 可复用的区块
├─ components # 公有代码片段
├─ i18n # 多语言配置文件
├─ layout # 页面布局模板
├─ public # 静态资源（图片/CSS/JS/字体）
├─ sections # 页面组件与组件集
├─ templates # 页面模板
├─ theme.config.json # 主题全局配置数据
└─ theme.schema.json # 主题信息与主题全局配置定义
3. 开发 3.0 组件
3.1. 添加组件文件
在 Sections 目录下新建一个 组件名 的文件夹，新建一个同名的 .html 文件，可选择性新建 .css js 文件。
3.2. 定义组件 schema 配置
schema 是定义主题的全局控件配置、组件控件配置和区块控件配置的一套协议，可以供商家在主题编辑器中通过定义的控件来对主题进行设计。
你可以在以下对应的主题文件中添加 schema：
| 位置 | 描述 |
|---|---|
| theme.schema.json | 全局控件配置 |
| sections 目录下的组件文件 | 组件控件配置 |
| blocks 目录下的区块文件 | 区块控件配置 |
在组件目录同名的 .html 文件中，添加代码
{{#component "stylesheet" src="./show-video-product.css" | asset_url() /}} 引入组件相关 CSS 文件
{{#component "script" src="./show-video-product.js" | asset_url() /}} 引入组件相关 JS 文件
<div class="text-div">
{{section.settings.titleId}} 拿取 section 配置项的值，格式：section.settings. 配置项的id
</div>
{{#blocks}} 渲染当前 section 下的所有子级 block
{{#block titleId=block.settings.titleId /}} 传 Section 的控件配置项给所有子级 blocks
{{/blocks}}
**表示必填项**
{{#schema}}
{
"name": "视频推荐商品", name--组件名：在主题编辑器中查找并使用
"max_blocks": 1, max_blocks--添加区块的最大数量：该组件子级最多添加数量，删除该值则不限制
"class":"Shop-Show-Video-Product", class--组件 class 属性值
"icon":"icon-video", icon--组件图标：该组件在主题编辑器显示的图标
"settings": [ settings--组件控件合集：该组件所有的控件合集
{
"type": "text", type--控件类型：text为文本框类型
"id": "titleId", id--控件Id：用于在组件内取值 Id ，Id 在 settings 内必须唯一
"label": "标题", label--控件标题
"info": "请在👇填写文字", info--控件正文
"default": "My Blog Title" default--控件默认值
}
],
"blocks": [ blocks--子级区块合集：该组件所有子级区块合集
{
"type":"$float-video", type--控件类型：blocks 下的 type 传"$ + 私有区块文件名"，$ 为私有区块，其他 Section 不能引用
同个私有区块 blocks 文件夹下的 block 可以相互引用
},
{
"type": "@app" type--传"@app"可使用插件组件
},
{
"type": "$collection"
},
{
"type": "article/date_author" type--可直接引用主题 blocks 文件夹下的公有区块
}
],
"presets":[ presets--用于定义在可视化编辑器中，点击添加组件时，该组件的预设配置
{
"name": "视频推荐商品", name--组件名：在主题编辑器中查找并使用， presets 下的 name 重量级高于 section 下的 name
"settings": { settings--预设的配置合集，控件的 default 重量级高于 presets 的预设值
"titleId": "My Blog Title" 格式："该settingId":"该 setting 预设值"
},
"blocks": [ blocks--预设的区块合集
{
"type": "article/date_author" type--预设的区块类型
格式："type":"该区块的 type 值"
},
{
"type": "$collection",
"settings": { settings--预设区块的配置合集
"title":"商品推荐展示" 格式："该settingId":"该 setting 预设值"
},
"blocks": [ blocks--预设区块下的区块合集
{
"type": "$product-card",
"blocks": [
{
"type": "$image"
},
{
"type": "$title"
},
{
"type": "$price"
},
{
"type": "$quick_add"
}
]
}
]
}
]
}
]
}
{{/schema}}
type – 3.0 控件类型 3.0 编辑器控件类型库
icon – 3.0 组件图标 3.0 编辑器组件图标库
Sline – 3.0 语法教程3.0Sline语法详细教程
3.0 组件中的区块block只支持创建私有区块及公有区块
暂不支持如 3.0 以下主题，在 Section 中直接创建
3.3. 在 Section / Block 中对子级 blocks 进行处理：
3.3.1. 渲染当前 section / block 下的所有子级 block
{{#content "blocks" /}}
{{#blocks}}
{{#block /}}
{{/blocks}}
3.3.2. Section / Block 传值给子级 blocks
传 Section 的控件配置项/特定的值给子级 blocks
{{#blocks}}
{{#block video=section.settings.titleId isBigBox=true /}}
{{/blocks}}
格式:
{{#blocks}}
{{#block 自定义传值名称=section.settings.控件id /}}
{{/blocks}}
传 Block 的控件配置项/特定的值给子级 blocks
{{#blocks}}
{{#block video=block.settings.titleId isBigBox=true /}}
{{/blocks}}
格式:
{{#blocks}}
{{#block 自定义传值名称=block.settings.控件id /}}
{{/blocks}}
传 Section / Block 中定义的变量给子级 blocks
{{#var isBox /}}
{{#set isBox = true /}}
{{#blocks}}
{{#block isBigBox=isBox /}}
{{/blocks}}
格式:
{{#var 变量名 /}} 定义变量
{{#set 变量名 = 变量值 /}} 赋值变量
{{#blocks}}
{{#block 自定义传值名称=变量名 /}} 使用变量
{{/blocks}}
子级 Block 接收 Section / 父级 Block 的值
{{ props.isBigBox }}
格式:
{{ props.自定义传值名称 }}
3.3.3. Section / Block 拿取子级 blocks 的值
{{#blocks}}
{{ forblock.settings.poster_image /}}
{{/blocks}}
格式:
{{#blocks}}
{{ forblock.settings.block配置项的控件Id /}}
{{/blocks}}
3.3.4. 特定区域引用特定的 blocks
在特定区域只显示私有区块 float-video
{{#blocks}}
{{#if forblock.type == "$float-video" }}
{{#block /}}
{{/if}}
{{/blocks}}
可结合 section 传值给 blocks 一起使用
section 传入的值仅对指定 forblock.type 有效，其他区块接收不到
{{#blocks}}
{{#if forblock.type == "$float-video" }}
{{#block video=section.settings.video isBigBox=true /}}
{{/if}}
{{/blocks}}
同一 Section 下，同一区块 block 在不同地方引用，相同自定义传值名称可传不同的值，显示不同效果。
<div class="show-video-product-main-box-one">
{{#blocks}}
{{#if forblock.type == "$float-video" }}
{{#block video=section.settings.video isBigBox=false /}}
{{/if}}
{{/blocks}}
</div>
<div class="show-video-product-main-box-two">
{{#blocks}}
{{#if forblock.type == "$float-video" }}
{{#block video=section.settings.video isBigBox=true /}}
{{/if}}
{{/blocks}}
</div>
{{#if props.isBigBox }}
{{#video_tag block.settings.video class="show-video-product-video-one" /}}
{{#else/}}
{{#video_tag block.settings.video class="show-video-product-video-two" /}}
{{/if}}
3.4. 创建私有区块
在组件名 的目录下，新建一个名为"blocks "文件夹， blocks 私有区块文件夹下新建私有区块的 html css js 文件。
私有区块之间不能相互引用，可引用公有区块。
{{#component "stylesheet" src="./show-video-product.css" | asset_url() /}} 引入组件相关 CSS 文件
{{#component "script" src="./show-video-product.js" | asset_url() /}} 引入组件相关 JS 文件
<div class="text-div">
{{block.settings.richtext}} 拿取 block 配置项的值，格式：block.settings.配置项的id
</div>
{{#content "blocks" /}} 渲染当前 block 下的所有子 block
{{ props.titleId }} 子级 Block 接收 Section /父级 Block 的值
表示必填项
{{#schema}}
{
"name": "商品推荐展示", name--组件名：在主题编辑器中查找并使用
"tag":"", tag--外层元素代码：不写 tag 字段默认个 div 包裹，tag 传空值则去除默认父级元素,
传 button ，则父级元素为 <button> </button>
"limit": 1 limit--可添加个数：该区块最多使用数量，删除该值则不限制
"settings": [ settings--组件控件合集：该组件所有的控件合集
{
"type": "richtext", type--控件类型：richtext 为富文本框类型
"id": "richtext", id--控件Id：用于在组件内取值 Id，Id 在 settings 内必须唯一
"label": "商品列表标题" label--控件标题
}
],
"blocks": [ blocks--子级组件合集：该组件所有子级组件合集
{
"type":"$product-card", type--控件类型：blocks 下的 type 传"$ + 私有区块文件名"，$ 为私有区块，其他 Section 不能引用
同个私有区块 blocks 文件夹下的 block 可以相互引用
}
],
"presets": [ presets--用于定义在可视化编辑器中，点击添加组件时，该组件的预设配置
{
"blocks": [ blocks--预设的区块合集
{
"type": "$product-card", type--预设的区块类型
格式："type":"该区块的 type 值"
"blocks": [ blocks--预设区块下的区块合集
{
"type": "$image"
},
{
"type": "$title"
},
{
"type": "$price"
},
{
"type": "$quick_add"
}
]
}
]
}
]
}
{{/schema}}
3.5. 创建公有区块
在 blocks 目录下新建一个 组件名 的文件夹，组件名 文件夹下新增 组件名 的 html 文件，可选择性新建 css js 文件/直接新增 组件名 的 html 文件。
公有区块之间可相互引用，不能引用私有区块。
{{#component "stylesheet" src="./show-video-product.css" | asset_url() /}} 引入组件相关 CSS 文件
{{#component "script" src="./show-video-product.js" | asset_url() /}} 引入组件相关 JS 文件
<div class="text-div">
{{block.settings.richtext}} 拿取 block 配置项的值，格式：block.settings.配置项的id
</div>
{{#content "blocks" /}} 渲染当前 block 下的所有子 block
{{ props.titleId }} 子级 Block 接收 Section / 父级 Block 的值
表示必填项
{{#schema}}
{
"name": "商品图文展示", name--组件名：在主题编辑器中查找并使用
"tag":"", tag--外层元素代码：不写 tag 字段默认个div包裹，tag 传空值则去除默认父级元素,
传 button ，则父级元素为 <button> </button>
"limit": 1 limit--可添加个数：该区块最多使用数量，删除该值则不限制
"settings": [ settings--组件控件合集：该组件所有的控件合集
{
"type": "richtext", type--控件类型：richtext 为富文本框类型
"id": "richtext", id--控件Id：用于在组件内取值 Id ，Id 在 settings 内必须唯一
"label": "商品正文" label--控件标题
}
],
"blocks": [ blocks--子级组件合集：该组件所有子级组件合集
{
"type":"image/image", type--控件类型：image / image 为引用公有区块，image 文件夹下的 image.html 文件
}
],
"presets": [ presets--用于定义在可视化编辑器中，点击添加组件时，该组件的预设配置
{
"blocks": [ blocks--预设的区块合集
{
"type": "image/image", type--预设的区块类型，格式："type":"该区块的 type 值"
}
]
}
]
}
{{/schema}}
显示效果：
