Widgets¶

Widgets are JSON-based resources that enable the configuration of one or more components, which can then be reused across multiple pages. This approach streamlines content creation, as it allows many pages to be generated from a single, centralized configuration source. By defining components within a widget, developers can maintain consistency, reduce redundancy, and simplify updates, ensuring that changes to the widget automatically propagate across all pages that use it. This modular system enhances efficiency and scalability within the development process.

Attribute	Type	Required	Description	Default
`widgets'	Array String	No	A string array of widget paths	-
`components`	Object	No	An object array of components	-
`order`	Array(string)	Yes	The order of components	-

Example spot-light-banner-widget.widget Widget

    {
      "id": "spot-light-banner",
      "components": {
        "image-banner-component-1": {
          "id": "image-banner-component",
          "enabled": true,
          "settings": [
            {
              "name": "backgroundImage",
              "value": "https://example.com/banner.jpg"
            }
          ],
          "blocks": {
            "heading-block": {
              "type": "heading",
              "settings": {
                "heading": "https://example.com/banner.jpg"
              }
            },
            "description-block": {
              "type": "description",
              "settings": {
                "descriptionText": "This is a sample description piece of text"
              }
            }
          },
          "blockOrder": [
            "heading-block",
            "description-block"
          ]
        }
      },
      "order": [
        "image-banner-component-1"
      ]
    }

Context Widgets¶

Context widgets are JSON-based resources that extend and modify one or more properties of a parent JSON widget to suit a specific context or use case. By inheriting the core structure and functionality of the parent widget, context widgets allow for targeted customizations—overriding particular features, values, or behaviors to better align with the requirements of a given page or environment. This flexibility enables developers to maintain a consistent base configuration while tailoring individual widgets to fit unique scenarios, streamlining the development process and enhancing content adaptability across different contexts. A contextual widget has three key attributes that define the scope and behavior of its inheritance from the parent widget. These attributes govern how the widget inherits properties, overrides specific features, and adapts to its unique context. By leveraging these attributes, developers can fine-tune the widget’s functionality, ensuring that it seamlessly integrates into the targeted page or environment while maintaining the integrity of the parent widget's core structure. This approach provides a high level of customization, allowing for efficient reuse and consistent behavior across diverse contexts, without the need for redundant configurations.

Attribute	Type	Required	Description	Default
`parent`	String	Yes	The parent JSON page to inherit from	-
`context`	Object	Yes	An object array with the context scenarios for inheritance	-
`widget`	Object	Yes	Object containing the attributes of the parent widget to be overloaded	-

Currently the only context object available is market.

Attribute	Type	Required	Description	Default
`markets`	String or Array(String)	Yes	The market for the context

Single Market Example: Context Widget spot-light-banner-widget.intl.widget inherits from spot-light-banner-widget.widget disables the image-banner-component-1 widget component instance if the market scope of the page request is "international"

    {
      "parent": "pot-light-banner-widget.widget",
      "context":  {
        "markets": "intl"
      },
      "page": {
          "components": {
            "image-banner-component-1": {
              "enabled": false
            }
          }
       }
    }

Multi-Market Example: Context Widget spot-light-banner-widget.multi.json inherits from spot-light-banner-widget.json disables the image-banner-component-1 widget component instance if the market scope of the page request is "Germany" or "France"

    {
      "parent": "pot-light-banner-widget.json",
      "context":  {
        "markets": ["Ger", "Fra"]
      },
      "page": {
          "components": {
            "image-banner-component-1": {
              "enabled": false
            }
          }
       }
    }

Widgets¶

Widget Attributes¶

Context Widgets¶