[{"value":"Schema","id":"schema","hLevel":2,"level":1},{"value":"命名 JSON 模板","id":"命名-json-模板","hLevel":2,"level":1,"children":[{"value":"wrapper 属性","id":"wrapper-属性","hLevel":3,"level":2},{"value":"Section 数据","id":"section-数据","hLevel":3,"level":2}]}]

JSON templates

JSON templates 允许你使用 sections 来控制在线店铺不同页面的展示。

JSON templates 是存储要渲染的 sections 列表机器相关配置的数据文件。商家可以使用主题编辑器添加、删除和重新排序这些 sections。

当使用 JSON templates 渲染页面时，sections 会按照 order 属性指定的顺序渲染，sections 之间没有 HTML。JSON templates 最多可以渲染 25 个 section。

虽然 JSON templates 在内容上与 HTML 模板不同，但它们仍然是支持以下 SHOPLINE 主题功能的模板文件：

gift_card 之外的所有模板类型。
备用模板。

在构建 JSON templates 时，你还应该构建一个包含模板核心功能的 section。例如，在构建 collections_all JSON templates 时，它应该引用一个使用 collections object 的 section。

Schema

JSON templates 必须是一个有效的 JSON 文件。根对象应包含以下属性：

属性名称	类型	是否必填	描述
`name`	String	是	页面的文件名称，例如：`index.html`
`layout`	String or `false`	否	渲染模板时要使用的 layout 文件名。例如，指定 `"full-width"` 以渲染 `layout/full-width.html。` 默认布局是 `layout/theme.html` 使用 `false` 会直接使用 `layout/theme.html` 进行布局。
`wrapper`	String	否	包裹 section 的 HTML 元素。了解更多，请参阅 wrapper 属性
`sections`	Object	否	一个使用 section ID 作为键，section 数据作为值的对象。此属性需要至少包含一个 section。模板中不允许有重复的 ID。 section 数据的格式与 config/settings_data.json 中的 section 数据相同。了解更多，请参阅 sections data 。
`order`	Array	否	按渲染顺序列出的 section ID 数组。ID 必须存在于 `sections` 对象中。不允许重复。

提示

Section 文件必须在其 schema 中定义 presets，以支持通过主题编辑器添加到 JSON templates 中。没有 presets 的 section 文件应手动包含在 JSON 文件中，且不能通过主题编辑器移除。

命名 JSON 模板

文件名必须是有效的主题模板类型，可以有可选的后缀来表示备用模板。例如，商品集合模板可以命名为 collection.json 或 collection.alternate.json。

一个模板只能存在为 JSON 或 HTML 模板，可以同时存在，当二者同时存在时，优先使用 JSON 模板。

wrapper 属性

wrapper 属性可以在 JSON templates 中的所有 sections 包裹一层 HTML 标签。

例如，具有以下 wrapper 属性的 JSON 文件会生成如下输出：

{
  "wrapper": "div#div_id.div_class[data-video=value]",
  "sections": {
    "video": {
      "type": "video"
    }
  },
  "order": [
    "video"
  ]
}

<div id="div_id" class="div_class" data-video="value">
  <!-- index.json sections -->
</div>

Section 数据

JSON templates 的 sections 属性包含模板要渲染的 section 的数据。这些 section 可以是主题 sections 或 app sections。

JSON 主题模板之间不能共享 section 数据，因此每个 section 在模板内必须有唯一的 ID。

JSON templates 最多可以渲染 25 个 section。

你可以通过代码或主题编辑器向模板中添加 sections。

下表概述了 sections 的配置项及说明。

值	类型	是否必填	描述
`<SectionID>`	String	-	section 的唯一 ID，仅接受字母、数字字符组合。
`<SectionType>`	String	是	要渲染的 section 文件名，不含扩展名。
`<SectionDisabled>`	Boolean	否	如果值为 `true`，则该 section 不会渲染，但可以在主题编辑器中进行自定义。默认值为 `false`。
`<BlockID>`	String	-	block 的唯一 ID，仅接受字母、数字字符组合。
`<BlockType>`	String	是	要渲染的 block 类型，在 section 文件的 schema 定义中可以找到。
`<BlockOrder>`	Array	否	block ID 的数组，按渲染顺序排列。ID 必须存在于 blocks 对象中，且不允许重复。
`<SettingID>`	String	-	section 或 block 的 schema 中定义的 setting ID。
`<SettingValue>`	(multiple)	-	对应 setting 的有效值。

例如：

sections: {
  <SectionID>: {
    "type": <SectionType>,
    "disabled": <SectionDisabled>,
    "settings": {
      <SettingID>: <SettingValue>
    },
    "blocks": {
      <BlockID>: {
        "type": <BlockType>,
        "settings": {
          <SettingID>: <SettingValue>
        }
      }
    },
    "block_order": <BlockOrder>
  }
}

例如：以下模板在商品详情页面上渲染了 product-preview.html 和 recently-viewed.html 的 section 文件：

{
  "name": "products/detail.html",
  "wrapper": "div#page-product-detail",
  "sections": {
    "product-preview": {
      "type": "product/detail/product-preview",
      "disabled": false,
      "settings": {
        "default_selected_sku": true
      },
      "blocks": {
        "block-1": {
          "type": "title",
          "settings": {}
        },
        "block-2": {
          "type": "abstract",
          "settings": {}
        }
      },
      "block_order":["block-1","block-2"]
    },
    "recently-viewed":{
      "type": "product/recently-viewed",
      "settings": {
        "show_product_number": 6,
        "product_image_ratio": "0"
      }
    }
  },
  "order": ["product-preview", "recently-viewed"]
}