Tagging designs

• 1 minute to read

You may want to tag your products with related details. Design Editor supports two types of these details. First, you can provide them as PDF metadata in the hi-res output. Also, you can add tags as keywords to your product that can improve the product design process in the web-to-print editor.

PDF metadata

Design Editor allows you to save five properties in PDF hi-res outputs:

• Author
• Creator
• Keywords
• Subject
• Title

You can both predefine these properties prior to loading the editor and specify them at runtime.

To predefine metadata, set up the hiResOutputPdfMetadata object for rendering through either the clientConfig.json file or the IPdfMetadata interface:

// Initialize the editor with the "Postcard.psd" template.
productDefinition = {
    surfaces: ["Postcard"]
};

// Set up PDF metadata.
configuration = {
    rendering: {
        hiResOutputPdfMetadata: {
            title: "The red postcard",
            keywords: "red,flower,postcard"
        }
    }
};

CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);

The setPdfMetadata and getPdfMetadata methods allow working with PDF metadata at runtime.

Tags

To pass attributes, which you may need at the moment of processing the ordered product, you can use tags. Design Editor provides two ways of defining these tags: by using the Web API and IFrame API.

The Product.setTags method allows you to specify tags through the IFrame API. To read these tags, use the Product.getTags method. The following example shows how you can set product tags.

// The product is a postcard with a flower image in red colors.
var newTags = ["red", "flower", "postcard"];

editor.getProduct()
    .then(function (product) {
        product.setTags(newTags)
        .catch(function (error) {
            console.error("Setting tags failed with exception: ", error);
        });
    });

Here, you classify the product by the palette, image, and type.

Let us look at how you can set up mockups based on product tags at runtime. In the following example, we set up a foreground mockup for photos and a background mockup for cups.

var frameMockup = {
    // Set up the foreground mockup "photoFrame.psd".
    up: "photoFrame"
}

var cupMockup = {
    // Set up the background mockup "paperCup.psd".
    down: "paperCup"
}

editor.getProduct()
    .then(function (product) {
        product.getTags()
        .then(function (tags) {
            if (tags != null) {
                // Set up the background mockup for cups.
                if (tags.indexOf("cup") != -1) {
                    product.currentSurface.setMockup(cupMockup);
                }
                // Set up the foreground mockup for photos.
                if (tags.indexOf("photo") != -1) {
                    product.currentSurface.setMockup(frameMockup);
                }
            }
        })
        .catch(function (error) {
            console.error("Getting tags failed with exception: ", error);
        });
    });