将静态 section 迁移到 section group

Section group 可以让商家在不修改主题代码的情况下，自由地添加、移除和重新排序主题布局里的 section。

如果你的主题是在 section group 功能推出之前创建的，那么你可能在布局文件中是静态地渲染一个或多个 section。由于 section group 更加灵活，也能减少代码的改动量，你应该把布局文件里静态渲染的 section 替换成默认包含这些 section 的 section group。

当你将静态 section 迁移到 section group 时，Shopify 会尝试在主题更新的过程中 迁移相关设置 给商家。

第一步：创建新的 section group

你需要为布局中包含静态 section 的每个区域创建一个 section group。在大多数情况下，你需要创建一个 header section group 和一个 footer section group。

  1. 在 sections 目录下，为 section group 创建一个新的 JSON 文件。

    文件名应该能标识出这个 section group 所代表的布局区域。例如，你可以为 header section group 创建一个名为 header-group.json 的文件。

  2. 在这个文件里，添加基本的 section group schema 数据，包括 section group 的 type 和 name。

  1. {
  2.   "type": "header",
  3.   "name": "Header group",
  4.   "sections": {
  5.   },
  6.   "order": [
  7.   ]
  8. }

然后添加你希望包含在 section group 中的 section 引用。你应该把所有原本在静态 section 中的内容都包含进来，这样 Shopify 才能 把商家原来静态 section 的设置迁移到 section group 中。

比如，你的布局文件中的 header 区域可能包含以下这些 section：

  1. {% section 'announcement-bar' %}
  2. {% section 'header' %}

你可以在新的 section group 中添加这些 section 的引用：

  1. {
  2.   "type": "header",
  3.   "name": "Header Group",
  4.   "sections": {
  5.     "header": {
  6.       "type": "header",
  7.       "settings": {
  8.       }
  9.     },
  10.     "announcement-bar": {
  11.       "type": "announcement-bar",
  12.       "settings": {
  13.       }
  14.     }
  15.   },
  16.   "order": [
  17.     "announcement-bar",
  18.     "header"
  19.   ]
  20. }

第二步：用 section group 标签替换静态 section 标签

创建完 section group 的 JSON 文件后，把你布局文件中原本的静态 section 替换成新的 section group：

移除：

  1. {% section 'announcement-bar' %}
  2. {% section 'header' %}

新增：

  1. {% sections 'header-group' %}

主题更新时的设置迁移

当商家将使用静态 section 的主题版本更新为使用 section group 的版本时，Shopify 会尝试将静态 section 的设置复制到 section group 中对应 section 的设置里。Shopify 会根据 section 的 type 来匹配这些设置。

举个例子，如果一个主题的 section group 里包含一个 type 是 header 的 section，Shopify 会把旧版本 /config/settings_data.json 文件中 header 类型 section 的设置迁移过来。

旧版本设置示例：

  1. {
  2.  "current": {
  3.    "colors_solid_button_labels": "#ffffff",
  4.    "colors_accent_1": "#121212",
  5.    "sections": {
  6.      "header": {
  7.        "type": "header",
  8.        "settings": {
  9.          "color_scheme": "background-1",
  10.          "logo_width": 90,
  11.          "logo_position": "middle-left",
  12.          "menu": "main-menu",
  13.          "show_line_separator": true,
  14.          "enable_sticky_header": true,
  15.          "margin_bottom": 0
  16.        }
  17.      }
  18.    }
  19.  },
  20.  "presets": {}
  21. }

迁移后的 section group 示例：

  1. {
  2.  "type": "header",
  3.  "name": "Header Group",
  4.  "sections": {
  5.    "header": {
  6.      "type": "header",
  7.      "settings": {
  8.          "color_scheme": "background-1",
  9.          "logo_width": 90,
  10.          "logo_position": "middle-left",
  11.          "menu": "main-menu",
  12.          "show_line_separator": true,
  13.          "enable_sticky_header": true,
  14.          "margin_bottom": 0
  15.        }
  16.    }
  17.  },
  18.  "order": [
  19.    "header"
  20.  ]
  21. }