Getting started

• 1 minute to read

To configure the Preflight Tool, you must first specify a container for this tool.

<main class="main">
  <div class="editor-parent" id="editor-parent"></div>
</main>

Then, you need to configure this tool. For example, you can load the default configuration from the config.json file.

import moduleLoader from "./ui-framework/4.23.15/moduleLoader.js";
const config = await moduleLoader.loadJson("./config.json");

When you open this file, it may look as follows:

{
    "showSteps": true,
    "widgets": [
        {
            "name": "preflight",
            "type": "preflight",
            "params": {
                "config": {
                    "language": "en",
                    "backendUrl": "",
                    "startFromUploader": true,
                ...
            }
        }
    ],
    "steps": [
        {
            ...
        }
    ]
}

In Preflight Tool how-tos, you can learn how to change the configuration for the most frequent use-case scenarios. If you have deployed the front end to a separate server, you must specify a back-end URL in the backendUrl parameter, for example:

// The address of your preflight server.
config.vars.backendUrl = "https://pt.example.com";

After that, you can load the editor and e-commerce driver.

// Load modules.
const driverImportData = await moduleLoader.dynamicImport("ecommerceDriver", "./ui-framework/4.23.15/drivers/default-driver.js");
const editorImportData = await moduleLoader.dynamicImportDefault("editor", "./ui-framework/4.23.15/editor.js");

// Get the editor and driver instances.
const editor = editorImportData.editor;
const driver = driverImportData.ecommerceDriver;

Then, initialize the driver and display the editor in the container.

const ecommerce = await driver.init(product, editor, config, settings, null, quantity, user);
ecommerce.products.current.renderEditor(document.getElementById("editor-parent"));

To retrieve URLs that link to print files, you must subscribe to the onSubmitted event, which will be called when the user finishes editing.

ecommerce.cart.onSubmitted.subscribe(data => {
    alert('Open console to see URLs to the preview images and print files');
    data.lineItems.forEach(function(order) {
        console.log("Print files: ", order.downloadUrls);
        console.log("Previews: ", order.images);
    });
});