TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Order

One more non-visual widget which 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 of Customer's Canvas or the resulting images of the PsdWebService.
  • downloadUrls - an array of the 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 Customer's Canvas 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 Customer's Canvas instances in one editor (e.g. one editor for the postcard and another one for the envelope).
  • You may create an editor without Customer's Canvas at all - for example, based on PsdWebService.
  • You don't always want to pass all URLs from Customer's Canvas 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 Customer's Canvas widget.

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

Mixing Customer's Canvas and PsdWebService images

For example, we are using PsdWebService to generate an additional print file (e.g. for the imposition). In this case, we want to add the PsdWebService 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": "{{$['customers-canvas'].proofImages}}",
            "downloadUrl": "{{$['customers-canvas'].hiResUrls.concat([$['pdf-request'].response]}}",
            "data": {
                "stateId": "{{$['customers-canvas'].stateId}}"
            }
        }
    }    
    ]
}

See also