与主题编辑器集成分区

当用户通过主题编辑器自定义分区时，这些分区的 HTML 将直接在现有 DOM 上动态添加、移除或重新渲染，而无需重新加载整个页面。不过，页面加载时运行的任何相关 JavaScript 都不会再次运行。

此外，您必须确保在选择某个分区或块时，该分区或块在被选中时是可见的，并保持可见。例如，幻灯片部分应在选中该部分时滚动显示，滑动到选中的区块（幻灯片），并在选中该区块时暂停。

为了帮助识别主题编辑器的操作（如选择或重新排序部分和区块），可以使用主题编辑器的 JavaScript 事件。

您可能还想阻止特定代码在主题编辑器中运行。为此，可以使用 Liquid 和 JavaScript 变量来检测主题编辑器。

JavaScript 事件

为了识别分区和区块，主题编辑器会在相关分区或区块的父元素上查找特定的数据属性。分区由 Shopify 生成的元素包裹，默认情况下包含该属性。不过，区块需要使用区块对象的 shopify_attributes 属性手动添加属性。

主题编辑器会发出冒泡的分区和块 JavaScript 事件，这些事件不可取消。每个事件都有一个目标（event.target），根据上述数据属性，目标可以是相关的分区或块元素。

除分区和块事件外，主题编辑器还会在主题编辑器预览检查器激活或停用时发出事件。

下表概述了主题编辑器发出的事件：

类型	目标	详细	触发
shopify:inspector:activate	–	–	主题编辑器预览检查器已激活
shopify:inspector:deactivate	–	–	主题编辑器预览检查器停用
shopify:section:load	section	{sectionId}	添加或重新渲染了一个分区
shopify:section:unload	section	{sectionId}	某分区已删除或正在重新渲染
shopify:section:select	section	{ sectionId, load }	用户选择了侧边栏中的分区
shopify:section:deselect	section	{sectionId}	用户已取消选择侧边栏中的分区
shopify:section:reorder	section	{sectionId}	一个分区已重新排序
shopify:block:select	block	{ blockId, sectionId, load }	用户选择了侧边栏中的块
shopify:block:deselect	block	{ blockId, sectionId }	用户已取消选择侧边栏中的块

在上表中，blockId 代表块 ID，sectionId 代表分区 ID，而 load 则表示事件是由区块重新渲染触发的，还是由用户选择触发的。load的值为 true 或 false。

检测主题编辑器

您可以在 Liquid 和 JavaScript 中检测是否处于主题编辑器中。

Liquid

Liquid 请求对象有一个 Shopify.design_mode 属性，如果您在主题编辑器中，该属性将返回 true；如果不在主题编辑器中，则返回 false。例如

{% if request.design_mode %}
  <!-- This will only render in the theme editor -->
{% endif %}

检测主题编辑器预览检查器

除了激活或停用主题编辑器预览检查器时触发的 JavaScript 事件外，您还可以使用全局变量 Shopify.inspectMode。如果预览检查器已激活，它将返回 true；如果未激活，则返回 false。例如

if (Shopify.inspectMode) {
  // This will only execute if the theme editor preview inspector is currently activated
}

检测主题编辑器可视化预览

您可以在 Liquid 和 JavaScript 中检测是否处于主题编辑器可视化预览中。

Liquid

Liquid 请求对象有一个 visual_preview_mode 属性，如果处于主题编辑器可视化预览状态，则返回 true，否则返回 false。例如

{% if request.visual_preview_mode %}
    <!-- This will only render in the theme editor visual preview -->
{% endif %}

JavaScript

如果您在主题编辑器的可视化预览中，全局变量 Shopify.visualPreviewMode 将返回 true，否则返回undefined。
例如

if (Shopify.visualPreviewMode) {
  // This will only execute inside the theme editor's visual preview
}

原文链接https://shopify.dev/docs/themes/architecture/sections/integrate-sections-with-the-theme-editor