Populating designs with user info

4 minutes to read

Load User Info Feature

Imagine your user is customizing a series of different products requiring them to enter the same information into the fields. Filling out each product from scratch is drudgery. Fortunately, Design Editor supports the pre-populating of fields with data loaded from the customer's account. For example, suppose the e-commerce system stores first and last names, phone numbers, and email addresses in user accounts. We can make Design Editor pre-populate these fields in user generated products:

On demand: enable the Load my info button either in clientConfig.json globally or through the IConfiguration interface for a single product.
```
"loadUserInfoButtonEnabled": true
```
After that, when the page opens or reloads, the Load my info button appears in the user interface.
Automatically on product load: enable the autoLoadUserInfo feature either in clientConfig.json globally or through the IConfiguration interface for a single product.
```
"autoLoadUserInfo": true
```
In this case, when a product is loaded into the editor, it is already populated with data; the Load my info button is not displayed in the user interface.

Populating Products with Predefined Data

The data used to populate a product should be loaded from your e-commerce system and passed to the loadEditor method as a part of the editor configuration.

var productDefinition = {
    surfaces: [ "business-card" ]
};

var configuration = {
    autoLoadUserInfo: true,
    userInfo: {
        "FirstName": "Jon",
        "LastName": "Snow",
        "Phone": "0123456789",
        "Email": "jon.snow@example.com",
        "Photo": "https://example.com/jon.snow.jpg",
        "Slogan": "<p><span style='bold:true;color:green'>Only premium printing</span></p><p>always</p>",
        "Barcode": {
            "BarcodeFormat": "QR_CODE",
            "BarcodeSubType": "Url",
            "Url": "https://example.com"
        }
    }
};

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

The userInfo property accepts data in the JSON format, where keys are layer names (without markers) or in-string placeholder names in PSD templates. For example:

If a layer name is "FirstName<LC>", the corresponding key is "FirstName".
If a layer contains the Position: [#Your_Position] in-string placeholder, the corresponding key is "Your_Position".
If a layer is an image placeholder named <PH>Logo, the corresponding key is "Logo". Values for images and image placeholders contain details about the image location:
- If the target image is stored in the user folder, then the value should contain the user: prefix; for example, the following key-value pair "Logo": "user:myLogo.jpg" tells the editor to fill the Logo image placeholder with the myLogo.jpg from the user folder.
- If the target image is stored in the public folder, then the value contains the public: prefix; for example, the following key-value pair "Logo": "public:car_logos/ford.jpg" tells the editor to fill the Logo image placeholder with the ford.jpg logo from the \car_logos\ subfolder of the public image folder.
- If the target image is stored on the Web, then the value should contain either http: or https: protocol name; for example, the following key-value pair "Logo": "http://example.com/company.svg" tells the editor to fill the Logo layer with the company.svg image by the direct URL.
If a layer is a barcode placeholder named <BPH> Barcode, the corresponding key is "Barcode". Values for barcode placeholders are objects whose properties depend on the barcode format.

For populating a product with predefined data, Design Editor matches layer names and in-string placeholder names against keys passed in the userInfo dictionary. If a layer or a placeholder has a match, its value is replaced with a corresponding value from the dictionary.

Note that rich formatted text elements accept data in a special format defining paragraphs through the <p> tag and text styles through <span>. In the previous example, the Slogan layer consists of two paragraphs, and the first paragraph contains the bold green text. For details about paragraph and text formatting, you can refer to the specification of the Aurigma Graphics Mill library.

Passing User Data for a Single Product Page

The previous example illustrates how you can predefine userInfo for the entire product. Also, Design Editor allows you to pass user data for a single product page by using the surfaces object. You can refer to a page through its name or index starting from 0.

// Defining a multipage product.
var productDefinition = {
    surfaces: { designFolder: "brochure" }
};

var userInfo = {
    // The default content.
    "Name": "Jon Snow",
    "Phone": "18005551234",
    // The content for specific surfaces (pages).
    "surfaces": {
        // The content for the "surface_0" page.
        "surface_0": {
            "Name": "Christopher Bennett",
            "Phone": "18005551255"
        },
        // The content for the third page.
        "2": {
            "Name": "John Wood",
            "Phone": "18005551011"
        }
    }
};

Passing User Data to the Loaded Editor

Warning

This method is time-consuming. For optimization, you can populate a product template when it is loading into the Design Editor with autoLoadUserInfo enabled.

You may want to pass user data to a product at runtime. The Editor.loadUserInfo() method allows you to populate a product template with user data. Pass the data dictionary as its parameter to populate the template with the required values. The data dictionary has the same structure as userInfo. You can also call this method without parameters; in this case it applies the userInfo set when the Design Editor has initialized.

...
// Load the web-to-print editor.
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration)
.then(function (e) {
    // Retrieve the loaded editor.
    editor = e;
});
...
// Populate the product with user data.
editor.loadUserInfo({"FirstName": "Jon", "LastName": "Snow", "Phone": "0123456789", "Email": "jon.snow@example.com"});