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);
});
});