Class: PrintArea

A print area.

Example

  // Initialize a product with the "card.psd" template and a channel container.
  const productDefinition = {
      surfaces: `[{
          printAreas: [{
              name: "postcard",
              designFile: "card",
              containers: [{
                  name: "foil",
                  type: "texture",
                  texture: "texture.jpg"
              }]`
          }]
      }]
  };

  // Load the editor.
  const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
  // Get the product.
  let product = await editor.getProduct();
  // Get the fourth container in a print area.
  product.currentSurface.printAreas[0].getContainers()[3]
      // Update this container with new parameters.
      .update({
          name: "SilverTexture",
          texture: "silver-texture.jpg"
      });

Extends

• ModelComponent

Constructors

Constructor

new PrintArea(rawPrintArea, surface): PrintArea

Parameters

rawPrintArea

surface

Surface

Returns

PrintArea

Overrides

ModelComponent.constructor

Properties

id

id: string

A unique identifier.

Inherited from

ModelComponent.id

---

name

name: string

The item name.

Inherited from

ModelComponent.name

---

containers

containers: Container[] = []

An array of channel containers for print embellishments.

Example

// Initialize a product with the "card.psd" template and two channel containers.
const productDefinition = {
  surfaces: [
    {
      printAreas: [
        {
          name: "postcard",
          designFile: "card",
          containers: [
            {
              name: "foil",
              type: "texture",
              texture: "texture.jpg",
            },
            {
              name: "spot",
              type: "spotColor",
              previewColor: "rgba(255,255,0,1)",
            },
          ],
        },
      ],
    },
  ],
};

Methods

getContainer()

getContainer(name): Container

Gets a container by its name.

Parameters

name

string

A name of the container.

Returns

Container

Example

// Load the editor.
const editor = await CustomersCanvas.IframeApi.loadEditor(
  iframe,
  productDefinition,
);
// Get the product.
let product = await editor.getProduct();
// Display a container with the "foil" name.
console.log(product.currentSurface.printAreas[0].getContainer("foil"));

---

getContainers()

getContainers(): Container[]

Gets an array of all containers in the print area.

Returns

Container[]

An array of all containers in the print area. By default, each print area has three basic containers in the editor: Background, Main, and Foreground.

Example

// Load the editor.
const editor = await CustomersCanvas.IframeApi.loadEditor(
  iframe,
  productDefinition,
);
// Get the product.
let product = await editor.getProduct();
// Display obtained containers.
console.log(product.currentSurface.printAreas[0].getContainers());

---

addContainer()

addContainer(containerDefiniton): Promise<Container>

Adds a channel container to the print area.

Parameters

containerDefiniton

IChannelContainerDefinition

A container to add.

Returns

Promise<Container>

An instance of the added container.

Example

// Initialize a product with the "card.psd" template.
const productDefinition = {
  surfaces: ["card"],
};

// Load the editor.
const editor = await CustomersCanvas.IframeApi.loadEditor(
  iframe,
  productDefinition,
);
// Get the product.
let product = await editor.getProduct();
// Add a container to the print area.
product.currentSurface.printAreas[0].addContainer({
  name: "foil",
  type: "texture",
  texture: "texture.jpg",
  // Expects a translated string for the FOIL key in translations.json.
  translationKey: "ObjectInspector.FOIL",
});

---

insertContainer()

insertContainer(containerDefiniton, index): Promise<Container>

Inserts a channel container into the print area.

Parameters

containerDefiniton

IChannelContainerDefinition

A container to add.

index

string | number

A position of this container in the array of containers, either numeric or string value (a value greater than two). For example, "3".

Returns

Promise<Container>

An instance of the inserted container.

Example

// Specify a container definition of a spot color.
const containerDefinition = {
  name: "spot",
  type: "spotColor",
  previewColor: "rgba(0,255,0,1)",
};
const containerIndex = 4;

// Load the editor.
const editor = await CustomersCanvas.IframeApi.loadEditor(
  iframe,
  productDefinition,
);
// Get the product.
let product = await editor.getProduct();
// Insert a container.
product.currentSurface.printAreas[0].insertContainer(
  containerDefinition,
  containerIndex,
);

---

removeContainer()

removeContainer(index): void

Removes a channel container from the print area.

Parameters

index

number

An index of the container to be removed (a value greater than two). Note that you cannot remove basic containers: Background, Main, or Foreground.

Returns

void

Example

// Load the editor.
const editor = await CustomersCanvas.IframeApi.loadEditor(
  iframe,
  productDefinition,
);
// Get the product.
let product = await editor.getProduct();
// Remove the fourth container.
product.currentSurface.printAreas[0].removeContainer(3);
// Display the remaining containers.
console.log(product.currentSurface.printAreas[0].getContainers());

---

moveContainer()

moveContainer(initialIndex, destinationIndex): Container

Moves a channel container to a new position in the array of containers.

Parameters

initialIndex

number

An index of the channel container to be moved (a value greater than two).

destinationIndex

number

A new index of the container to be moved (a value greater than two).

Returns

Container

An instance of the moved container.

Example

const containerIndex = 4;
const destinationIndex = 3;

// Load the editor.
const editor = await CustomersCanvas.IframeApi.loadEditor(
  iframe,
  productDefinition,
);
// Get the product.
let product = await editor.getProduct();
// Move a container.
product.currentSurface.printAreas[0].moveContainer(
  containerIndex,
  destinationIndex,
);