The Product Loading Screen

This topic dwells on how to customize the product loading screen in Customer's Canvas. While a product is loading, there are three moments that may confuse a user:

The first launch of a product is usually time-consuming, and if users are not warned about this, they may be confused. So, it is a good idea to ask users to wait and tell them that the product will load faster on the second and following launches.
The second and following product loads are also not instantaneous and displaying a message explaining that the system is working and a product is loading can help to avoid unwanted actions like page refreshing.
Sometimes errors happen, and if this is the case, the related message has to be displayed in order to inform a user about the error.

These cases can be handled using the loadEditor method that accepts the preloader object as an optional configuration parameter. Using this parameter, you can display custom messages when a product is loading. The following example shows how this works.

HTML

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js">
    </script>
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
    <script id="CcIframeApiScript" type="text/javascript" src="http://example.com/Resources/SPEditor/Scripts/IFrame/IframeApi.js">
    </script>
</head>

<body>
    <!-- The iframe to display the editor in. -->
    <iframe id="editorFrame" width="100%" height="800px"></iframe>
</body>
</html>

<script>

    var editorFrame = $("#editorFrame");

    var editor = null;

    // Defining the product.
    productDefinition = {
        surfaces: ["postcard"]
    };

    // Configuring the preloader.
    preloaderConfig = {
        preloader: {
            firstTimeMessage: "Wait a moment. The product is being configured for the first launch.",
            errorMessage: "An error occurred!"
        }
    };

    // Loading the editor.
    CustomersCanvas.IframeApi.loadEditor(editorFrame[0], productDefinition, preloaderConfig)
        // If the product is successfully loaded into the editor, you can refer to the instance.
        .then(function (e) {
        editor = e;
    });
</script>

Here, we configure the preloader object. The firstTimeMessage property specifies what message is shown for the first launch of a product. If it is not set, then "The product is being configured for the first time. It may take a while." message is shown by default. The errorMessage property specifies what message is shown if an exception is thrown while loading the product.

Also, preloader has the enabled property that shows or hides this preloader. It is true by default.

To change the default icon of the preloader, you need to customize styles:

In the on-premises version, open the \Resources\Libs\loadmask\LoadMask.less file and change the @preloaderColor variable to specify a color. To set a new image, define the .icon-cc-logo:before style as follows:
CSS
```
.icon-cc-logo:before {
  background-image: url('img/logo.png');
  background-position: 0 0;
  display: block;
  height: 105px;
  width: 100px;
  content: "" !important;
}
```
In the hosted version, place the loader.css file from the downloads to the \Configuration\customCss\ subfolder and include a link to this file in your file from where you load the editor:
```
<link rel="stylesheet" href="http://localhost/Configuration/customCss/loader.css" />
```

The Product Loading Screen

See Also

Manual

IFrame API Reference

Downloads