The ordering and personalization process can be organized on a step-by-step basis. For example, your users may:
- Edit the front side of the product.
- Select an envelope.
- Edit the back side.
- Specify any order options.
Even more complicated workflows may exist.
UI-framework allows you to implement such a step sequence by composing your application from widgets like from building blocks in a configuration file. That allows for the flexible Customer's Canvas even by non-programmers, no matter if you need a simple editor or a multi-step wizard.
To download the UI Framework, just run:
npm install @aurigma/ui-framework
The package is already compiled and bundled, there is no need to re-build it.
If you don't want to install it locally, you can use Azure CDN:
https://staticjs-aurigma.azureedge.net/ui-framework/latest
Starting with UI Framework 4.0, you should load the editor to the page as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<style>
.editor-container {
padding-top: 16px;
height: 90vh;
}
</style>
<title>UI Framework Sample</title>
</head>
<body>
<div class="container-fluid">
<div id="editor-container" class="editor-container"></div>
<script type="module">
const uiFrameworkBaseUrl = "https://staticjs-aurigma.azureedge.net/ui-framework/latest";
import moduleLoader from "https://staticjs-aurigma.azureedge.net/ui-framework/latest/moduleLoader.js";
document.addEventListener('DOMContentLoaded', async () => {
// See https://customerscanvas.com/dev/editors/ui-framework/ecommerce-driver.html
// for more details.
const prodRequest = await fetch('./sample/product.json');
const product = await prodRequest.json();
// See https://customerscanvas.com/dev/editors/ui-framework/overview.html for
// the syntax explanation and widget reference.
const confRequest = await fetch('./sample/config.json')
const config = await confRequest.json();
let driver = (await moduleLoader.dynamicImport("ecommerceDriver", `${uiFrameworkBaseUrl}/drivers/default-driver.js`)).ecommerceDriver;
let editor = (await moduleLoader.dynamicImportDefault("editor", `${uiFrameworkBaseUrl}/editor.js`)).editor;
// Don't forget to specify actual link to your instance of Customer's Canvas as a value of customersCanvasBaseUrl
let ecommerce = await driver.init(product, editor, config, /* settings */ { customersCanvasBaseUrl: "" }, /* restore data */ null, /*quantity*/ 1, /* user info*/ { id: 'test-user' });
ecommerce.products.current.renderEditor(document.getElementById("editor-container"));
// How to receive data from the editor after the user finishes editing it
ecommerce.cart.onSubmitted.subscribe(function (data) {
console.log("submitted");
data.lineItems.forEach(function (order) {
console.log(order);
})
});
});
</script>
</body>
</html>A few comments on this:
- Create a div element which will be a container for the editor.
- The editor is loaded to the page using the moduleLoader script which allows dynamically importing of ES6 modules.
- All modules are located from the location you configure with the
uiFrameworkBaseUrlvariable. Since theimportkeyword in JavaScript supports only string literals, you have to duplicate the URL there as well. - There are two JSON object you have to prepare to pass to the editor - the product and the config. In this demo they are harcoded, however, in a real-life application you should either send them from back end or create dynamically.
- The product contains a definition of the product from the ecommerce system. See the Working With E-commerce Driver article for details.
- The config describes the user interface and the behavior of the editor. This sample illustrates the simplest possible config which does nothing for brevity. See the Introduction to UI Framework and other documentation articles to learn how to create more useful configs.
- You should load a couple of UI Framework modules (ecommerce driver and the editor) and initialize them using the
driver.init(...)method where you pass product, config, and some other data. After that you are using therenderEditormethod where you pass the container element you created on the step 1. - To get the information from the editor when the user finishes editing, you can subscribe for the
onSubmittedevent handler. Other events also exist.