主题中的 App blocks

如果你的 section 是 JSON template 的一部分，那你就应该支持类型为 @app 的 blocks。这些 blocks 让 app 开发者可以创建 block，让商家可以把 app 的内容加到他们的主题里，而不用直接去改主题代码。你可以通过 theme app extensions 来构建 app blocks。

注意

类型为 @app 的 blocks 不支持在 静态渲染的 sections 中使用。

在主题编辑器里，商家可以选择把 app blocks 加到已有的 section 中，或者加到一个新的 section 中。

当商家选择把 app 加到一个新的 section 时，Shopify 会自动把这个 app block 包在一个叫做 Apps 的 wrapper section 里。你可以通过自定义一个 apps.liquid section 来修改这个 wrapper section。

要在你的 section 和 theme block 里支持 app blocks，你需要完成以下几步：

• 在 schema 中添加对 app blocks 的支持
• 渲染 block 内容
• 确保你有有效的 section 设置

你可以参考 Dawn 主题中的 main product section，看看一个支持 app blocks 的主题 section 是怎么实现的。

小贴士

关于 app blocks 的框架信息，包括合法的 app block schema，可以查看 theme app extensions framework 文档。

支持 app blocks

为了让商家可以把 app blocks 添加到一个 section 或一个 theme block 中，你需要在 section 或 block 的 schema 中加入一个通用的 @app 类型的 block。

例如：

"blocks": [
  {
    "type": "@app"
  }
]

注意

@app 类型的 block 不支持 limit 参数。如果加了这个参数，会报错。

渲染 app blocks

要渲染 app blocks，theme block 必须使用 {% content_for 'blocks' %} 这个 Liquid 标签。这个标签会处理 block 的渲染，包括 app blocks。

例如：

<div class="group">
  {% content_for 'blocks' %}
</div>

和 section 定义的 blocks 一起渲染 app blocks

要让 app block 和 section 定义的 blocks 一起渲染，你需要判断类型是否匹配，并使用下面的代码：

{% render block %}

例如：

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    ...
  {% endcase %}
{% endfor %}

App blocks 和 section 设置

为了避免和 autofill settings 冲突，支持 app blocks 的 section 每种资源类型的 section setting 只能包含一个。例如，一个 section 只能有一个 product setting 和一个 collection setting。

App block wrapper

商家可以通过以下两种方式在页面上添加 app blocks：

• 作为某个 section 渲染范围内的 block
• 类似 section 的方式显示，占据页面的全宽

因为 app blocks 本身不是 section，Shopify 默认会用一个平台生成的 section 把这些全宽的 app blocks 包裹起来。不过，你可以通过创建一个叫 apps.liquid 的自定义 section 来覆盖默认的 section。

apps.liquid 的 section schema 必须包含一个 @app 类型的 block，还有一个 preset。如果缺少任意一个，主题编辑器里就会报错（比如 Apps not supported 或 Apps section is invalid），商家就不能使用这个 section。

注意

apps.liquid 的 section schema 不能包含 templates 这个 schema 属性。这也包括 enabled_on/disabled_on 属性里面的 templates。系统默认要求 apps.liquid 要在所有模板里都能用。

例如：

{% for block in section.blocks %}
  {% render block %}
{% endfor %}
{% schema %}
  {
    "name": "App wrapper",
    "settings": [],
    "blocks": [
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "App wrapper"
      }
    ]
  }
{% endschema %}

为了让商家能控制 app 在 app section 里的样式，你可以添加一个设置项，让商家选择是否在 app block 周围加上 margin。这样可以让 app section 的边距和主题的整体布局更一致。

<div class="{% if section.settings.include_padding %}padded{% endif %}">
  {% for block in section.blocks %}
    {% render block %}
  {% endfor %}
</div>
{% schema %}
  {
    "name": "App wrapper",
    "settings": [
      {
        "type": "checkbox",
        "id": "include_padding",
        "default": true,
        "label": "Make section margins the same as theme"
      }
    ],
    "blocks": [
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "App wrapper"
      }
    ]
  }
{% endschema %}

注意

apps.liquid section 不是一个标准的 theme section。它不能被手动渲染，也就是说你不能用 {% section 'apps' %} 来引入它，而且它也不会出现在主题编辑器里，供商家手动添加到页面上。