Default Component Theme Settings

In the settings.json file in your Plaza theme, you can set default components with their schema form setting values to use for every storefront page. Your storefront pages are filled with default components based on which component or PageOrderableContainer tag elements you provided in your theme.

Example

For example, in the profile.html file in the content/pages/profile folder of your current theme (that is, the profile page), you set up the page with the ProductBanner and a PageOrderableContainer that will contain ProductDescription, ProductReviews, and ProductTopFeatures components. Please note that a PageOrderableContainer tag allows you to define a layout management container where you can set component(s) that can be managed in the Theme Editor.

<component name="ProductBanner" id="ProductBanner"></component>
<PageOrderableContainer name="PageOrderableContainer" id="PageOrderableContainerProfilePage"></PageOrderableContainer>

In the settings.json file, you can fill in some schema form setting values for each component. All you have to do is follow this JSON structure:

{
  "pages" : {
    "profile" : {
      "components" : {
        "ProductDescription:orderable:d7254b33-ac88-4945-a248-edf6a87a2b16" : {
          "isAddonsVisible" : {
            "value" : true,
            "type" : "TOGGLE"
          },
          "isPricesVisible:orderable:83a7e00c-b3d5-4d64-8919-a9cb3fa2d5b3" : {
            "value" : true,
            "type" : "TOGGLE"
          },
          "layout" : {
            "value" : "horizontal-thumbnails",
            "type" : "DROPDOWN"
          }
        },
        "ProductReviews:orderable:7c059217-1dbc-4b75-a6ee-a7ca740facd6" : {
          "isAvatarVisible" : {
            "value" : true,
            "type" : "TOGGLE"
          },
          "position" : {
            "value" : "right",
            "type" : "DROPDOWN"
          }
        },
        "ProductTopFeatures:orderable:59db9f73-9caa-48b2-9df9-da98413e7de8" : {
          "numberOfColumns" : {
            "value" : "two",
            "type" : "DROPDOWN"
          },
          "withImages" : {
            "value" : false,
            "type" : "TOGGLE"
          }
        },
        "ProductBanner" : {
          "bannerBackgroundColor" : {
            "value" : "#ffffff",
            "type" : "COLORPICKER"
          },
          "descTextSize" : {
            "value" : "medium",
            "type" : "DROPDOWN"
          }
        }
      },
      "orderableComponents" : [{
        "name": "ProductDescription",
        "id": "ProductDescription:orderable:d7254b33-ac88-4945-a248-edf6a87a2b16"
      }, {
        "name": "ProductReviews",
        "id": "ProductReviews:orderable:7c059217-1dbc-4b75-a6ee-a7ca740facd6"
      }, {
        "name": "ProductTopFeatures",
        "id": "ProductTopFeatures:orderable:59db9f73-9caa-48b2-9df9-da98413e7de8"
      }]
    }
  }
}

You can also have the ability to specify the children components of a component in the settings.json file. For example, the Header component which is set in the global scope is comprised of multiple bar components. For each child component you can specify their default settings.

{
  "pages" : {
    "global" : {
      "components" : {
        "Header" : {
          "components": {
            "AnnoucementBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75685": {
              "announcementBarMessage": {
                "value": "Announcement Bar",
                "type": "TEXTAREA",
              },
              "announcementBarHeight": {
                "value": 10,
                "type": "SLIDER"
              }
            },
            "AuxiliaryBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75686": {
              "auxBarHeight": {
                "value": 30,
                "type": "SLIDER"
              },
              "displayLanguageSwitcher": {
                "value": true,
                "type": "TOGGLE"
              }
            },
            "MainBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75687": {
              "logoHeight": {
                "value": 30,
                "type": "SLIDER"
              },
              "displayCart": {
                "value": true,
                "type": "TOGGLE"
              }
            },
            "PrimaryNavBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75688": {
              "navBarPadding": {
                "value": 5,
                "type": "SLIDER"
              },
              "navBarBackgroundColor": {
                "value": "#EAEAEA",
                "type": "COLORPICKER"
              }
            }
          },
          "orderableComponents" : [{
            "name": "AnnoucementBar",
            "id": "AnnoucementBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75685"
          }, {
            "name": "AuxiliaryBar",
            "id": "AuxiliaryBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75686"
          }, {
            "name": "MainBar",
            "id": "MainBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75687"
          }, {
            "name": "PrimaryNavBar",
            "id": "PrimaryNavBar:orderable:a34bf07d-1553-4e7d-86aa-c9ed2df75688"
          }]
        }   
      }
    }
  }
}

Finally, with the settings.json file, you can set the default content of your menus that can be consumed by your component.

{
  "menus": {
    "FOOTER_MENU": {
      "menuType": "MENU_LINK",
      "menu": [
        {
          "uuid": "50b2a008-d1df-42fa-9bdf-17a8446210d6",
          "title": {
            "value": "Company",
            "isLocalized": true,
            "type": "INPUT"
          },
          "link": {
            "value": "http://test?locale=en-us",
            "isLocalized": true,
            "type": "INPUT"
          },
          "type": "CUSTOM_LINK",
          "openInNewTab": true,
          "isVisible": true,
          "isDisabled": false,
          "children": [
            {
              "uuid": "89b4d743-b405-43a0-b6ab-9877fcdee455",
              "title": {
                "value": "Overview",
                "isLocalized": true,
                "type": "INPUT"
              },
              "link": {
                "value": "http://test?locale=en-us",
                "isLocalized": true,
                "type": "INPUT"
              },
              "type": "CUSTOM_LINK",
              "openInNewTab": false,
              "isVisible": true,
              "isDisabled": false
            },
            {
              "uuid": "e96e3929-2bea-4283-8139-9fee0053487c",
              "title": {
                "value": "Careers",
                "isLocalized": true,
                "type": "INPUT"
              },
              "link": {
                "value": "http://test?locale=en-us",
                "isLocalized": true,
                "type": "INPUT"
              },
              "type": "CUSTOM_LINK",
              "openInNewTab": false,
              "isVisible": true,
              "isDisabled": false
            },
            {
              "uuid": "03a90d85-ce76-4ba6-bafb-88abdd8e1bc6",
              "title": {
                "value": "Contact",
                "isLocalized": true,
                "type": "INPUT"
              },
              "link": {
                "value": "http://test?locale=en-us",
                "isLocalized": true,
                "type": "INPUT"
              },
              "type": "CUSTOM_LINK",
              "openInNewTab": false,
              "isVisible": true,
              "isDisabled": false
            }
          ]
        }
      ]
    }
  }
}

In the Layout Management section, we will explain to you how you can leverage the settings.json file to fill the PageOrderableContainer tag element with some default component(s).