如何使 BigCommerce 小部件与 PageBuilder 兼容

Question

我正在按照此处的教程进行操作 https://developer.bigcommerce.com/api-docs/storefront/widgets/widgets-tutorial

我通过向 https://api.bigcommerce.com/stores/81mdugvyu5/v3/content/widget-templates 执行 post 请求制作了小部件模板，在正文中包含此内容

{
  "name": "Header Images",
  "template": "{{#each images}}<a href='{{image_url}}'><img src={{image_source}} style='width:33.3%'/></a>{{/each}}"
}

响应成功。然后我向 https://api.bigcommerce.com/stores/81mdugvyu5/v3/content/widgets

执行了 post 请求

体内有这个

{
  "name": "Header Images",
  "widget_configuration": {
    "images": [
      {
        "image_url": "https://google.com",
        "image_source": "https://cdn11.bigcommerce.com/s-n0i50vy/images/stencil/1280x1280/products/91/309/thekinfolktablecover_1024x1024__80715.1456436719.jpg?c=2&imbypass=on"
      },
      {
        "image_url": "https://google.com",
        "image_source": "https://cdn11.bigcommerce.com/s-n0i50vy/images/stencil/1280x1280/products/109/361/kinfolkessentialissue_1024x1024__22507.1456436715.jpg?c=2&imbypass=on"
      },
      {
        "image_url": "https://google.com",
        "image_source": "https://cdn11.bigcommerce.com/s-n0i50vy/images/stencil/500x659/products/85/282/livingwithplants_grande__26452.1456436666.jpg?c=2&imbypass=on"
      }
    ]
  },
  "widget_template_uuid": "7c5f05c2-2361-45a3-bb99-89554dd145ee"
}

响应成功。然后我的自定义小部件确实出现在页面构建器中，但是当我尝试添加它时，我收到此错误

This widget is not supported by Page Builder. Please consult our developer documentation for more information on how to make your widget compatible with Page Builder

当我访问开发者文档时，它链接到有关如何使其与 Page Builder 兼容的内容，但我没有看到任何提及 Page Builder 的内容。

有什么方法可以让教程小部件与 Page Builder 兼容吗？

Answer 1

@Mikhail 是正确的。通过在 widget-templates post 请求的正文中指定模式，我能够将其添加为页面构建器可访问的小部件。在发送另一个添加了架构的请求后：

{
  "name": "Header Images",
  "template": "{{#each images}}<a href='{{image_url}}'><img src={{image_source}} style='width:33.3%'/></a>{{/each}}",
  "schema": [
       {
      "type": "tab",
      "label": "Content",
      "sections": []
       }
    ]
}

成功了。

您可以在此处找到有关页面构建器架构设置的更多信息https://developer.bigcommerce.com/stencil-docs/page-builder/page-builder-overview

您可以在此处找到架构中可用项目的列表 https://developer.bigcommerce.com/stencil-docs/page-builder/schema-settings

如何使 BigCommerce 小部件与 PageBuilder 兼容

How to make a BigCommerce widget compatible with PageBuilder

bigcommerce