Printcart Designer

Live Demo

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

Installation

npm

npm install @printcart/design-tool-sdk

yarn

yarn add @printcart/design-tool-sdk

unpkg

<script src="https://unpkg.com/@printcart/design-tool-sdk"></script>

Usage

Using package:

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:

<script src="https://unpkg.com/@printcart/design-tool-sdk/dist/main.js"></script>

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

Options

token

• Required
• Type: string

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

productId

• Required
• Type: string

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

options

• 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.
• variantId: string | undefined - Open the Designer on this store variant (sent as variant_id; the Designer loads the variant's print sides). Since 1.7.0.
• selectedChoices: object | undefined - The buyer's picked option choices, e.g. { Wood: "Walnut" } (passed with the Designer settings). Since 1.7.0.
• locale: string | undefined - Buyer UI language, e.g. "en", "fr" or "fr-CA" (sent as locale; falls back to the browser language). Since 1.7.0.

Methods

render

Render and display Designer.

Example

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();
});

setVariant

Switch an open Designer to another variant without reloading it (for example when the buyer changes a colour or size on the product page). The next render() / editDesign() also opens on that variant. Since 1.7.0.

Example

designer.setVariant("variant-id", { Wood: "Cherry" });

close

Unmount and hide Designer.

Example

designer.close();

on

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

Example

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

Events

Exposed events that you can subscribe in your app:

rendered

Fired when Designer finish render and displayed to the screen.

Example

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

closed

Fired when Designer closed.

Example

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

render-finish

Fired when Designer fully loaded.

Example

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

upload-success

Parameters:

• response - Printcart API Response object for design upload.

Fired when all upload success.

Example

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

upload-error

Parameters:

• error - The error object from Printcart API Response.

Example

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

edit-success

Parameters:

• response - Printcart API Response object for design edit.

Example

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

edit

Fired when Designer enter edit mode.

Example

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