---
title: "Product Class"
canonical: https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["4.4.25", "4.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Product Class

**Applies to:** Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · **Archived documentation**
 
A Customer's Canvas product.
 
## Methods
  
|  Name |  Description |
| --- | --- |
 |  [addSurface](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.addsurface.htm.md) |  Adds the given surface (page) to the product. |
 |  [addSurfaces](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.addsurfaces.htm.md) |  Adds a number of surfaces (pages) to the product. |
 |  [applyProductTheme](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.applyproducttheme.htm.md) |  Applies a color theme to the product. |
 |  [getAllItems](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.getallitems.htm.md) |  Lists all design elements in the product. |
 |  [getTags](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.gettags.htm.md) |  Reads product tags. |
 |  [getVariableItems](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.getvariableitems.htm.md) |  Lists all variable items in the product. |
 |  [removeSurface](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.removesurface.htm.md) |  Removes the given surface (page) from the product. |
 |  [setMockups](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.setmockups.htm.md) |  Sets mockups for several product pages. |
 |  [setSurfaces](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.setsurfaces.htm.md) |  Replaces a product. |
 |  [setTags](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.settags.htm.md) |  Specifies tags for the product. |
 |  [setUserId](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.setuserid.htm.md) |  Sets the user unique identifier and move user files to the user folder. For details, see the [Working with User Data](https://customerscanvas.com/docs/cc4/working-with-user-data.htm.md) topic. |
 |  [swapSurfaces](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.swapsurfaces.htm.md) |  Swaps two surfaces (pages) in the product. Returns the product instance where the surfaces (pages) were swapped. |
 |  [switchTo](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.product.switchto.htm.md) |  Opens the given product surface in the designer. Returns the product with the given surface (page) opened. |
 
## Properties
 
### currentSurface
 
currentSurface: [Surface](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.surface.htm.md)

A surface (page) currently opened in the editor.
  
 - example
     - ```
editor.getProduct()
    .then(function (product) {
        // Remove the current surface.
        product.removeSurface(product.currentSurface)
            .then(function(result) {
                console.log("Surface removed");
            });
    })
    // If there was an error thrown while removing the surface.
    .catch(function (error) {
        console.error("Removing the surface failed with exception: ", error);
    });
```
 
### id
 
id: string

A unique product identifier.
 
### name
 
name: string

A product name.
 
### surfaces
 
surfaces: [Surface](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.objectmodel.surface.htm.md) []

Product surfaces (pages).
  
 - example
     - ```
editor.getProduct()
    .then(function (product) {
        // Get the current surface index.
        const indexOfCurrentSurface = product.surfaces.lastIndexOf(product.currentSurface);
        if (indexOfCurrentSurface < 0)
            throw "Surface not found!";

        let indexOfNextSurface = indexOfCurrentSurface + 1;
        if (indexOfNextSurface > (product.surfaces.length - 1))
            indexOfNextSurface = 0;

        // Switch to the next surface.
        return product.switchTo(product.surfaces[indexOfNextSurface]);
    })
    .then(function(result) {
        console.log("Surface switched");
    })
    .catch(function (error) {
        console.error("Switching the surfaces failed with exception: ", error);
    });
```
 
### userId
 
userId: string

A user identifier.
  
 - example
     - ```
editor.getProduct()
    .then(function (product) {
        // Name your product.
        product.name = "Summer photos";
        console.log("Current user: " + product.userId + ", product name: " + product.name + ", product id: " + product.id);
    });
```