Order

• Last updated on December 29, 2023
• •
• 1 minute to read

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 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 have 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	Array	An array of URLs to preview images	empty array
downloadUrls	Array	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 сustom 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