片段渲染 API​

你可以使用片段渲染 API，通过 AJAX 请求为主题页面内容获取到 HTML 新片段。这样的话，你就可以通过获取和动态替换某些元素来更新页面内容，而无需重新加载整个页面。

例如，你可以使用片段渲染 API 对搜索结果进行分页，而无需在切换页码的时候重新加载整个页面。

请求多个片段​

你可以使用 sections 查询参数来渲染页面中的某些片段，该查询参数是由渲染片段的 片段 ID 组成。响应结果是一个 JSON 对象，其中包括每个片段 ID 和对应渲染的 HTML。

sections 参数必须是以逗号分隔的 ID 列表:

?sections=header,footer

通过将 sections 参数附加到任何页面 URL，可以在任何页面的上下文中渲染片段。例如，你可以在首页请求 /?sections=product-recommendations，或者在特色产品系列页面请求 /collections/featured?sections=product-recommendations 拿回来【推荐商品列表片段】再填充到页面中的某个地方。

以下示例代码使用 JavaScript fetch 请求两个片段：

fetch('/?sections=header,footer').then((response) => {
    const renderSections = response.json();
    
    const headerHtml = renderSections.header;
    const footerHtml = renderSections.footer;
})

响应结果:

{
  "header": "<div id=\"shopline-section-header\" class=\"shopline-section\">\n<!-- section content -->\n</div>",
  "footer": "<div id=\"shopline-section-footer\" class=\"shopline-section custom-footer\">\n<!-- section content -->\n</div>"
}

片段错误响应​

无法正常渲染的片段（包括因已发布主题不存在而失败的片段）将会在 JSON 响应中返回 null 。响应可能是返回 HTTP 200 状态，不过响应体中会包含一个或多个 null 值的片段。因此，你需要考虑和处理返回 null 值的情况。

请求单个片段​

在大多数情况下，你可以使用以上提到的 sections 参数及其响应数据来处理片段的渲染，当然也可以是渲染单个片段的场景。不过如果想渲染单片段的话，更推荐是使用 section_id 查询参数来请求单个片段。

?section_id=header

使用 section_id 查询参数渲染出来的片段直接以 HTML 形式返回，并且与 sections 一样，此参数可用于在任何页面的上下文中渲染片段。

<div id=\"shopline-section-header\" class=\"shopline-section\">\n<!-- section content -->\n</div>

查找片段 ID​

你可以通过两种方式找到片段 ID：

• 通过 Handlebars section 对象，使用 section.id
• 从片段 Document 节点的 ID 属性中 提取

从片段 Document 节点中提取片段 ID​

你可以从片段对应 Document 节点的 ID 属性中提取片段 ID。例如，以下是片段 Document 节点的一般格式：

<div id="shopline-section-[section-id]" class="shopline-section">
  <!-- section content -->
</div>

开发者在 JSON 模板 中添加了片段后，我们就会为片段生成一个动态 ID。例如在同一个页面里，加了两个商品列表片段，两个片段是对应不一样的 ID，这样能方便开发者对每个片段去做定位。