shopify的前端开发教程（一）

Posy ·

更新时间:2024-09-21

· 860 次阅读

shopify的前端开发教程（自我整理）基础（你要熟悉css，js，html）文件结构liquidsettings_schema.jsonsection使用section schema tagsclasstagsettingsbolcksmax_blockspresetsdefaultlocales 基础（你要熟悉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属性的;


  [output of the section template]

如果在各自的{% 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 %}
************************

  [output of the section template]

tag

{% schema %}
  {
    "name": "Slideshow",
    "tag": "section"
  }
{% endschema %}
************************

  [output of the section template]

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 %}

作者：climsi

前端前端开发教程

1024 个赞