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.
The ordering and personalization process can be organized on a step-by-step basis. For example, your users may:
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.
The UI Framework arranges the widgets in corresponding containers. The following image illustrates available containers:
The UI Framework implements the following widgets:
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.
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:
For more details, you can refer to the UI Framework Tutorials.