设置

为了方便商家定制主题,您可以使用 JSON 创建商家可以通过主题编辑器访问的设置。

您可以在主题、分区或块级别提供设置。设置可以是固定的(如信息元素),也可以是交互式的(如下拉菜单)。设置值可以是静态的,也可以使用动态源来呈现适合的值。

公开设置可使主题更具定制性,可以使主题更加灵活,从而满足商家的各种使用情况。

子类型

设置有两个分类:

类别描述
Input settings可保存值的设置,应用程序用户可对其进行配置
Sidebar settings不能赋值的设置,应用程序用户不能对其进行配置。它们是信息元素,可用于提供输入设置的细节。

位置

您可以在以下位置创建设置:
config > settings_schema.json
sections文件夹中的分区文件,使用分区的 {% schema %} 标签

└── theme
    ├── config
    |   ├── settings_schema.json
    |   ...
    ├── sections
    |   ├── main_product.liquid
    |   ├── another_section_file.liquid
    |   ...
    ...

settings_schema.json

settings_schema.json 文件控制着主题编辑器中主题设置区域的内容。该文件中的设置可转化为全局主题设置,并可通过Liquid 设置对象进行访问。

分区schema

在分区 {% schema %} 标签中,您可以创建分区设置和块设置。可分别通过分区对象和块对象的settings属性访问这些设置。

schema

设置被定义为一个 JSON settings属性,该属性是设置所适用对象的父对象。该属性接受一个设置数组。

{
  ...
  "settings": [
    {
      "type": "header",
      "content": "My settings"
    },
    {
      "type": "text",
      "id": "my_id",
      "label": "My setting label",
      "default": "Enter text here"
    },
    {
      "type": "textarea",
      "id": "my_second_id",
      "label": "Welcome message",
      "default": "Welcome to my shop!"
    }
  ],
  ...
}

应用

在使用设置时,您应该熟悉以下内容:

  • 翻译设置
  • 访问设置值
  • 检查设置值格式
  • 为设置使用动态资源
  • 平台控制的设置

翻译设置

您可以根据网店使用的语言翻译设置schema的各种属性。这些翻译存储在schema本地化文件中。

访问设置

根据创建的位置,您可以通过以下 Liquid 对象访问设置:

  • 全局设置对象
  • 节对象
  • 块对象

注意
可在 Liquid 主题资产中访问设置对象中的设置。

要访问特定的设置,请将相关设置的 id 属性追加到要访问的对象中。
例如,如果您在每个 Liquid 对象中实现了以下设置:

{
  "type": "text",
  "id": "message",
  "label": "Message",
  "default": "Hello!"
}

那么下面的 Liquid 将产生以下输出:

// Settings
Message: {{ settings.message }}

// Section
Message: {{ section.settings.message }}

// Block
Message: {{ block.settings.message }}
// Settings
Message: Hello!
// Section
Message: Hello!
// Block
Message: Hello!

检查设置值的格式

在引用设置时,应始终检查值的格式是否符合预期。任何没有自动默认值的设置最终都可能没有值,也就是空字符串。
例如,如果您有一个 id 为 message 的设置,那么下面的 Liquid 将根据值生成以下输出:

// No value
Setting: {{ settings.message }}

// With value
Setting: {{ settings.message }}
// No value
Setting:
// With value
Setting: Message value

您可以使用blank操作符检查数值是否为空字符串。例如

{% unless settings.message == blank %}
  {{ settings.message }}
{% endunless %}

基于资源的设置

为避免出现空字符串,请检查值是否符合预期格式。有可能没有选择任何资源、所选资源已不存在或所选资源已被隐藏。
例如,如果页面类型设置如下:

{
  "type": "page",
  "id": "page",
  "label": "Page"
}
{% if settings.page != blank %}
  {{ settings.page.title }}
  {{ settings.page.content }}
{% else %}
  No page, or invalid page, selected.
{% endif %}

提示
基于资源的设置并不总是返回资源对象。要了解更多信息,请参阅基于资源的传统设置。

基于资源的传统设置

在过去,基于资源的设置会返回相关资源的句柄,因此必须使用该句柄通过 Liquid 访问实际对象。
例如,如果您有以下产品设置,则需要像下面这样访问产品对象:

{
  "type": "product",
  "id": "product",
  "label": "Product"
}
{% unless settings.product == blank %}
  {% assign product = all_products[settings.product] %}

  {% if product %}
    {{ product.title }} - {{ product.price }}
  {% else %}
    No product, or invalid product, selected.
  {% endif %}
{% endunless %}

动态资源

根据设置类型,JSON 模板中包含的分区和块的设置可让商家选择将一个或多个动态源连接到设置。

平台控制设置

在主题编辑器中,Shopify 在主题和分区级别开放了自定义 CSS 设置。您不能在设置模式中添加或隐藏此设置。

商家使用此设置添加的任何自定义 CSS 都会存储在一个 custom_css 属性中,或者在 JSON 模板的 section 属性中,或者在 settings_data.json platform_customizations 对象中。

此设置旨在让用户无需编辑主题代码即可自定义店面的外观。作为主题开发人员,您不应添加此设置,也不应在设置后编辑此设置的值。相反,您应该使用专用的 CSS 资产和样式表Liquid标签,并通过主题设置在这些区域引入 自定义CSS。

原文:https://shopify.dev/docs/themes/architecture/settings

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注