装修-检查模式-卡片选中

模版装修，检查模式，卡片选中

1.模版装修，检查模式，卡片选中，指的是：

• 检查模式，点击中间的卡片，左侧自动选中卡片，右侧自动出来卡片的配置信息

2.子卡片选中

• 检查模式，点击子卡片，左侧自动选中子卡片，右侧自动显示子卡片的配置

二次开发-实现

以section文件：sections/cascading-collection.liquid文件为例子

1.实现卡片的自动选中

在卡片对应的section，可以看到最外层是一个section文件

• 属性：data-section-id="{{ section.id }}"

<section
  class="{{ section_class }}" data-section-id="{{ section.id }}"
  style="--section-padding-top: {{ section.settings.padding_top }}px; --section-padding-bottom: {{ section.settings.padding_bottom }}px;"
>

</section>

加上属性：data-section-id="{{ section.id }}"，即可实现卡片的选中（检查模式）

2.子卡片的选中

sections/cascading-collection.liquid文件 可以看到下面的代码，这是对子卡片的渲染

  {%- for block_key in section.block_order -%}
    {% sectionblock block_key %}
      {%- assign block = section.blocks[block_key] -%}
      <div data-media-item>
        {% render 'cascade-collection-card', block: block %}
      </div>
    {% endsectionblock %}
    {{ item_separator }}
  {% endfor %}

需要在blocks循环，加上一个标签:sectionblock

• 使用这个标签套起来，即可实现子卡片的选中

{% sectionblock block_key %}
    ...[block的html内容]
{% endsectionblock %}