装修-检查模式-输入框编辑联动

装修-检查模式-输入框编辑联动

1.输入框编辑联动

编辑联动： 1.当输入框进行编辑内容，将即时的进行联动，这个通信是通过iframe通信实现的 2.当输入框内容编辑完成，鼠标点击其他的地方，输入框失去焦点，这个时候，才会调用api进行内容的临时保存 3.这样实现的好吃：可以进行编辑内容的即时联动，响应几乎没有延迟。又可以节省api调用资源

开发实现

一：对于卡片部分

1.打开文件 sections/cascading-collection.liquid, 先找到上面截图，标题部分对应的schema

• id：heading
• type：language_input （支持多语言的输入框）

{
  "type": "language_input",
  "id": "heading",
  "label": {
    "text": "标题",
    "lang_params": {
      "en": "Heading",
      "tw": "標題"
    }
  },
  "default": {
    "text": "Shop by collections",
    "lang_params": {
      "en": "Shop by collections",
      "tw": "按系列購物"
    }
  }
}

2.得到值

<!-- 获取值 -->
{% assign heading = section.settings.heading %}

<!-- 进行判断是否为空 -->
{% if heading != blank %} 
    <div class="{{ header_class }}">
      <div class="f-cascading__header-wrapper">
        <h3 class="{{ heading_size }}" data-key="settings.heading" >
          <!-- 显示值，使用filter language，得到相应的语言值 -->
          {{ heading | language }}
        </h3>
      </div>
    </div>
{% endif %}

您可以看到，显示值的外层html标签是<h3>, 里面有一个属性：data-key="settings.heading"

• 卡片里面，进行即时联动，必须在值的外层html标签，加入属性：data-key
• 值的格式：settings.xxx，在上面的schema里面的id为heading，因此，值为settings.heading
• 因此，需要在<h3>加入一个属性data-key="settings.heading"

二：对于子卡片

子卡片的联动和卡片不同，如下图，级联专辑卡片的一个子卡片

1.我们先找到这个子卡片，专辑标题的schema配置

• id：collection_title
• type：language_input（支持多语言的输入框）

{
  "type": "language_input",
  "id": "collection_title",
  "label": {
    "text": "专辑标题",
    "lang_params": {
      "en": "Collection title",
      "tw": "专辑標題"
    }
  }
}

2.找到子卡片部分的代码

{%- 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 %}

3.找到snippets文件

{% render 'cascade-collection-card', block: block %} 对应的是 snippets/cascade-collection-card.liquid

{% assign collection = block.settings.collection.section_item_param %}
{% assign collection_image = blank %}
{% if collection != blank %}
  {% assign collection_title = collection.title %}
  {% assign custom_collection_title = block.settings.collection_title | language %}

  {% if custom_collection_title != blank %}
    {% assign collection_title = custom_collection_title %}
  {% endif %}
{% else %}
  {% assign collection_title = 'Collection title' %}
{% endif %}

...

<!-- 这里进行显示子卡片对应的值 -->
<a
  class="f-cascading-collection-card__button f-button f-button--white"
  href="{{ collection.url | default: "#" }}"
  data-key="blocks.{{ block_key }}.collection_title"
>
  {{- collection_title -}}
</a>

{{- collection_title -}}是子卡片属性对应的值，外层html标签是<a>标签，该标签加入了属性:data-key="blocks.{{ block_key }}.collection_title"

• 属性：data-key
• 属性值：blocks.{{ block_key }}.collection_title, {{ block_key }}是子卡片的key，collection_title是在schema定义中id的值

因此，加入：data-key="blocks.{{ block_key }}.collection_title", 即可对子卡片进行选中。

三：联动-总结

1.输入框编辑即时联动，需要按照上面的逻辑进行加入diamante

2.输入框失去焦点，会调用api进行保存，因此。即使您不加入即时联动的代码，在输入框失去焦点后，也会api更新，因此并不影响装修

• 如果您自己开发装修卡片，这个部分略显复杂，您也可以不做即时联动。