[]

blocks

blocks 目录下的文件定义的是在组件下可添加的区块，每个区块都有自己的一套配置。你可以创建这些区块，使这些区块在组件中可以重复使用。

区块的类型有两种：

公有区块：可以被任意组件或区块引用的区块。
私有区块：只能在对应的组件下使用。
App block：由应用创建，为主题提供扩展能力。

目录结构

blocks 目录下的每个区块必须要包含 .html 文件，也可以附加 .css 和 .js 后缀文件。

blocks
├── product
│   ├── card.css
│   ├── card.js
│   └── card.html
└── heading.html

blocks 目录可以存放在两个地方：

公有区块

公有区块可以被任意的组件或区块引用，需存放在主题根目录的 blocks 目录下。

...
sections
blocks
└── product
    ├── card.css
    ├── card.js
    └── card.html
templates
...

以下是在精选商品组件中使用公有区块商品卡片的例子：

<!-- sections/featured-collection/featured-collection.html -->
<section>
  {{#blocks}}
    {{#if forblock.type == "product/card"}}
      {{#var products_pagination = section.settings.collection | get_product_pagination(4) /}}
      <ul>
        {{#for product in products_pagination.list}}
          <li>
            {{#block product=product /}}
          </li>
        {{/for}}
      </ul>
    {{/if}}
  {{/blocks}}
</section>
{{#schema}}
{
  "name": "featured-collection",
  "settings": {
    "type": "collection",
    "id": "collection",
    "label": "collection"
  },
  "blocks": [
    {
      "type": "product/card",
      "limit": 1
    }
  ]
}
{{/schema}}

使用 blocks tag 循环，获取 forblock 对象，判断其 type 字段。
在判断为 forblock.type == "product/card" 的 if 语句块中使用 get_product_pagination filter 对 section.settings.collection 获取分页信息。
遍历 products_pagination.list 获取 product object。
通过 block tag 把 product object 传入 product/card 区块。

对于无需自定义渲染区块内容或者传递参数的情况，可以直接使用 content tag 进行渲染，比如以下例子展示了最简单区块渲染：

<div class="block-button-group">
  {{#content "blocks" /}}
</div>
{{#schema}}
{
  "name": "button-group",
  "blocks": [
    {
      "type": "button",
      "limit": 2
    }
  ]
}
{{/schema}}

私有区块

对于某些组件来说，需要把专有的功能模块拆分成区块来给商家进行配置。此时可以使用私有区块的能力来对组件进行组合。私有区块只能被当前组件或者当前组件下的其他区块引入使用。

私有区块的文件存放在组件目录下的 blocks 目录。

sections
├── blog
│   ├── blocks
│   │   ├── articles.css
│   │   └── articles.html
└───└── blog.html

在 schema 中 blocks 字段里面的 type 字段使用 $ 符号前缀加区块文件名，表示引入私有区块：

<!-- sections/blog/blog.html -->
<section>
{{#blocks}}
  {{#if forblock.type == "$articles" /}}
    {{#block blog=section.settings.blog /}}
  {{/if}}
{{/blocks}}
</section>
{{#schema}}
{
  "name": "blog",
  "settings": {
    "type": "blog",
    "id": "blog",
    "label": "blog"
  },
  "blocks": [
    {
      "type": "$articles",
      "limit": 1
    }
  ],
}
{{/schema}}

嵌套区块

区块可以嵌套在组件和区块中，使得可视化编辑器获得更加灵活的配置能力。

以上述的私有区块为例子，在 articles 区块中嵌套引入公共的 article card 区块，在区块里面使用 props object 获取传入的参数：

<!-- sections/blog/blocks/articles.html -->
{{#var articles_pagination = props.blog | get_article_pagination(10) /}}
{{#var articles = articles_pagination.list /}}
<ul>
  {{#blocks}}
    {{#for article in articles}}
      <li>
        {{#block article=article /}}
      </li>
    {{/for}}
  {{/blocks}}
</ul>
{{#schema}}
{
  "name": "articles",
  "blocks": [
    {
      "type": "article/card",
      "limit": 1
    }
  ]
}
{{/schema}}

注意：在可视化编辑器能够展示的最大嵌套层级为 6 层。

App Block

App block 是属于主题应用扩展的一种，由 SHOPLINE App 进行注入，然后在主题编辑中添加，最后在呈现在主题页面中，详细请参阅主题与应用集成。

schema

区块支持添加 schema tag，在此 tag 内可以定义一个区块的各种属性，例如区块的名称。

这里面的内容和组件schema 保持一致。详情请参阅组件 schema。

在区块中获取配置的值，使用的对象是 block.settings，例如：

<!-- /blocks/article/card.html -->
{{#var articles_pagination = props.blog | get_article_pagination(10) /}}
{{#var articles = articles_pagination.list /}}
<h2>{{ block.settings.title }}</h2>
<ul>
  {{#blocks}}
    {{#for article in articles}}
      <li>
        {{#block article=article /}}
      </li>
    {{/for}}
  {{/blocks}}
</ul>
{{#schema}}
{
  "name": "articles",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "title"
    }
  ],
  "blocks": [
    {
      "type": "article/card",
      "limit": 1
    }
  ]
}
{{/schema}}