Order

This non-visual widget controls the data that will be passed to the e-commerce system when the customer finishes the personalization process.

{
  "name": "order-details",
  "type": "order",
  "params": { ... }
}

Let's see how you can pass the data within this widget.

Images

After the customer finishes the personalization process, you first need to take the design preview from the design-editor widget to use it in the e-commerce shopping cart. To do so, you render proof images as described in the editor widget and pass their URLs in the images property as follows:

{
  "name": "order-details",
  "type": "order",
  "params": {
    "images": "{{$['editor'].proofImageUrls}}"
  }
}

Download

You also need to provide print files. They can be downloaded using the URLs stored in the hiResUrls property of the editor. You can pass them as downloadUrls as follows:

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

Data

In the data, you can pass any custom data to the order created in the e-commerce system. For example, it can be the stateId parameter.

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

Props

Using the props object, you can add a link to the design, order description, and service data to the project created for that order in Customer's Canvas. For example, you can pass a private design as the pair of _stateId and _userId. The service data in _fields has arbitrary names.

{
  "name": "order-details",
  "type": "order",
  "params": {
    "images": "{{$['editor'].proofImages}}",
    "downloadUrls": "{{$['editor'].hiResUrls}}",
    "props": {
      "_stateId": [ "{{ $['editor'].stateId }}" ],
      "_userId": "{{ $['editor'].userId }}",
      "_fields": {
        "Notes": "{{ $['text-block']._ }}",
        "Number of copies": 10,
        "Email notification": "orders@example.com"
      }
    }
  }
}

Params

Name	Type	Description	Default value
images	string[]	An array of URLs to preview images	empty array
downloadUrls	string[]	An array of the print-ready files	empty array
data	object	(optional) Data passed to the e-commerce system	empty object
props	object	(optional) Data passed to the Customer's Canvas as project properties, which are available in the onSubmitting callback	empty object
customPrice	number	(optional) A custom price for the order	0
quantity	number	(optional) The number of products ordered	1
sku	string	(optional) An identifyer of a product variant; related only to the PIM module products	empty string