How to make a BigCommerce widget compatible with PageBuilder

问题

I'm following the tutorial here https://developer.bigcommerce.com/api-docs/storefront/widgets/widgets-tutorial

I made the widget template by performing a post request to https://api.bigcommerce.com/stores/81mdugvyu5/v3/content/widget-templates with this in the body

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

The response was successful. I then performed a post request to https://api.bigcommerce.com/stores/81mdugvyu5/v3/content/widgets

with this in the body

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

The response was successful. My custom widget does then appear in page builder but when I try to add it I receive this error

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

When I visit the developer documentation it links to on how to make it compatible with Page Builder I don't see any mention of Page Builder.

Is there any way to find out how to make the tutorial widget compatible with Page Builder?

回答1:

@Mikhail was correct. I was able to add it as a widget accessible by page builder by specifying a schema in the body of my widget-templates post request. After sending another request with the schema added like this:

{
  "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": []
       }
    ]
}

It worked.

You can find more information about schema settings for page builder here https://developer.bigcommerce.com/stencil-docs/page-builder/page-builder-overview

and you can find a list of the items available in your schema here https://developer.bigcommerce.com/stencil-docs/page-builder/schema-settings

来源：https://stackoverflow.com/questions/63176174/how-to-make-a-bigcommerce-widget-compatible-with-pagebuilder

标签

bigcommerce