@aurigma/design-atoms

Aurigma Customer's Canvas - Design Atoms SDK

Design Atoms is a part of Customer's Canvas SDK which allows manipulating individual elements of a design edited in Customer's Canvas web-to-print editor. If you think of Customer's Canvas editor as a browser, you may consider Design Atoms as a DOM API.

For example, you may import a template to Customer's Canvas, then use Design Atoms to iterate all items, find, say, text elements named, say, Name and change its value. Or you can create a brand new design and pass it to Customer's Canvas.

Important! This package won't work alone. Design Atoms consists of a frontend part (this package) and a backend part (search for a package called Aurigma.CustomersCanvas.DesignAtoms in NuGet). To be able to use Design Atoms, you need to connect it to a backend. See below for details.

Getting started

Install Design Atoms frontend library

Just run

npm install @aurigma/design-atoms --save

As soon as you finish, you may import it to your project and start using it.

import { Product } from "@aurigma/design-atoms";

let product = new Product(100,100);
// ...  

However, to be able to use it in a full force, you need to connect it with a backend.

There are two main ways to get a backend - create your own backend using the Aurigma.CustomersCanvas.DesignAtoms NuGet package or hook it to an existing Customer's Canvas instance.

Creating a custom backend

This way is a good option if you don't need the editor but rather need to manipulate designs through the JavaScript/TypeScript or C# code and render the result in your application. Also, it is a way to go if you want to create a custom editor based on CanvasViewer control. Another purpose is to handle the output from Customer's Canvas in a separate application.

To do it, you need to create a .NET Web API project, add a reference to Aurigma.CustomersCanvas.DesignAtoms NuGet package and expose the necessary endpoints.

There is a NuGet package, which contains a sample backend implementation. You can get it as follows:

$ TBD ...

It will download a sample solution which contains all necesssary controllers and more information how it works. You can use it as a separate object or merge it with your existing ASP.NET application.

Connecting to Customer's Canvas

This way is much easier to start with - all you need to have is a running instance of Customer's Canvas version 5 or higher. It is a great solution when you want to use Customer's Canvas as an editor and all you want to do is to modify the design opened in Customer's Canvas through your JavaScript/TypeScript code.

To connect to Customer's Canvas, just add this code:

...

After that you may pass the items or product model to Customer's Canvas as follows:

...

What's next?

Refer Customer's Canvas documentation for more details how to use this package:

https://customerscanvas.com/docs/cc/