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-by-step sequence by composing your application with widgets, which act as building blocks from a configuration file. This makes Customer's Canvas more flexible, even for non-programmers, whether you need a simple editor or a multi-step wizard.
Widget Containers
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 design editor, preview, or preflight tool.
- The Tool panel may include an option selector, context-dependent blocks, a gallery or combination of these.
- The Bottom panel allows you to enable additional widgets like a gallery.
Widgets
The UI Framework implements the following widgets:
- Ajax
- Button
- DesignEditor
- Checkbox
- Gallery
- Group
- Html
- ImageCarousel
- InputText
- Option
- Order
- StaticText
- Steps
- and more
There are no mandatory widgets, but without certain widgets, it is unlikely that you will be able to build a usable editor. In most cases, all your configs will contain DesignEditor, some Option widgets, and you will configure the output from the editor through the Order widget. Use the ImageCarousel to organize a preview section.
Another important widget is Ajax. It allows for receiving data from a server, such as a list of images, dynamically generated images, or any other data you may need. Combined with StaticImage, you can update the image dynamically by using the REST API.
Steps
Since the ordering process can be a step-by-step process, 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.