import { Meta } from '@storybook/addon-docs';

<Meta title="Docs/Customization/Settings file" />

# Settings File
<br />
In the `settings.json` file in your Plaza theme, you can set default components with their [schema](?path=/docs/docs-customization-schema--docs) 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](?path=/docs/docs-customization-layout-management--docs) container where you can set component(s) that can be managed in the Visual Editor.

```html
<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:

```js
{
  "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.

```js
{
  "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.

```js
{
  "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](?path=/docs/docs-customization-layout-management--docs) 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).
