This is an old documentation. Go to the latest Customer's Canvas docs

Product Layouts

In the context of the Design Editor, a product layout is a PSD file containing text, image placeholders, shapes, and other design elements. Your users can change layouts at runtime. To rearrange design elements on the canvas, you can just open a PSD template in the Asset Manager.

Applying the Product Layouts

When changing layouts, the Design Editor only moves text and image placeholders to new positions and removes other design elements from your product by default. The Design Editor changes layouts in the following way:

  1. Saves the content of text elements and image placeholders of the current product page.
  2. Removes design elements that are not prohibited from being deleted by markers.
  3. Pastes elements of the new layout into the current product page.
  4. Pastes the saved content into the new placeholders.

First, the Design Editor changes the content of placeholders having the same layer names in the current page and in the new layout. After that, the rest of the placeholders take their content in a random order according to their type. If the old layout had more placeholders than the new layout, then extra placeholders are removed.

The background and foreground layers, marked with <FG> or <BG>, remain unchanged. If you need to keep the position and content of design elements, apply the <ROLC_f> marker to them. By applying the <ROLC_t> marker to text and image placeholders, you allow them to be removed if the new layout does not contain enough appropriate placeholders.

Adding the Layout Tab

To open layouts in the Asset Manager, you need to prepare PSD files, add them to a subfolder of the ..\assets\images\ folder, and configure an asset source in the clientConfig.json file.

The Toolbox supports the default action Layout, which allows your users to open the Asset Manager and apply any PSD file as a layout. However, in most cases, you will need to fine-tune a source with layouts. The following example configures the Toolbox and an asset source so that they contain only the required Layouts.

json
{
    "assetSources": {
        "Layouts": {
            "type": "PublicSource",
            // Display only PSD files.
            "allowedExtensions": [ "psd" ],
            "rootCategory": {
                // Specify a folder in ../assets/images.
                "name": "Layouts",
                // Specify a subfolder containing the layout templates.
                "categories": [{ "name": "VerticalLayouts" }]
            }
        }
    },
    "widgets": {
        "Toolbox": {
            // Create the Layout button in the Toolbox.
            "buttons": [{
                "translationKey": "Toolbox.LAYOUTS",
                "translationKeyTitle": "Toolbox.TITLE_LAYOUTS",
                "iconClass": "cc-icon-layout",
                // Set the Layout action to merge layouts.
                "action": "Layout",
                // Refer to the tab in the Asset Manager.
                "tabs": [ "Layouts" ]
            }]
        },
        "AssetManager": {
            "tabs": [{
                "name": "Layouts",
                "assetSourceInstance": "Layouts",
                // Specify the appearance of categories.
                "controls": {
                    "categoriesEnabled": false
                }
            }]
        }
    }
}

As a result, this Layouts tab will only display PSD files from the VerticalLayouts subfolder.

As an alternative to changing layouts through the user interface, you can use the IFrame API. For details, refer to the setPrintAreas method.

See Also

Manual

IFrame API Reference