Order

One more non-visual widget which is used to control the data which 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 ecommerce driver automatically.

General info

  • type - order

Params

  • images - an array of URLs to the images which should be stored along with the order in your ecommerce 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 ecommerce system (typically, from Customer's Canvas).
  • data - a custom data (as a JSON object) 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.

Why using this widget?

You may wonder why the editor does not pass all Customer's Canvas images to the ecommerce driver automatically?

Although a single Customer's Canvas on a main step plus several auxiliary steps is the most often configuration of the multistep 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 ecommerce 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 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 for brevity
        }
    },
    {
        "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