Skip to main content

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​

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,
);
Was this page helpful?