A set of meta-data properties must be defined to specify which primary resources provide widget functionality. In the context of an extension, you can define your widget meta-data by creating a ‘widget.json’ file in the widget directory of your extension.
The import item for a widget descriptor is described in the example below:
{
"name": "Widget Name",
"version": 1,
"global": false,
"javascript": "widget-name-js",
"i18nresources": "widget-name",
"availableToAllPages": true,
"pageTypes": ["product", ...],
"jsEditable": true,
"config": {
}
}The product details widget descriptor example above includes some properties used for the “fragmentation” concept of a widget. It provides a full view of what meta-data could be required for a widget delivered via an extension. The following list outlines each property:
javascript - the name of the JavaScript file, to which ‘.js’ is appended to load it in Storefront.
jsEditable - A flag that determines whether it will be possible to edit the JavaScript code within the Design tab. Defaults to false.
i18nresources - the namespace name for the resources of this widget, to which, ‘ns.’ is pre-appended and ‘.json’ is post-appended. For example, ns.product-details.json.
imports - data items that should be mapped to widgets of this type.
version - ensures the right version of a widget is used.
layouts – defines the version of the widget so the widget can be updated. Only the latest version can be added to a new layout.
defaultLayout - the default layout from the list defined for the layouts property.
pageTypes - which page types this widget is available to placed on. Page types available for widgets: “product”, “category”, “home”, “cart”, “checkout”, “confirmation”, “article”, “error”, “searchResults”, “noSearchResults.
availableToAllPages – similar to the pageTypes property, the main use will be in Grid View. Can set a widget to be available on all page types. Defaults to false. For Global Widgets this flag is false.
translations - translation items for each supported locale for the Widget Descriptor Display Name. Alternatively the display name value can be set directly
Other Properties for a Widget Type:
editableWidget - hides the widget on the Design tab. This means that the widget does not appear in Code View or Layout Preview. It will still be seen in Grid View. Defaults to true.
global - a global widget does not a display template. It is automatically added to all pages but a global widget is excluded from the template rendering.
globalEnabled - allows a global widget to be disabled. Defaults to true.
minWidth - the minimum width that this widget will fit into it. The system will check if the widget will fit in the region in Grid View.
