---
title: "au-widget-order/au-widget-order | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-order.au-widget-order/"
---

# au-widget-order/au-widget-order

> A widget that is used to control the data that will be passed to the e-commerce driver when the user finishes editing data.

## Classes

### AuWidgetOrder

For details, you can refer to the [Order widget](https://customerscanvas.com/dev/ui-framework/widgets/order.html) topic.
```json
{
  "widgets": [
    {
      "name": "order-details",
      "type": "order",
      "params": {
        "images": "{{$['editor'].proofImages}}",
        "downloadUrls": "{{$['editor'].hiResUrls}}",
        "data": {
          "stateId": "{{$['editor'].stateId}}"
        },
        "props": {
          "_hidden": {},
          "_fields": {},
        }
      }
    }
  ]
}
```

#### Constructors

##### Constructor

```ts
new AuWidgetOrder(): AuWidgetOrder;
```

###### Returns

[`AuWidgetOrder`](#auwidgetorder)

###### Inherited from

```ts
AuBaseInvisibleWidget.constructor
```

#### Properties

##### customPrice

```ts
customPrice: number;
```

The custom price for the order.

##### data

```ts
data: Object;
```

Custom data.

##### downloadUrls

```ts
downloadUrls: string[];
```

An array of the print-ready files.

##### images

```ts
images: string[];
```

An array of URLs to preview images.

##### logRequest

```ts
logRequest: boolean = false;
```

Send submit request to logging service if true (shopify-only)

##### params

```ts
params: IOrderConfig;
```

Properties of the widget.

###### Overrides

```ts
AuBaseInvisibleWidget.params
```

##### props

```ts
props: Object;
```

Custom properties. They don't appear in the order, but are available in the `onSubmitting` callback.

##### quantity

```ts
quantity: number;
```

The number of ordered products.

##### sku

```ts
sku: string = "";
```

##### useBackOffice

```ts
useBackOffice: boolean = false;
```

Flag indicates if driver should perform some backOffice actions

#### Accessors

##### template

###### Get Signature

```ts
get static template(): any;
```

###### Returns

`any`

###### Inherited from

```ts
AuBaseInvisibleWidget.template
```

#### Methods

##### checkInitDependenciesWidgets()

```ts
checkInitDependenciesWidgets(): string[];
```

Returns an array of widget names, due to which the current widget cannot receive parameters.

###### Returns

`string`[]

###### Inherited from

```ts
AuBaseInvisibleWidget.checkInitDependenciesWidgets
```

##### resetPreloaderState()

```ts
resetPreloaderState(): void;
```

###### Returns

`void`

###### Inherited from

```ts
AuBaseInvisibleWidget.resetPreloaderState
```

##### showPreloader()

```ts
showPreloader(
   isPreload, 
   message?, 
   timeout?): void;
```

Shows a preloader.

```
"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]
```

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `isPreload` | `boolean` | `undefined` | If `true`, enables the preloader. |
| `message` | `string` \| `string`[] | `...` | A text message that appears next to the preloader. |
| `timeout` | `number` | `5` | - |

###### Returns

`void`

###### Inherited from

```ts
AuBaseInvisibleWidget.showPreloader
```

##### showToast()

```ts
showToast(data?, duration?): void;
```

Shows a toast.

```
return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data?` | `string` | A string message to display in the toast. |
| `duration?` | `number` | Defines how long to show the toast for. |

###### Returns

`void`

###### Inherited from

```ts
AuBaseInvisibleWidget.showToast
```

## References

### widget

Renames and re-exports [AuWidgetOrder](#auwidgetorder)