TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Getting started with UI Framework

Download

To download the UI Framework, just run:

npm install @aurigma/ui-framework

The package is already compiled and bundled so there is no need to re-build it.

If you don't want to install it locally, you can use jsdelivr CDN:

https://www.jsdelivr.com/package/npm/@aurigma/ui-framework

Load the editor on a page

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://cdn.jsdelivr.net/npm/@aurigma/ui-framework";
      import moduleLoader from "https://cdn.jsdelivr.net/npm/@aurigma/ui-framework/dist/moduleLoader.js";
      document.addEventListener('DOMContentLoaded', async () => {

        // See https://customerscanvas.com/support/ui-framework/working-with-ecommerce-driver.md
        // for more details.
        const prodRequest = await fetch('./sample/product.json');
        const product = await prodRequest.json();

        // See https://customerscanvas.com/support/ui-framework/readme.md 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}/dist/drivers/default-driver.js`)).ecommerceDriver;
        let editor = (await moduleLoader.dynamicImportDefault("editor", `${uiFrameworkBaseUrl}/dist/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:

  1. Create a div element, which will be a container for the editor.
  2. The editor is loaded to the page using the moduleLoader script, which allows for dynamically importing of ES6 modules.
  3. All modules are located by the location you configure with the uiFrameworkBaseUrl variable. Since the import keyword in JavaScript only supports string literals, you have to duplicate the URL there as well.
  4. There are two JSON objects you have to prepare to pass to the editor - the product and the config. In this demo, they are hardcoded. However, in a real-life application, you should either send them from the back end or create them dynamically.
    • The product contains a definition of the product from the e-commerce 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 that has no real useful function, but keeps the explanation brief. See the Introduction to UI Framework and other documentation articles to learn how to create more useful configs.
  5. You should load a couple of UI Framework modules (an e-commerce driver and the editor) and initialize them using the driver.init(...) method where you pass the product, config, and some other data. After that, you are using the renderEditor method where you pass the container element you created in Step 1.
  6. To get the information from the editor when the user finishes editing, you can subscribe to the onSubmitted event handler. Other events also exist.