@aurigma/ui-framework/docs/reference/classes/auwidgetorder.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Class: AuWidgetOrder

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

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

## Hierarchy

* AuBaseInvisibleWidget

  ↳ **AuWidgetOrder**

## Implements

* [IWidget](../interfaces/iwidget.md)

## Index

### Properties

* [customPrice](auwidgetorder.md#customprice)
* [data](auwidgetorder.md#data)
* [downloadUrls](auwidgetorder.md#downloadurls)
* [images](auwidgetorder.md#images)
* [logRequest](auwidgetorder.md#logrequest)
* [params](auwidgetorder.md#params)
* [props](auwidgetorder.md#props)
* [quantity](auwidgetorder.md#quantity)
* [sku](auwidgetorder.md#sku)
* [useBackOffice](auwidgetorder.md#usebackoffice)

### Accessors

* [template](auwidgetorder.md#static-template)

### Methods

* [checkInitDependenciesWidgets](auwidgetorder.md#checkinitdependencieswidgets)
* [resetPreloaderState](auwidgetorder.md#resetpreloaderstate)
* [showPreloader](auwidgetorder.md#showpreloader)
* [showToast](auwidgetorder.md#showtoast)

## Properties

###  customPrice

• **customPrice**: *number*

The custom price for the order.

___

###  data

• **data**: *Object*

Custom data.

___

###  downloadUrls

• **downloadUrls**: *Array‹string›*

An array of the print-ready files.

___

###  images

• **images**: *Array‹string›*

An array of URLs to preview images.

___

###  logRequest

• **logRequest**: *boolean* = false

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

___

###  params

• **params**: *[IOrderConfig](../interfaces/iorderconfig.md)*

*Implementation of [IWidget](../interfaces/iwidget.md).[params](../interfaces/iwidget.md#optional-params)*

*Overrides [AuBaseWidget](aubasewidget.md).[params](aubasewidget.md#params)*

Properties of the widget.

___

###  props

• **props**: *Object*

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

___

###  quantity

• **quantity**: *number*

The number of ordered products.

___

###  sku

• **sku**: *string* = ""

___

###  useBackOffice

• **useBackOffice**: *boolean* = false

Flag indicates if driver should perform some backOffice actions

## Accessors

### `Static` template

• **get template**(): *HTMLTemplateElement*

*Inherited from void*

**Returns:** *HTMLTemplateElement*

## Methods

###  checkInitDependenciesWidgets

▸ **checkInitDependenciesWidgets**(): *string[]*

*Inherited from [AuBaseWidget](aubasewidget.md).[checkInitDependenciesWidgets](aubasewidget.md#checkinitdependencieswidgets)*

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

**Returns:** *string[]*

___

###  resetPreloaderState

▸ **resetPreloaderState**(): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[resetPreloaderState](aubasewidget.md#resetpreloaderstate)*

**Returns:** *void*

___

###  showPreloader

▸ **showPreloader**(`isPreload`: boolean, `message`: string | string[], `timeout`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showPreloader](aubasewidget.md#showpreloader)*

Shows a preloader.

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

**Parameters:**

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

**Returns:** *void*

___

###  showToast

▸ **showToast**(`data?`: string, `duration?`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showToast](aubasewidget.md#showtoast)*

Shows a toast.

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

**Parameters:**

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

**Returns:** *void*