跳到主要内容

App blocks for themes

如果您的 section 属于 Liquid template，则应支持 @app 类型的 block。这些 block 允许应用开发者创建 block，让商家无需直接编辑 theme 代码即可将应用内容添加到 theme 中。

📘 说明

@app 类型的 block 不支持在静态渲染的 section 中使用。

要支持 app block，您需要完成以下三件事：

在 section 中支持 app block​

要允许商家向 section 添加 app block，您需要在 section schema 中包含一个 @app 类型的通用 block。例如：

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

🚧 注意

@app 类型的 block 不接受 limit 参数，包含该参数将导致错误。

渲染 app block​

要渲染 app block，您需要检查相应类型，并使用以下代码：

{% render block %}

例如：

{% for block in section.blocks %}
  {% if block.type contains 'shoplazza://apps' %}
    {% render block %}
    ...
  {% endif %}
{% endfor %}

App block 容器​

App block 可以通过两种方式添加到页面：

  • 作为渲染该 block 的 section 范围内的 block
  • 类似于 section 的方式，占据页面全宽来渲染内容

由于 app block 本身不是 section，Shoplazza 默认会将这些全宽 app block 包裹在一个平台生成的 section 中。但您可以通过创建名为 apps.liquid 的 section 来覆盖该默认 section。

apps.liquid section schema 需要包含一个 @app 类型的 block 以及一个 preset。如果其中任一缺失，则主题编辑器中将返回"不支持应用"或"应用 section 无效"的错误，商家将无法使用该 section。

🚧 注意

apps.liquid section schema 不能包含 templates schema 属性。该 section 默认应在所有 template 上可用。

例如：

{% for block in section.blocks %}
  {% render block %}
{% endfor %}

{% schema %}
{
  "name": "apps",
  "max_blocks": 16,
  "settings": [],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "apps",
      "cname": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "category": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "display": true,
      "blocks": []
    }
  ]
}
{% endschema %}

要让商家能够控制应用在 app section 内的外观，您可以添加一个允许商家在 app block 周围添加边距的设置，使 app section 的边距与 theme 布局保持一致。

<div class="{% if section.settings.page_width %}page-container{% endif %}">
  {% for block in section.blocks %}
    {% render block %}
  {% endfor %}
</div>

{% schema %}
{
  "name": "apps",
  "max_blocks": 16,
  "settings": [
    {
      "type": "checkbox",
      "id": "page_width",
      "label": {
        "en-US": "Make section margins the same as theme",
        "zh-CN": "使分区页边距与模板相同"
      },
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "apps",
      "cname": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "category": {
        "en-US": "Apps",
        "zh-CN": "应用"
      },
      "display": true,
      "blocks": []
    }
  ]
}
{% endschema %}

📘 说明

apps.liquid section 不是标准的 theme section。它无法手动渲染，即您无法使用 {% section 'apps' %} 来引入它，商家也无法在主题编辑器中将其添加到页面。