Layout Management

Layout Management is a feature available in Plaza theme that enables you to manage multiple components in a page container element. Through the page container element, you can add default components to your theme for any storefront page. Then, in the Theme Editor, a Marketplace Manager can add, delete, and reorder components inside the page container element.

Example

For example, you might want a Carousel and a Slider component on the home page. Inside your home.html file in the content/pages/home theme folder, you would add this tag element anywhere in your page:

<PageOrderableContainer name="PageOrderableContainer" id="PageOrderableContainer1"></PageOrderableContainer>

This element sets a page container section on the home page.

Next, in the settings.json file of your current theme, specify which components you want to include in the page container section:

export const settings = {
    "pages" : {
      "home" : {
        "components" : {
          "Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c" : {
            "backgroundColor" : {
              "value" : "#fff",
              "type" : "COLORPICKER"
            },
            "slides" : {
              "value" : [ {
                "contentType" : "IMAGE_WITH_TEXT",
                "slideData" : {
                  "slideName" : "Product Demo",
                  "buttonLabel" : "Request Demo",
                  "title" : "AppInsights",
                  "text" : "AppInsights provides real-time insights through visualization tools that will drive your company towards digital transformation",
                  "image" : {
                    "type" : "IMAGE_UPLOADER",
                    "filename" : "AppInsights_image632x370.jpg",
                    "url" : "https://d33na3ni6eqf5j.cloudfront.net/fdaaa076-7fe6-4f59-83a0-e8f76067f0ce/99348845-a0ba-4aeb-89ca-61eb426430f1.jpg"
                  },
                  "textAlignment" : "left",
                  "textSize" : "small",
                  "slideLink" : "https://www.appdirect.com/products/appinsights/request-demo-appinsights",
                  "imagePosition" : "right",
                  "backgroundColor" : "#fff"
                }
              }, {
                "contentType" : "IMAGE_ONLY",
                "slideData" : {
                  "slideName" : "Product Promotion",
                  "title" : "One searchable view across all of your enterprise content",
                  "text" : "Secured end-to-end and at rest with AES-256 bit encryption. Users can only search content they have permission to access.",
                  "image" : {
                    "type" : "IMAGE_UPLOADER",
                    "filename" : "AppWise_image.jpg",
                    "url" : "https://d33na3ni6eqf5j.cloudfront.net/5dd60cb8-8d15-4cec-b6bd-1a85ae666f76/05da8a68-5d65-40d3-a68e-a043e800989e.jpg"
                  },
                  "textSize" : "medium",
                  "slideLink" : "https://www.appdirect.com/products/appwise/features/integrations",
                  "textColor" : "#fff",
                  "imageSizing" : "fill",
                  "backgroundColor" : "#707070"
                }
              } ],
              "type" : "SLIDES"
            },
            "delay" : {
              "value" : "5",
              "type" : "DROPDOWN"
            },
            "isDisplayCarets" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "isAutorotate" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "caretsColorTheme" : {
              "value" : "dark",
              "type" : "DROPDOWN"
            },
            "isDisplayDots" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "isDisplayCaretsOnHover" : {
              "value" : true,
              "type" : "TOGGLE_CHECK"
            },
            "height" : {
              "value" : "400",
              "type" : "DROPDOWN"
            }
          },
          "Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69" : {
            "layout" : {
              "value" : "square",
              "type" : "RADIO"
            },
            "productsList" : {
              "value" : {
                "contentType" : "dynamic",
                "queries" : {
                  "sort" : "ALPHABETICAL"
                }
              },
              "type" : "PRODUCTS_LIST"
            },
            "maxRows" : {
              "value" : "2",
              "type" : "RADIO"
            },
            "size" : {
              "value" : "small",
              "type" : "RADIO"
            },
            "borderRadius" : {
              "value" : 8,
              "type" : "SLIDER"
            },
            "quickviewDisplayOptions" : {
              "value" : [ "isScreenshotVisible" ],
              "type" : "CHECKBOX"
            },
            "quickviewViewMode" : {
              "value" : "default",
              "type" : "DROPDOWN"
            },
            "sliderTitle" : {
              "value" : "uieditor.home.Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69.sliderTitle",
              "isLocalized" : true,
              "type" : "INPUT"
            },
            "sliderOptions" : {
              "value" : true,
              "type" : "TOGGLE"
            },
            "tileBackgroundColor" : {
              "value" : "#EAEAEA",
              "type" : "COLORPICKER"
            },
            "quickviewOptions" : {
              "value" : [ "isQuickviewVisible" ],
              "type" : "CHECKBOX"
            },
            "displayOptions" : {
              "value" : [ "isDescriptionVisible", "isRatingsVisible" ],
              "type" : "CHECKBOX"
            },
            "buttonLabel" : {
              "value" : "uieditor.home.Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69.buttonLabel",
              "isLocalized" : true,
              "type" : "INPUT"
            }
          }
        },
        "orderableComponents" : [ {
          "name" : "Carousel",
          "id" : "Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c"
        }, {
          "name" : "Slider",
          "id" : "Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69"
        } ]
      }
    }
}

As you can see, for each component that you want to add to the container, you need to follow this pattern for the component ID:

{componentName}:orderable:{uuid}

componentName: The component exported name.

uuid: A generated UUID. You can generate whatever UUID you want.

For example, to add a Carousel to the container, you can identify the component with this unique ID:

Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c

Finally, there is an orderableComponents array that you need to fill with the components that you want to manage in the container for a given storefront page. Make sure to use the same component ID that you declared previously for that page. Here is what the array would look like for the previous example:

"orderableComponents": [
    {
      "name": "Carousel",
      "id": "Carousel:orderable:c06a8060-3014-49c8-80a4-18995de16c3c"
    },
    {
      "name": "Slider",
      "id": "Slider:orderable:906daff8-d299-42ba-b873-91bf4798ba69"
    }
]

Integration with the Theme Editor

In order to manage the layout with the Theme Editor, you need to package the theme using sfb-toolkit package. Then, upload the theme .zip file with the Theme Manager so you can customize it with the Theme Editor.

As you can see below in the screenshot, in the components list on the home page you see the components that you set as default for the PageOrderableContainer in the settings.json file. They are easily identified with a drag handle icon because those components can be reordered between them.

When a page contains a PageOrderableContainer section, an "Add" icon appears in the top right of the components list. This means that you can add more components to the PageOrderableContainer section.

Finally, when you hover the mouse over an "orderable" component, a trash icon appears, which indicates that you can delete the component.

In summary, layout management is a powerful feature in the Plaza theme. It enables Marketplace Managers to dynamically add components in the Theme Editor if the theme developer has set a PageOrderableContainer element in the page. Also, Marketplace Managers can reorder and delete components.