This topic dwells on how to customize the product loading screen in the Design Editor. While a product is loading, there are three moments that may confuse a user:
The listed 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.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. --> <script id="CcIframeApiScript" type="text/javascript" src="https://{yourInstanceUrl}/Resources/Generated/IframeApi.js"> </script> </head> <body> <!-- The iframe to display the editor in. --> <iframe id="editorFrame" width="100%" height="800px"></iframe> </body> </html> <script> var editor = null; // Defining the product. let productDefinition = { surfaces: ["postcard"] }; // Configuring the preloader messages in the editor's config. let editorConfig = { preloader: { firstTimeMessage: "Wait a moment. The product is being configured for the first launch.", errorMessage: "An error occurred!" } }; // Loading the editor. CustomersCanvas.IframeApi.loadEditor(document.getElementById("editorFrame"), productDefinition, editorConfig) // 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."
appears 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.
You may want to change the appearance of the standard preloader, for example, change the default icon, colors, or animation. In this case, you need to customize the styles.
If you build the Design Editor from source code, you can change the styles of the standard preloader in the \src\design-editor-iframe-api\LoadMask\LoadMask.less
file. For example, to display a new image, define the .icon-cc-logo:before style in either LoadMask.less
or your custom CSS file as follows:
.icon-cc-logo:before { background-image: url('logo.svg'); background-position: 0 0; display: block; height: 100px; width: 100px; content: "" !important; }
If you have a cloud version or a compiled on-premises version, then you can develop a custom preloader:
let editorConfig = { preloader: { enabled: false } };
~\Configuration\customCss\
subfolder.<link rel="stylesheet" href="https://{yourInstanceUrl}/Configuration/customCss/loader.css" />
let editorConfig = { customStyle: "loader", preloader: { enabled: false } };
For reference, you can download a code sample illustrating a custom preloader.