Order

• 2-3 minutes to read

One more non-visual widget that is used to control the data that will be passed to the ecommerce-driver when the user finishes editing data, for example, download URLs, images, or custom data.

Most likely, you want to have this widget in every config you create.

Note, all the option values are passed to the e-commerce driver automatically.

General info

• type: order

Params

• images - an array of URLs to preview images, which should be stored along with the order in your e-commerce system. Most likely, these will be the proof images obtained from either Design Editor or Dynamic Image.
• downloadUrls - an array of links to print-ready files, which should be stored along with the order in your e-commerce system (typically, from Customer's Canvas).
• data - custom data (as a JSON object), which you may want to send to the order along with the images or download URLs. For example, it may be a Customer's Canvas stateId, etc.
• quantity - the number of ordered products. The default value is 1.

Why use this widget?

You may wonder, why doesn't the UI Framework pass all Customer's Canvas images to the e-commerce driver automatically?

Although a single Design Editor instance in the main step, plus several auxiliary steps, is the most common configuration of the multi-step editor, other options exist as well. For example:

• You may use several Design Editor instances in one editor (e.g. one editor for the postcard and another one for the envelope).
• You may create an editor without Design Editors at all - for example, based on Dynamic Image.
• You don't always want to pass all URLs from Design Editor to your e-commerce system. For example, you may want to have only a front page as a thumbnail of your product.

With this widget, you can implement all these scenarios.

Examples

Using Customer's Canvas images

The most popular config for this widget is receiving all images and PDF URLs from the Design Editor widget.

{
  "name": "order-details",
  "type": "order",
  "params": {
    "images": "{{$['editor'].proofImages}}",
    "downloadUrls": "{{$['editor'].hiResUrls}}",
    "data": {
        "stateId": "{{$['editor'].stateId}}"
    }
  }
}

Here, images and downloadUrls obtain the results of fulfilling the getHiResImages() method of the editor. Editor methods are usually called when steps are activated like this:

{
    ...
    "steps": [
        {
            "name": "design",
            "title": "1. Design",
            "mainPanel": { "name": "editor" }
        },
        {
            "name": "order",
            "title": "2. Order details",
            "mainPanel": { " name": "order-details" },
            "onActivate": "{{#function $['editor'].getHiResImages(800,800)}}"
        }
    ]
}

For more details, refer to the Design editor widget.

Mixing Customer's Canvas and Dynamic Image

For example, we are using Dynamic Image to generate an additional print file (e.g. for the imposition). In this case, we want to add the Dynamic Image URL to the list of Customer's Canvas results.

To do this, we just concatenate

{
    "widgets": [{
        "name": "pdf-request",
        "type": "ajax",
        "params": {
            // ... omitted to keep it brief.
        }
    },
    {
        "name": "order-details",
        "type": "order",
        "params": {
            "images": "{{$['editor'].proofImages}}",
            "downloadUrls": "{{$['editor'].hiResUrls.concat([$['pdf-request'].response]}}",
            "data": {
                "stateId": "{{$['editor'].stateId}}"
            }
        }
    }]
}