Page Designer Meta Definition Files

Each page type and component type requires a JSON meta defintion file. A meta definition file for a page type describes the regions of the page where a merchant can place components. A meta defintion file for a component type describes the attributes that a merchant defines when using the component type and can also define regions within the component type.

Put the meta definition file in one of the following directories of the custom cartridge, or any arbitrary subdirectory within these directories:

• Page types: <your_cartridge>/cartridge/experience/pages
• Component types: <your_cartridge>/cartridge/experience/components

The meta definition file name can include only alphanumeric or underscore characters. If you put the meta definition file into a subdirectory within the /experience/pages or /experience/components directories, the names of the levels in the subdirectory must also use only alphanumeric or underscore characters.

To view schema files that describe the JSON formatting for the meta definition file, see Page Designer JSON Schemas.

This example promotion page type meta definition file, named promopage.json, defines three regions for the promotions page: header, main, and footer. The header and footer regions can display only one component at a time, as specified by max_components = 1. The region_definition for the main region does not include a max_components value, indicating that the main region can display any number of components. The main region uses component_type_exclusion to specify that components of type banner are not allowed in the main region.

The max_components value restricts the number of components rendered for a region at a time, but the region can contain any number of components. You can therefore display different components for different customers or on different schedules. For example, you could have a banner region that displays one component in winter and a different component in summer.

         promopage.json
{
    "name":"Promopage",
    "description":"A promotional page.",
    "region_definitions":[
      {
        "id":"header",
        "name":"Name",
        "description":"Header of the promopage",
		"max_components":1
      },
      {
        "id":"main",
        "name":"Main",
        "description":"Main area of the promopage",
        "component_type_exclusions":[
           {"type_id":"banner"}
        ]
      },
      {
        "id":"footer",
        "name":"Footer",
        "description":"Footer of the promopage",
        "max_components":1
      }
    ]
}

This example banner component type meta definition file, named banner.json, defines four attributes that the merchant can set: the image file, its alt text, its size, and an attribute named Magic Unicorns that lets the merchant select which unicorn to display on the banner. The Magic Unicorns attribute is configured using a custom UI control, com.sfcc.magical. In the Page Designer visual editor, the attributes appear in groups. For example, the four attributes defined in this file appear in the visual editor in a group labeled Banner Image Configuration.

The default_value setting for an attribute is used only for rendering the page in the storefront or previewing in the visual editor. The default_value is not shown as preselected in the visual editor that the merchant uses to configure the component. Rendering behavior based on settings for required and default_value is as follows:

• Required is true and a default_value is configured: The default_value is assigned to the attribute for rendering the page, but is not shown as preselected in the visual editor. If the merchant does not configure a value for the attribute and saves the component, no error message is presented.
• Required is false and a default_value is configured: The default_value is assigned to the attribute for rendering the page, but is not shown as preselected in the visual editor. If the merchant does not configure a value for the attribute and saves the component, no error message is presented.
• Required is true and no default_value is configured: If the merchant does not configure a value for the attribute and saves the component, an error message is presented.
• Required is false and no default_value is configured: If the merchant does not configure a value for the attribute and saves the component, no error message is presented.

         banner.json
{
  "name": "Banner",
  "description": "A banner.",
  "group": "content",
  "attribute_definition_groups": [
    {
      "id": "image",
      "name": "Banner Image Configuration",
      "description": "You can define the image file, size and alt text for the banner image.",
      "attribute_definitions": [
        {
          "id": "image",
          "name": "Banner Image",
          "description": "The image shown by the banner.",
          "type": "file",
          "required": true
        },
        {
          "id": "alt",
          "name": "Banner Image Alt Text",
          "description": "The image alt text shown by the banner.",
          "type": "string",
          "required": false
        },
        {
          "id": "size",
          "name": "Size",
          "description": "The banner size.",
          "type": "enum",
          "values": [
            "small",
            "medium",
            "large"
          ],
          "required": true,
          "default_value": "medium"
        },
        {
          "id": "magic",
          "name": "Magic Unicorns",
          "type": "custom",
          "required": true,
          "editor_definition": {
            "type": "com.sfcc.magical",
            "configuration": {
              "options": {
                "config": [
                  "Auris",
                  "Chant",
                  "Elmas",
                  "Majesty",
                  "Moriba",
                  "Mystery",
                  "Mystic",
                  "Snowflake",
                  "Solstice",
                  "Sunshine"
                ]
              }
            }
          }
        }
      ],
      "region_definitions": []
    }
  ]
}

The 3column.json meta definition file is for a component type that represents a layout of three columns. Each column is a region in the meta definition file.

         3column.json
{
  "name": "1 Row, 3 Column, Landscape",
  "group": "layouts",
  "attribute_definition_groups": [],
  "region_definitions": [
      {
        "id":"column1",
        "name":"Column 1",
        "max_components":1
      },
      {
        "id":"column2",
        "name":"Column 2",
        "max_components":1
      },
      {
        "id":"column3",
        "name":"Column 3",
        "max_components":1
      }
  ]
}