Much like the ext.json file defines meta-data for an extension, a widget.json file defines meta-data for a widget. An example of a widget.json file is provided below:
{
"version": 1,
"global": false,
"javascript": "widget-type-js",
"i18nresources": "widget-type",
"availableToAllPages": true,
"jsEditable": true,
"config": {
}
"translations" : [
{
"language": "en",
"name": "Name in English"
},
{
"language": "de",
"name": "Name in German"
}
]
}The following list describes all the properties that you might choose to include in a widget.json file.
javascript: The name of the widget’s main JavaScript file, to which.jsis appended, to load in the Storefront. The convention is to use thewidget-typeas the JavaScript module name without the.jssuffix. This property is required if the widget includes one or more JavaScript files and should refer to the main JavaScript file for the widget. Other JavaScript files can be defined as dependencies in the main JavaScript file. See Include multiple JavaScript files for more details.jsEditable: A flag that determines whether it is possible to edit the widget’s JavaScript code within the Design tab. Defaults tofalse.i18nresources: The namespace name for the resources of this widget, to whichnsis pre-appended and.jsonis post-appended. The convention is to use thewidget-typefor this property, creating a file with a name likens.widget-type.json. This property is required if the widget has resource files. See Localize a widget for more information.imports: By default, widgets have access to data and functions contained in the common view models (user, cart, order and so on). However, in order for a widget to have access to page-specific view models, those view models must be explicitly defined in theimportsproperty. The possible values that are acceptable for the imports property depends on the type of page the widget will be placed on. See Acceptable values for the imports property for detailed information.availableToAllPages: Set this property totrueto allow the widget to be placed on all page types; the widget will appear in the Component library for all pages. Omit this property altogether to restrict placement of the widget to the page types defined in thepageTypesproperty. Also, omit this property for global widgets (see theglobalproperty below). Note that this property and thepageTypesproperty are mutually exclusive but one of them must be set.pageTypes: Defines which page types the widget can be placed on; the widget will appear in the Component library for the specified pages. If you use this property, you must omit theavailableToAllPagesproperty. Note that this property and theavailableToAllPagesproperty are mutually exclusive but one of them must be set.Available page types include:
productcategoryhomecartcheckoutconfirmationarticleerrorsearchResultsnoSearchResults
The widget will appear in the Component library for the page types you specify.
translations: An array that provides translations for the widget name. This name is displayed in the Components library panel that you use to add a widget to a page layout. Note that either thetranslationsproperty or thenameproperty, described below, is required.The
translationsproperty has two sub-properties,languageandname. Thelanguageproperty can be either a two-letter language code (for example,en) or a two-letter language code and a two-letter country code with an underscore in between (for example,en_US).ISO 639-1defines the two-letter language codes.ISO 3166-1 alpha-2defines the two-letter country codes.version: Specifies the version of the widget, used to ensure the right version of a widget is used in the storefront. See Understand widget versioning for more information. Defaults to 1.name: If your storefront only uses one language, meaning you do not need multiple translations for the name of the component, you can choose to use thenameproperty instead of thetranslationsproperty. Note that one of the two properties is required.global: Defines the widget as a global widget. A global widget does not include a display template. It is automatically added to all pages but, due to the lack of template, it is excluded from template rendering. Global widgets are useful for tasks like logging web analytics or loading JavaScript libraries. Defaults tofalse.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.hiddenFromSiteStudio: A Boolean that determines whether the widget’s initial state is to be hidden or not in the Component library. Set tofalseby default. See “Customize your component library widgets” in the Using Oracle Commerce Cloud Service guide for details on showing or hiding widgets in the Component library.

