Define element meta-data in an element.json file

You must define your new elements by providing meta-data that defines key properties.

Similar to extensions and widgets, an element requires a manifest file, called element.json, to define key properties. The contents of an element.json file look similar to the following:

{
   "inline" : false,
   "supportedWidgetType" : ["widget-type", "widget-type", ...],
   "translations" : [
     {
       "language" : "en_EN",
       "title" : "Title in English",
       "description" : "Description in English"
     },
     {
       "language" : "de_DE",
       "title" : "Title in German",
       "description" : "Description in German"
     }
     ]
 }

The attributes available for element.json manifests are as follows:

• inline: A flag denoting whether the element should be inserted as a span (inline=true) or div (inline=false) when it is added to a widget instance.
• supportedWidgetType: A list of widget-type names that determines the availability of the element when editing widgets on the Design page. Either this property or the availableToAllWidgets property, described below, is required for stand-alone elements. Widget-specific elements do not require either property because they are, by definition, consumed only by their parent widget.
• availableToAllWidgets: Set this property to true to allow a stand-alone element to be placed on all widget types; the element will appear in the Element library for all widgets. Omit this property altogether to restrict placement of the stand-alone element to the widget types defined in the supportedWidgetType property.
• translations: An array that provides translations for both the element title and description. The title is displayed in the Element library panel that you use to add an element to its parent widget’s layout. The description is not displayed in the Commerce user interface but can provide helpful information to a developer.

  The translations property has three sub-properties, language, name and description. The language property 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-1 defines the two-letter language codes. ISO 3166-1 alpha-2 defines the two-letter country codes.