schema类型2：基本类型
基本类型的schema，进行详细的说明
schema类型:基本类型
基本类型
radio: 单选select: 下拉条checkbox: 复选框 样式是一个switch开关（打开和关闭）number: 数字输入框(只可以输入数字，不可以输入字母)text: 文字输入框textarea: 多行文本输入框（textarea，html，richtext都是多行输入框，本质都是一样的，为了兼容shopify的格式）html: 多行文本输入框（textarea，html，richtext都是多行输入框，本质都是一样的，为了兼容shopify的格式）richtext: 多行文本输入框（textarea，html，richtext都是多行输入框，本质都是一样的，为了兼容shopify的格式）range: 左右拖动滑块（左右拖动的方式，进行值的选择）video_url: 视频链接输入框（对输入的视频链接进行解析成对象，方便使用值）color_scheme_group: 配色方案配置 （配置背景、标题颜色、描述颜色等，用于全局配置，对color_scheme进行定义多种类型，装修卡片可以选择这里定义的color_scheme）language_input: 多语言输入框，支持单行输入框，支持多行输入框（需要加配置子项），用户可以输入各种语言配置值
详细说明
1.单选：radio
- options:子项配置
{
"type": "radio",
"id": "grid_layout",
"label": {
"text": "默认布局",
"lang_params": {
"en": "Default layout",
"tw": "默認佈局"
}
},
"options": [
{
"label": {
"text": "列表",
"lang_params": {
"en": "List",
"tw": "列表"
}
},
"value": "list"
},
{
"label": {
"text": "网格",
"lang_params": {
"en": "Grid",
"tw": "網格"
}
},
"value": "grid"
}
],
"default": "grid"
}
2.下拉条：select
- options:子项配置
{
"type": "select",
"id": "container",
"label": {
"text": "容器类型",
"lang_params": {
"en": "Container type",
"tw": "容器類型"
}
},
"default": "w-full",
"options": [
{
"value": "container-fluid",
"label": {
"text": "默认",
"lang_params": {
"en": "Default",
"tw": "默認"
}
}
},
{
"value": "w-full",
"label": {
"text": "全宽",
"lang_params": {
"en": "Full width",
"tw": "全寬"
}
}
},
{
"value": "container",
"label": {
"text": "使用容器框",
"lang_params": {
"en": "Use container box",
"tw": "使用容器框"
}
}
}
]
}
3.复选框:checkbox
- 样式是一个switch开关（打开和关闭）
{
"type": "checkbox",
"id": "autoplay",
"label": {
"text": "自动播放",
"lang_params": {
"en": "Autoplay",
"tw": "自動播放"
}
},
"default": false,
"info": {
"text": "仅在勾选静音时有效",
"lang_params": {
"en": "Only work if the muted box is checked",
"tw": "僅在勾選靜音時有效"
}
}
}
4.数字输入框：number
- 只可以输入数字，不可以输入字母
{
"type": "number",
"id": "payment_icons_width",
"label": {
"text": "图片宽度(px)",
"lang_params": {
"en": "Image width (px)",
"tw": "圖片寬度(px)"
}
},
"default": 300
}
5.text: 文字输入框
- 可输入字符串，包括：字母，数字，汉子，符号等字符串
- 默认是单行输入框
- 模版装修配置，支持html标签（输入框里面可以填写html标签）
如果想要输入框为多行文本框，则加入配置项：
- textarea多行定义:
"input_type": "textarea" - 行数：
"rows": 4
{
"type": "text",
"id": "custom_css",
"input_type": "textarea",
"rows": 4,
"label": {
"text": "CSS仅限此卡片使用",
"lang_params": {
"en": "CSS is only used for this card",
"tw": "css僅此卡片使用"
}
},
"default": "",
"info": {
"text": "您可以在这里填写自定义css，譬如： h2 { font-size:20px }。若要将自定义样式添加到您的整个在线商店，请到全局配置里面添加css",
"lang_params": {
"en": "You can fill in custom CSS here, for example: h2 { font-size:20px }. To add custom styles to your entire online store, please add CSS in the global configuration",
"tw": "您可以在這裡填寫自訂css，譬如： h2 { font-size:20px }。若要將自訂樣式新增至您的整個線上商店，請到全域配置裡面新增css"
}
}
}
6.多行输入框：textarea，html，richtext
textarea，html，richtext都是多行输入框，本质都是一样的，为了兼容shopify的格式，您可以使用任意一个- 下面的json示例使用的是
textarea，您也可以使用html或者richtext - 模版装修配置，支持html标签（输入框里面可以填写html标签）
配置说明：
- placeholder：文本框里面默认显示的文字内容（输入内容将自动消失，主要做提示使用）
{
"id": "custom_body_font",
"type": "textarea",
"label": {
"text": "字体URL",
"lang_params": {
"en": "Font URL",
"tw": "字體URL"
}
},
"placeholder": "https://cdn.xxxx.com/s/files/1/0075/1288/3285/files/roboto.woff2@400",
"info": {
"text": "格式: 字体链接@字体粗细",
"lang_params": {
"en": "Format: Link_to_font@font_weight",
"tw": "格式: 字體鏈接@字體粗細"
}
}
}
7.左右拖动滑块：range
- 左右拖动的方式，进行值的选择
default：默认值min：拖动条-最小值max：拖动条-最大值step：拖动条-鼠标拖动一次，变化值的最小值unit：显示的单位名称
以下面的配置示例，默认位置是50，鼠标往右拖动移动一点点，将发现值变成了52，因为设置了step为2，因此最小的变化值是2
{
"type": "range",
"id": "padding_top",
"label": {
"text": "上内边距",
"lang_params": {
"en": "Padding Top",
"tw": "上內邊距"
}
},
"default": 50,
"min": 0,
"max": 100,
"step": 2,
"unit": "px"
}
8.视频链接输入框：video_url:
- 和文本输入框类似，可输入http开头的url链接
- 和输入框不同的是，进行模版保存后，存储的数据是一个
对象（对输入的视频链接进行解析成对象，方便使用值），因此不同之处，是值的使用
{
"type": "video_url",
"id": "video_link",
"label": {
"text": "视频链接",
"lang_params": {
"en": "Video link",
"tw": "視頻鏈接"
}
},
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": {
"text": "接受YouTube或Vimeo链接",
"lang_params": {
"en": "Accepts YouTube or Vimeo links",
"tw": "接受YouTube或Vimeo鏈接"
}
}
}
说明：
8.1存储的数据是一个对象,如果填写值：https://www.youtube.com/watch?v=_9VUPq3SxOc，则解析后的对象结构如下：
{
"id": "_9VUPq3SxOc",
"type": "youtube",
"url": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
}
8.2因此在模版文件里面可以这样使用
{% assign youtubeURL = 'https://www.youtube.com/embed/' | append: section.settings.video_link.id | append: '?enablejsapi=1' %}
{%- if section.settings.video_link.type == 'youtube' -%}
// todo if logic
{%- endif %}
9.配色方案配置组：color_scheme_group
- 本配置项，主要用于全局配置，可以定义多个
color_scheme（配色方案） color_scheme是一个颜色配置组，里面是多个颜色配置项，包含：背景，标题，描述，文本等部分的配置。- 每个装修卡片，基本都有一个color_scheme配置项，下拉条格式，可以选择全局配置
color_scheme_group配置好的颜色，选择后即可对卡片的背景色，标题等进行生效 - 对
color_scheme进行定义多种类型，装修卡片可以选择这里定义的color_scheme）
下面是一个完整的json配置
{
"type": "color_scheme_group",
"id": "color_schemes",
"definition": [
{
"type": "header",
"content": {
"text": "背景",
"lang_params": {
"en": "Background",
"tw": "背景"
}
}
},
{
"type": "color",
"id": "background",
"label": {
"text": "背景",
"lang_params": {
"en": "Background",
"tw": "背景"
}
},
"default": "#FFFFFF"
},
{
"type": "color",
"id": "background_secondary",
"label": {
"text": "次要背景",
"lang_params": {
"en": "Background secondary",
"tw": "次要背景"
}
},
"default": "#F5F5F5"
},
{
"type": "color_background",
"id": "background_gradient",
"label": {
"text": "背景渐变",
"lang_params": {
"en": "Background gradient",
"tw": "背景漸變"
}
},
"info": {
"text": "背景渐变在可能的情况下替换背景",
"lang_params": {
"en": "Background gradient replaces background where possible",
"tw": "背景漸變在可能的情況下替換背景"
}
}
},
{
"type": "header",
"content": {
"text": "文本",
"lang_params": {
"en": "Text",
"tw": "文本"
}
}
},
{
"type": "color",
"id": "text",
"label": {
"text": "文本",
"lang_params": {
"en": "Text",
"tw": "文本"
}
},
"default": "#222222"
},
{
"type": "color",
"id": "subtext",
"label": {
"text": "副文本",
"lang_params": {
"en": "Subtext",
"tw": "副文本"
}
},
"default": "#666666"
},
{
"type": "color",
"id": "heading_text",
"label": {
"text": "标题文本",
"lang_params": {
"en": "Heading text",
"tw": "標題文本"
}
},
"default": "#222222"
},
{
"type": "header",
"content": {
"text": "按钮",
"lang_params": {
"en": "Button",
"tw": "按鈕"
}
}
},
{
"type": "color",
"id": "button",
"label": {
"text": "实心按钮背景",
"lang_params": {
"en": "Solid button background",
"tw": "實心按鈕背景"
}
},
"default": "#222222"
},
{
"type": "color",
"id": "button_label",
"label": {
"text": "实心按钮标签",
"lang_params": {
"en": "Solid button label",
"tw": "實心按鈕標籤"
}
},
"default": "#FFFFFF"
},
{
"type": "color",
"id": "outline_button_label",
"label": {
"text": "轮廓按钮",
"lang_params": {
"en": "Outline button",
"tw": "輪廓按鈕"
}
},
"default": "#222222"
},
{
"type": "header",
"content": {
"text": "按钮悬停",
"lang_params": {
"en": "Button hover",
"tw": "按鈕懸停"
}
}
},
{
"type": "color",
"id": "button_hover",
"label": {
"text": "背景和边框",
"lang_params": {
"en": "Background & border",
"tw": "背景和邊框"
}
},
"default": "#222222"
},
{
"type": "color",
"id": "button_text_hover",
"label": {
"text": "文本",
"lang_params": {
"en": "Text",
"tw": "文本"
}
},
"default": "#ffffff"
},
{
"type": "header",
"content": {
"text": "价格",
"lang_params": {
"en": "Price",
"tw": "價格"
}
}
},
{
"type": "color",
"id": "price_sale",
"label": {
"text": "促销价格",
"lang_params": {
"en": "Price sale",
"tw": "促銷價格"
}
},
"default": "#E02B2B"
},
{
"type": "color",
"id": "price_regular",
"label": {
"text": "常规价格",
"lang_params": {
"en": "Price regular",
"tw": "常規價格"
}
},
"default": "#666666"
},
{
"type": "header",
"content": {
"text": "表单字段",
"lang_params": {
"en": "Form field",
"tw": "表單字段"
}
}
},
{
"type": "color",
"id": "form_field",
"label": {
"text": "表单字段背景",
"lang_params": {
"en": "Form field background",
"tw": "表單字段背景"
}
},
"default": "#FFFFFF"
},
{
"type": "color",
"id": "form_field_label",
"label": {
"text": "表单字段文本",
"lang_params": {
"en": "Form field text",
"tw": "表單字段文本"
}
},
"default": "#222222"
},
{
"type": "header",
"content": {
"text": "工具提示",
"lang_params": {
"en": "Tooltip",
"tw": "工具提示"
}
}
},
{
"type": "color",
"id": "tooltip",
"label": {
"text": "工具提示背景",
"lang_params": {
"en": "Tooltip background",
"tw": "工具提示背景"
}
},
"default": "#222222"
},
{
"type": "color",
"id": "tooltip_label",
"label": {
"text": "工具提示文本",
"lang_params": {
"en": "Tooltip text",
"tw": "工具提示文本"
}
},
"default": "#FFFFFF"
},
{
"type": "header",
"content": {
"text": "其他",
"lang_params": {
"en": "Other",
"tw": "其他"
}
}
},
{
"type": "color",
"id": "border",
"label": {
"text": "边框",
"lang_params": {
"en": "Border",
"tw": "邊框"
}
},
"default": "#EEEEEE"
}
],
"role": {
"text": "text",
"background": {
"solid": "background",
"gradient": "background_gradient"
},
"links": "outline_button_label",
"icons": "text",
"primary_button": "button",
"on_primary_button": "button_label",
"primary_button_border": "button",
"secondary_button": "background",
"on_secondary_button": "outline_button_label",
"secondary_button_border": "outline_button_label"
}
}
color_scheme_group显示效果
点击：添加方案
返回后，即可看到添加的方案
进入模版装修的某个卡片，在配色方案里面，即可选择配色方案
10.多语言输入框：language_input
- 支持
单行输入框 - 支持
多行输入框 - 用户可以输入各种
语言配置值
10.1单行输入框
{
"type": "language_input",
"id": "heading",
"label": {
"text": "标题",
"lang_params": {
"en": "Heading",
"tw": "標題"
}
},
"default": {
"text": "Brand list",
"lang_params": {}
}
}
点击右侧的多语言翻译，将弹出各个语言的翻译输入框，您可以在输入框里面填写各个语言下的翻译文字
10.2多行输入框
- 加入了配置项:
"input_type": "textarea"代表多行文本模式 - 加入了配置项:
"rows": 4代表文本框显示4行
{
"type": "language_input",
"id": "description",
"input_type": "textarea",
"rows": 4,
"label": {
"text": "描述",
"lang_params": {
"en": "Description",
"tw": "描述"
}
}
}
点击右侧的多语言翻译，将弹出各个语言的翻译输入框，您可以在输入框里面填写各个语言下的翻译文字