Printcart Designer

Live Demo

Embeb Printcart Designer to your web application with our simple JS SDK.

Installation

npm

``bash
npm install @printcart/design-tool-sdk
`

yarn

`bash
yarn add @printcart/design-tool-sdk
`

unpkg

`

`

Usage

Using package:

`js
import PrintcartDesigner from "@printcart/design-tool-sdk";

const designer = new PrintcartDesigner({
token: "your-printcart-unauth-token",
productId: "your-product-id",
options: {},
});
`

Using CDN-hosted copy of the library:

`js



`

Options

$3

- Required
- Type: string

Your Printcart Unauth Token. You can get your token from your Printcart Dashboard.

$3

- Required
- Type: string

The Product ID that you want to assign the designer to.

$3

- Optional
- Type: object | undefined

Provide options to config the Designer UI and locale.

Parameters

- processBtnBgColor: _string | null_ - Change the Process button background color.
- logoUrl: _string | null_ - Add your branding logo to Designer.

Methods

$3

Render and display Designer.

Example

`js
const designer = new PrintcartDesigner({
token: "your-printcart-unauth-token",
productId: "your-product-id",
});

var openDesignerButton = document.getElementById("your-button-id");

openDesignerButton.addEventListener("click", function () {
designer.open();
});
`

$3

Unmount and hide Designer.

Example

`js
designer.close();
`

$3

Subscribe to an Designer event. See below for full list of events.

Example

`js
designer.on("upload-success", callback);
`

Events

Exposed events that you can subscribe in your app:

$3

Fired when Designer finish render and displayed to the screen.

Example

`js
designer.on("rendered", function () {
console.log("Designer opened.");
});
`

$3

Fired when Designer closed.

Example

`js
designer.on("closed", function () {
console.log("Designer closed.");
});
`

$3

Fired when Designer fully loaded.

Example

`js
designer.on("render-finish", function () {
console.log("Designer rendered.");
});
`

$3

Parameters:

- response - Printcart API Response object for design upload.

Fired when all upload success.

Example

`js
designer.on("upload-success", function (response) {
console.log("Response:", response);
});
`

$3

Parameters:

- error - The error object from Printcart API Response.

Example

`js
designer.on("upload-error", function (error) {
console.log(error);
});
`

$3

Parameters:

- response - Printcart API Response object for design edit.

Example

`js
designer.on("edit-success", function (response) {
console.log("Response:", response);
});
`

$3

Fired when Designer enter edit mode.

Example

`js
designer.on("edit", function () {
console.log("Designer on edit mode");
});
``