UI Framework
Customer's Canvas provides a powerful API for web-to-print solutions. You can easily integrate this API into any website or e-commerce platform no matter what server technology you use. On the other hand, some tasks - such as integration into e-commerce systems - are routine, and many of our customers have to implement very similar functionality over and over again.
To simplify this process, Aurigma has developed a new technology that helps connect Customer's Canvas with any e-commerce system with minimal effort. From a technical point of view, it is a series of JavaScript applications that we call the UI Framework. Unlike the Design Editor, which operates with PSD templates and images, the UI Framework is a higher-level application that works with product options, attributes, variants, etc. It knows as much about the product as your e-commerce system.
UI Framework
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.
The 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 Customer's Canvas flexibility and clarity even for non-programmers, no matter if you need a simple editor or a multistep wizard.
The UI Framework arranges the widgets in corresponding containers. The following image illustrates available containers:
- The Navigation panel allows for switching the steps.
- The Main panel holds a basic widget like the canvas, preview, or visual proofing tool.
- The Tool panel may include an option selector, context-dependent blocks, a gallery, or their combination.
- The Bottom panel allows you to enable additional widgets like a gallery.
So far the following widgets are supported:
- StaticText
- StaticImage
- Gallery
- Html
- Ajax
- Canvas
- Group
- Option
- Checkbox
- InputText
- Button
- FinishButton
- ImageCarousel
- Order
- Steps
There are no mandatory widgets, but without certain widgets, you will unlikely build a usable editor. Most likely, all your configs will contain Canvas, some Option widgets and you will configure the output from the editor through the Order widget. Use the ImageCarousel to organize a preview section.
Since the ordering process can be step-by-step, you need to associate required widgets in each of the containers with a step. For example:
- The first step: the Main panel displays the Design Editor, while the Tool panel displays color options.
- The second step: the Main panel displays an approval page, while the Tool panel displays delivery options.
For more details, you can refer to the UI Framework Tutorials.
Obtaining the Latest Product Editors
At the moment, the current Customer's Canvas distribution does not include the UI Framework. Please contact our support team for the actual version of this application. We will start publishing it on our website soon.