shopify模板开发

Shopify 是一个强大的电商平台，支持开发者通过 Liquid 模板语言和 Shopify API 进行定制化开发。

Theme architecture 主题架构

主题必须使用以下目录结构：

arduino 复制代码

.
├── assets
├── blocks
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers
    └── metaobject

Layouts-布局

布局是主题的基础，所有模板都通过它呈现。默认布局文件是 theme.liquid。遵循标准 HTML 文档的结构。

xml 复制代码

<!DOCTYPE html>
<html>
  <head>
    ...
    {{ content_for_header }}
    ...
  </head>

  <body>
    ...
    {{ content_for_layout }}
    ...
  </body>
 </html>

布局文件的结构

布局文件通常是标准的 HTML 文档结构，包含以下 Liquid 对象：

content_for_header：必须放置在 HTML 标签内，用于动态加载 Shopify 所需的脚本（如 hCaptcha、Shopify 应用等）。开发者不应尝试修改或解析此对象。
content_for_layout：动态输出每个模板的内容，需要在和标签之间添加对它的引用。

assets -主题资源

包含主题中使用的所有资源，包括图像、CSS 和 JavaScript 文件

用法：使用asset_urlLiquid URL 筛选条件引用模板中的资产

bash 复制代码

{{ 'base.css' | asset_url | stylesheet_tag }}

输出：
<link href="//polinas-potent-potions.myshopify.com/cdn/shop/t/4/assets/base.css?v=88290808517547527771663872409" rel="stylesheet" type="text/css" media="all" />

config -主题配置

包含主题的配置文件。配置文件定义主题编辑器的 Theme settings 区域中的设置，并存储其值.

配置文件类型

settings_schema.json：文件控制主题编辑器的 Theme settings （主题设置）区域的组织和内容。模版编辑器中的所有设置选择都保存在 settings_data.json 中。主题设置可以通过 settings对象访问。

Liquid允许通过使用settings对象从 settings_schema.json 文件访问主题的所有设置。

bash 复制代码

//config/settings_schema.json
{
  "settings": {
    "favicon": null
  }
}

//xxx.liquid
{% if settings.favicon != blank %}
  <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{% endif %}

settings_data.json

settings_data.json 文件包含基于 settings_schema.json 中包含的设置的主题的设置值。

例如：可以使用以下模板设置来允许商家为页面背景选择颜色：

json 复制代码

//config/settings_schema.json
{
  "name": "Colors",
  "settings": [
    {
      "type": "color",
      "id": "color_page_bg",
      "label": "Page background",
      "default": "#FFFFFF"
    }
  ]
}

这将在 settings_data.json 中添加 color_page_bg 的条目,由于default setting 属性，color_page_bg 的值#FFFFFF。每当在模版编辑器中更改 color_page_bg 的值时，settings_data.json 都会使用新值进行更新。

erlang 复制代码

//config/settings_data.json
...
"color_page_bg": "#FFFFFF"
...

content_for_layout：动态输出每个模板的内容，需要在和标签之间添加对它的引用。

locales -主题国际化文件

作用：

提供多语言支持：国际化文件（locales 文件）允许开发者将主题和主题编辑器中的文本内容翻译成多种语言，方便国际商家和客户使用。
集中管理文本内容：商家可以在 Shopify 语言编辑器中轻松编辑这些重复出现的文本，而无需修改代码。

类型：

文件扩展名为 .json，用于控制前端内容的翻译。商家可以通过 Shopify 语言编辑器编辑这些翻译。
文件扩展名为 .schema.json，用于控制主题编辑器设置的翻译。

默认语言文件：

必须指定一个默认语言文件，格式为 *.default.json，其中 * 是选定的语言代码。
默认情况下，大多数主题使用 en.default.json，将主题的默认语言设置为英语。

Templates-模板

用来存放主题的模板文件，如产品页面、集合页面、博客页面等。这些模板定义了不同页面类型的结构和内容。每个页面类型都有一个关联的模板类型。

可使用的模版类型

erlang 复制代码

└── theme
    ├── layout
    ├── templates
    |   ├── 404.json
    |   ├── article.json
    |   ...
    ...

类型	描述
404	渲染当客户输入商店的无效 URL 时显示的页面内容。
article	渲染文章页面，包含文章的全部内容以及可选的客户评论部分。
blog	渲染博客页面，列出博客中的所有文章。
...	...

Sections

内容构成

主内容：可以包含任何 HTML 或 Liquid 内容。section可以访问全局对象、标签和过滤器，以及特定于如 section 和 block 对象。
资产：section可以使用特定的 Liquid 标签 {% javascript %} 和 {% stylesheet %} 来捆绑自己的 JavaScript 和样式表资产。
Schema：section支持 {% schema %} Liquid 标签，用于定义section的属性和设置，如名称、标签、类、限制、设置、最大section数、预设、默认值、语言环境、启用于和禁用于等。

css 复制代码

//css
{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

//主内容
<div class="page-width section-{{ section.id }}-padding">
  {% if section.settings.show_title %}
    <h1>
      {{ page.title | escape }}
    </h1>
  {% endif %}
</div>

//配置
{% schema %}
  {
    "name": "t:sections.main-page.name",
    "tag": "section",
    "class": "section",
    "settings": [
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      }, {
        "type": "checkbox",
        "id": "show_title",
        "label": "Show title"
      }
    ]
  }
{% endschema %}

Blocks

Blocks允许开发人员通过将部分分解为更小、可重用的 Liquid 来创建灵活的布局。每个块都有自己的一组设置，并且可以在一个部分内添加、删除和重新排序。

类型

Theme Blocks
1. 在 /blocks 文件夹中作为独立的 Liquid 文件创建。
2. 可以在主题的多个Section中重复使用。
3. 提供最大的灵活性，允许嵌套其他blocks。
4. 可以创建"Static blocks"，这些blocks在父 block 或section中的特定位置固定显示，商家可以隐藏但不能删除。
Section Blocks
1. 在Section的 Liquid 文件中直接定义,在Section的 {% schema %} 标签中配置,仅限于在定义它们的Section 中使用，不能在其他地方使用。
2. 只支持单层结构，不能嵌套。
App Blocks
1. 由商家安装的 Shopify 应用提供。允许商家在主题中添加特定于应用的功能，如评论、评分或自定义表单。

snippets

主要目的是提供代码复用的功能

特点：

无独立设置：snippets 没有自己的设置，但可以访问嵌入它们的 sections 的设置。
灵活性：snippets 可以在不同的 sections、templates 和 layout 文件中引用。
传递信息：sections 可以将信息传递给 snippets，确保正确显示数据。

示例：创建一个产品卡片，并在多个页面中显示

xml 复制代码

<!-- snippets/product-card.liquid -->
<div class="product-card">
  <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
</div>

//在需要的地方引用
{% render 'product-card', product: product %}