shopify的前端开发教程（自我整理）

基础（你要熟悉css，js，html）
文件结构
liquid
settings_schema.json
section
- 使用section schema tags
- - class
  - tag
  - settings
  - bolcks
  - max_blocks
  - presets
  - default
  - locales

基础（你要熟悉css，js，html）

开发前得会基础的js，css，html。
shopify官方文档：https://shopify.dev/docs

文件结构

assets：img、js、scss 样式存放的地方即主题使用的所有资源，包括图像、样式表和javascript文件
config：一个settings_schema.json文件和一个settings_data.json文件。
layout：主题布局模板，默认情况下是theme.liquid。
locales：主题的翻译locale文件，为主题提供相关语言的内容。
sections：组成主题的一个个可复用的模块。
snippets：Liquid代码片段文件，这些代码片段可以在主题的其他模板中引用。
templates：包含所有其他的Liquid模板，包括用户账号相关的模板。
若你使用的是theme kit则还有一个文件config.yml

liquid

中文版文档官方文档
Liquid 是一门开源的模板语言，由 Shopify 创造并用 Ruby 实现。它是 Shopify 主题的骨骼，并且被用于加载店铺系统的动态内容。
主要可以分成Basics,Objects,Tags,和filters。详细的建议去看文档，中文文档并不详细，缺少很多内容，可以先用中文文档入门再阅读官方文档。

settings_schema.json

settings_schema.json是主题的配置文件，他控制着主题中的可编辑内容，也存放着主题的一些信息，例如作者，版本等但主要是控制主题的可配置信息。(settings_data.json存放的是当前主题保存的值，不建议手动更改)

[{//主题信息"name": "theme_info","theme_name": "Debut","theme_author": "Shopify","theme_version": "11.0.1",//版本"theme_documentation_url": "https:\/\/help.shopify.com\/manual\/using-themes\/themes-by-shopify\/debut","theme_support_url": "https:\/\/support.shopify.com\/"},{//主题配置信息"name": "Colors","settings": [{"type": "color","id": "color_borders","label": "Border colors","default": "#e5e5e5"},{"type": "color","id": "color_body_text","label": "Body text","default": "#333333"}]}
]

配置的属性都有五个type、id、label、default、info

类型	是否必填	描述
type	必填	定义选项所需的输入类型
id	必填	id必须唯一，这将在主题中引用它
label	必填	向用户描述了该选项的用途，可以用中文
placeholder	可选	输入的占位符文本的值。这仅适用于基于文本的设置类型。
options	可选	输入的下拉选择的值。这仅适用于type为select的时候。[{ “value”: “one”, “label”: “Radio One” },{ “value”: “two”, “label”: “Radio Two” }]
default	可选	该选项的默认值
info	可选	为用户提供该选项的详细使用信息

type的常规输入属性如下

值	说明
text	允许用户输入单行文本字段
textarea	允许用户输入多行文本字段
image_picker	允许用户上传图片
radio	允许用户使用单选按钮
select	允许用户从下拉列表中进行选择
checkbox	允许用户选中一个框，返回true或false值
range	滑块选择，限定范围内的值

type的特殊输入属性如下

值	说明
color	允许用户使用颜色选择器窗口小部件选择颜色
font_picker	允许用户从可用字体列表中进行选择
collection	允许用户选择商店中可用的产品系列
product	允许用户选择商店中可用的产品
blog	允许用户从商店中设置的博客列表中进行选择
link_list	允许用户从可用菜单中进行选择
page	允许用户选择商店中定义的特定页面
url	允许用户链接到以下资源之一:文章、博客、收藏、网页或产品或外部url(例如https://example.com)
video_url	允许用户选择主题中可用的特定代码段
richtext	可以使用richtext设置允许基本格式的文本内容。支持的格式选项有粗体、斜体、下划线、链接和段落。
html	允许商家添加自定义html代码，该代码呈现为块的内容。未关闭标记在保存设置时自动关闭。
article	允许用户引用Shopify商店中的文章。

信息设置
Shopify还允许将创建主题的作者信息放入侧边栏中，它们只有3个属性：type, content, info

类型	是否必填	描述
type	必填	定义选项所需的输入类型。对于侧边栏设置，这只能是标题或段落
content	必填	文本内容
info	可选	向用户提供有关该选项的其他信息。

调用

{{ settings.对应属性的id }}
例如：{{ settings.color_borders }}

section

theme有一个名为sections的新目录。sections可访问与其他模板相同的全局对象、标记和过滤器的liquid模板。
在sections外部创建的变量在sections内部不可用。同样，在sections中创建的变量在sections外不可用。如果某个sections包含一个代码片段，则该代码片段可以访问该sections中的变量。
sections支持三个新的liquid标签。这些新的标签在sections外是不可用的。

{% schema %}
{% javascript %}
{% stylesheet %}

当Shopify渲染section时，它将每个section包装在一个具有唯一id属性的;

<div id="shopify-section-[id]" class="shopify-section">[output of the section template]
</div>

如果在各自的{% schema %}标记中定义了presets，则可以将 Sections动态添加到主题的主页。带有presets的Sections将在主题编辑器中自动访问。在主题编辑器中，商家可以配置相同类型的多个Sections，并在主页上重新排列它们的外观。最多可以向主页添加25个动态Sections。与静态Sections不同，您不需要使用{% section %}标记在template文件中引入Sections。Shopify将所有预置的sections配置一起呈现在content_for_index的主题编辑器中。

使用section schema tags

sections {% schema %} 标记和{%comment%}注释标记一样不输出其内容，且内部代码不执行。每个section 可以有一个 {% schema %}，{% schema %}必须包含有效的JSON，{% schema %}可以放在section内任何位置，但是不能嵌套在另一个tags中。
你可以在{% schema %}中定义以下属性：

属性	描述
name	定义section名称
class	为section的包装器指定额外的class
tag	指定渲染section时的tag
settings	使用与settings_schema.json相同
blocks	blocks是可以在sections中任意添加排序删除的一个内容（在下面详细讲）
max_blocks	指定blocks的最大数量
presets	预置即将自己包含在 content_for_index 对象中，添加进主题主页
default	默认配置
locales	翻译

class

{% schema %}{"name": "Slideshow","class": "slideshow"}
{% endschema %}
************************
<div id="shopify-section-[id]" class="shopify-section slideshow">[output of the section template]
</div>

tag

{% schema %}{"name": "Slideshow","tag": "section"}
{% endschema %}
************************
<section id="shopify-section-[id]" class="shopify-section">[output of the section template]
</section>

settings

{% schema %}{"name": "Slideshow","settings": [{"id": "header","type": "text","label": "Header","default": "Hello world"}]}
{% endschema %}
/*******使用********/
{{ section.settings.header }}

bolcks

blocks必须有name和type属性，type可以是主题开发人员设置的任何值。blocks的settings的使用与settings_schema.json相同，同时limit属性可以限制blocks的数量。

{% schema %}{"blocks": [{"type": "payment_icons","name": "Payment Icons","limit": 2,"settings": [{"id": "content","type": "text","label": "Quote"}]}]}
{% endschema %}

max_blocks

{% schema %}{"name": "Slideshow","max_blocks": 2}
{% endschema %}

presets

{% schema %}{"presets": [{"category": "Custom Content","name": "Text","settings": {"heading": "Hello World"},"blocks": [{"type": "text","settings": {"content": "Once upon a time..."}}]}]}
{% endschema %}

default

定义默认配置，格式与presets相同只是没有name和catogory。

{% schema %}{"default": {"settings": {"heading": "Hello World"},"blocks": [{"type": "text","settings": {"content": "Once upon a time..."}}]}}
{% endschema %}

locales

翻译模板

{% schema %}{"locales": {"en": {"title": "Welcome"},"fr": {"title": "Bienvenue"}}}
{% endschema %}

shopify的前端开发教程相关推荐

shopify二次开发教程_详细教程：如何将Shopify的Storefront API与React和Redux结合使用...
shopify二次开发教程 by Chris Frewin 克里斯·弗里温(Chris Frewin) 详细教程:如何将Shopify的Storefront API与React和Redux结合使用 ( ...
推荐20个很有帮助的 Web 前端开发教程
在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 您 ...
html居中代码logo,关于logo（前端开发教程）垂直居中的问题
* { margin:0; padding:0; font-size:12px; color:#333; font-family:Verdana, Geneva, sans-serif, " ...
Delphi Web前端开发教程（9）：基于TMS WEB Core框架
3.REST Servers服务端(后端)框架 REST服务端特点: - 为远程资源提供一个REST API接口.也可以为其他网络内容提供服务: - 包括在Delphi Enterprise & ...
Delphi Web前端开发教程（2）：基于TMS WEB Core框架
简介 Delphi是软件行业的传奇编程语言之一,该产品于1995年2月14日情人节在美国San Francisco(旧金山)正式发布,她是软件开发历史的基石.今天随着IT科技的飞速发展,各种新平台和框 ...
Delphi Web应用开发B/S框架推荐：《Delphi Web前端开发教程——基于TMS WEB Core框架》
使用TMS WEB Core 发现Delphi软件开发的无限潜能-- 二十多年来,编程语言Delphi 以对 Windows 应用程序的快速可视化编程而闻名于世.尤其是轻松开发桌面数据库应用程序和快捷 ...
Delphi Web前端开发教程（4）：基于TMS WEB Core框架
图 Delphi开发的即时战略游戏软件<Knights Province> 图 Delphi开发的猎鹰9火箭模拟仿真软件<Falcon 9 – First Stage Simulat ...
Delphi Web前端开发教程（5）：基于TMS WEB Core框架
Delphi/Object Pascal的历史与现状从技术上讲,Delphi 是一个由 Object Pascal 编程语言支持并为其提供开发环境的IDE,可以实现高生产力和快速应用程序开发的工具. ...
国内外的自学web前端开发教程网站
@TOC有哪些自学web前端开发教程网站? 国内外有哪些自学web前端开发教程网站? https://www.w3cl.com 第一个着力推荐 http://codyhouse.co/library ...
ant+dva Ract系统前端开发教程
ant+dva Ract系统前端开发教程开发准备: 基本知识: 1.React http://reactjs.cn/react/docs/getting-started-zh-CN.html或htt ...

shopify的前端开发教程