How to make a BigCommerce widget compatible with PageBuilder - bigcommerce

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?

#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

Related

How to get a guest token for embedding a chart in Apache Superset

The Apache-Superset swagger doc for the guest_token API shows the following payload for the POST request:
I used it successfully from the following Python code snippet from their example included in the source:
body = {
"resources": [
{
"id": "1",
"type": "dashboard"
}
],
"rls": [
],
"user": {
"first_name": "John",
"last_name": "Doe",
"username": "johnd"
}
}
However, the documentation does not give any details on what other resource types besides "dashboard" are available. Can I directly embed a chart? I could have tried the "chart" but there is no documented way to obtain an embedded-id for a chart similar to the procedure that they describe for a dashboard.
To summarize, can I directly embed a chart too similar to a dashboard by this API and embedded sdk?
According to the source, the only accepted resource-type for guest tokens is dashboard:
class GuestTokenResourceType(Enum):
DASHBOARD = "dashboard"
Yeah. Worse case, you could create a 1-chart Dashboard, and embed that.

Custom 'rendering' of Display Value completing a Survey in SurveyJS

I can't find anything in the documentation of SurveyJS. If there is something I missed, a link would be great!
We have implemented a Custom Widget as described here and it works well. What we want to do next is to change the Display Value on the 'Survey Results' section when testing the survey from the creator. In other words, a 'Signature' question's result is displayed as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAAUGklEQVR4nO3dz28j53kH8PwZFYM6btOGAnIwWpRCe2iLAFSK2IgLUD20PTRa9GL4IiUHF2hBnZxDUuoSyT8623rLxAmpbFdCxaVn15n1luQOC3K7IW1yzRKt6HpEgQfyMOSBGPDy9CC9s8MhJc4MZzjvkN8PwIN3sdrZxerr933meZ/3KwQAEBBf8fsBAACsQmABQGAgsAAgMBBYABAYCCwACAwEFgAEBgILAAIDgQUAgYHAAoDAQGABQGAgsABM1JFGtX6Xav0upZUGHZ1ffm63qhOfYu+Cir0LqvW7fj/2SkBgwcpSRxqJnTPab5bp1tMsbebSFMocUihzSGFRoIiUpJh8rH+2y9mx/47mUhSRkhQWBf3XrYsCbRVPaLci0e1WlWr9LinDgd9...
but we don't want to do this, we want to render the result... but not for the signature but for our custom widget.
Also, is there a function to review your answers before submitting? If there is, we'll most probably also need to display a rendered answer of our custom widget here.
Showing a preview of answers before submitting
There is a SurveyJS feature, which does that. To enable it you need to add a survey-level parameter called showPreviewBeforeComplete. You can choose from the following values:
showAllQuestions
showAnsweredQuestions
This feature will automatically render all images or signatures on the preview page.
The feature is also available through the Survey Creator's UI under the "Navigation" section of the survey settings panel.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
}
],
"showPreviewBeforeComplete": "showAnsweredQuestions"
}
Rendering uploaded images
If you would like to create your own widget, which renders uploaded images or signatures, you can base it on the HTML widget. It should contain an <img src='{question1}' /> tag, where the value of the src parameter should be the base64 data string, which you retrieved from the signature pad widget.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
},
{
"name": "page2",
"elements": [
{
"type": "html",
"name": "question2",
"html": "<img src='{question1}' />"
}
]
}
]
}

How can I add product to shopify store from another website?

I want add products to Shopify store form another website (maybe) using API. I not finding the request URL for do it. Please help me make it. I Writing this website with PHP (Laravel framework)
To create new product you can use the Product REST API
Example:
POST /admin/api/2020-07/products.json
{
"product": {
"title": "Burton Custom Freestyle 151",
"body_html": "<strong>Good snowboard!</strong>",
"vendor": "Burton",
"product_type": "Snowboard",
"metafields": [
{
"key": "new",
"value": "newvalue",
"value_type": "string",
"namespace": "global"
}
]
}
}
Pay attention that for such type operation you will need to have the write_products scope

Netcore server respond to slack interactive message

I am trying to build Slack application with asp net core server. Currently, I have added Slash command which makes a request to my local server through ngrok. Once my server receives that request, it makes a post request to configured slack webhook to display interactive message which looks like pic from attachment.
I want user to be able to select yes or no and receive the result in my controller, but I can't realize how to tell Slack where should it make a post request. I attach the code of this message which is posted through weebhook into Slack:
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "This is a section block with a button."
}
},
{
"type": "actions",
"block_id": "actionblock789",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Yes"
},
"style": "primary",
"value": "yes"
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "No"
},
"value": "no"
}
]
}
]
}
What I have in netcore is TestController with route /api/test which I suppose should receive from Slack a payload where information about selected button is set, but I couldn't find a way where specify a url in this json code.
You can not configure a URL in the JSON code. That is not how it works with the Slack API.
Slack will send all responses to interactive message - like when someone clicks on a button - to the configured request URL of your Slack app. Check out this link how to find that parameter: documentation

API Pagination Standards

I have been working on an API and pagination is required. Only 25 elements will be returned in each request. I was looking around for standards and I seem to see 2 different things going on.
The Link Header
Link: https://www.rfc-editor.org/rfc/rfc5988
Example:
Link: <https://api.github.com/user/repos?page=3&per_page=100>; rel="next",
<https://api.github.com/user/repos?page=50&per_page=100>; rel="last"
In the JSON response
Link: API pagination best practices
Example:
"paging": {
"previous": "http://api.example.com/foo?since=TIMESTAMP"
"next": "http://api.example.com/foo?since=TIMESTAMP2"
}
Question:
Should I do both? and that being said; is the key "paging" the correct key? or "links" or "pagination"
I would say it depends on the structure of data you return (and may return in the future).
If you never have nested objects that need their own links, then using the Link header is (mildly) preferable, because it's more correct. The issue with nested objects is that you can't nest Link headers.
Consider the following collection entity:
{
"links": {
"collection": "/cards?offset=0&limit=25"
},
"data": [
{
"cardName": "Island of Wak-Wak",
"type": "Land",
"links": {
"set": "/cards?set=Arabian Knights"
}
},
{
"cardName": "Mana Drain",
"type": "Interrupt",
"links": {
"set": "/cards?set=Legends"
}
}
]
}
There's no good way to include links for the cards in the headers.