与主题编辑器集成​

当用户通过主题编辑器自定义 section 时，这些 section 的 HTML 会动态地直接添加、移除或重新渲染到现有的 DOM 中，而无需重新加载整个页面。然而，页面加载时运行的任何关联 JavaScript 不会再次执行。

此外，必须确保在选择 section 或 block 时，该 section 或 block 在选择时会保持选中状态。例如，轮播图 section 在选择该 section 时会滚动到视图中并滚动到选定的轮播图 block，并在选中该 block 时暂停自动轮播。

为了帮助识别主题编辑器的操作，如 section 和 block 的选择或重新排序，可以使用主题编辑器发出的 JavaScript 事件。

你可能还想阻止特定代码在主题编辑器中运行。为此，您可以使用 Handlebars 和 JavaScript 变量来检测主题编辑器，并相应地调整代码执行。

Javascript 事件​

为了识别 section 和 block，主题编辑器会在相关 section 或 block 的父元素上查找特定的数据属性。section 会被 SHOPLINE 生成的元素包裹，该元素默认包含此属性。然而，block 需要手动使用 block 对象的 shopline_attributes 属性添加该属性。

主题编辑器会发出 section 和 block 的 JavaScript 事件，这些事件会冒泡且不可取消。每个事件都有一个目标对象（event.target），该目标对象是基于上述 SHOPLINE 数据属性的相关 section 或 block 元素。

除了 section 和 block 事件外，主题编辑器还会在预览检查器或停用时发出事件。

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

在上表中，blockId 表示 block ID，sectionId 表示 section ID，selected 表示 section 的选中状态，selected 的值为 true 或 false

检测主题编辑器​

你可以在 Handlebars 和 JavaScript 中检测是否在主题编辑器中.

Handlebars​

在这个示例中，如果你处于主题编辑器中，request.design_mode 属性将返回 true，否则返回 false。

{{#if request.design_mode }}
	<!-- 这只会在主题编辑器中渲染  -->
{{/if}}

JavaScript​

在这个示例中，Shopline.designMode 变量将在处于主题编辑器时返回 true，如果不在主题编辑器中则返回 false。

if (Shopline.designMode) {
	// 这里只会在主题编辑器中执行
}