Cart

• 3 minutes to read

A widget that represents a shopping cart of your e-commerce system. It is similar to the Order widget, however, it allows working with multiple line items.

You can use this widget when you need to initialize several products in your editor and receive several orders, either of which is bound to a separate product.

This widget can be used instead of the Order widget.

Important

The widget must be configured so that it does not have undefined values. Good practice is to use || { } and || [ ] expressions, or use the getOrDefault helper.

getOrDefault(expression, defaultValue) - the first argument is a string to be evaluated, and the second argument is the default value that will be applied if the expression cannot be evaluated, or an error occurred while evaluating it.

Example of how to avoid undefined values

{
    "name": "cart",
    "type": "cart",
    "params": {
        "lineItems": [{
            "productIndex": 0,
            "images": "{{ getOrDefault(\"$['image-request'].response.results.map(x=>x.url)\",[]) }}",
            "downloadUrls": "{{ getOrDefault(\"$['imprint'].hiResUrls\",[]) }}",
            "data": {
                "stateId": "{{ getOrDefault(\"$['imprint'].stateId\",'') }}",
                "group": "{{ sessionGuid }}"
            }
        },
	...
}

Here, expressions in getOrDefault are enclosed in \" to represent strings.

General info

• type: cart

Params

• lineItems - an array of objects describing a line-item - a single order in the basket. Every line-item corresponds to an order:
  • productIndex - a product index in the driver.products array.
  • active - a Boolean value defining whether this line-item will be ordered or not.
  • images - an array of URLs to the images that should be stored along with the order in your e-commerce system. These are preview images obtained from either Design Editor or Dynamic Image.
  • downloadUrls - an array of the print-ready files that should be stored along with the order in your e-commerce system (typically, from Customer's Canvas).
  • quantity - the number of ordered products.
  • data - 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.

This widget is derived from AuBaseSelectorWidget and provides access to its value through _.

Example

{
    "name": "cart",
    "type": "cart",
    "params": {
        "lineItems": [{
                "productIndex": 0,
                "quantity": "{{  ($['quantity-selector'] || {} )._ || 1 }}",
                "active": true,
                "images": {
                    "{{ #concat }}": [
                        "{{ (($['editorOutside'] || {}).proofImageUrls || []).map(item=>item[0]) }}",
                        "{{ (($['editorInside'] || {}).proofImageUrls || []).map(item=>item[0])  }}"
                    ]
                },
                "downloadUrls": "{{ ((($['pdf-request'] || {}).response || {}).results || []).map(x=> x.url) }}",
                "data": {
                    "{{#merge}}": [{
                            "{{#if ((($['envelope'] || {})._  || {}).title || '').includes('return address') }}": {
                                "Envelope Text": "{{ $['editorEnvelope'].modifiedItem.value }}",
                                "Envelope Text font size": "{{ $['editorEnvelope'].modifiedItem.font.size }}",
                                "Envelope Text font postScriptName": "{{ $['editorEnvelope'].modifiedItem.font.postScriptName }}",
                                "Envelope Text color": "{{ $['editorEnvelope'].modifiedItem.color }}"
                            },
                            "{{#else}}": {}
                        },
                        {
                            "{{#if $['order-name']._}}": {
                                "Order Name": "{{$['order-name']._}}"
                            },
                            "{{#else}}": {}
                        },
                        {
                            "{{#if $['order-notes']._}}": {
                                "Notes": "{{$['order-notes']._}}"
                            },
                            "{{#else}}": {}
                        }
                    ]
                }
            },
            {
                "productIndex": 1,
                "quantity": 1,
                "active": "{{ ( ($['logo'] || {})._ || {}).title === 'Yes' }}",
                "images": [],
                "downloadUrls": [],
                "data": {}
            },
            {
                "productIndex": 2,
                "quantity": 1,
                "active": "{{ ( ($['signature'] || {})._ || {}).title !== 'No' }}",
                "images": [],
                "downloadUrls": [],
                "data": {}
            },
            {
                "productIndex": 3,
                "quantity": "{{ ($['quantity-selector'] || {} )._ || 0 }}",
                "active": "{{ ( ($['envelope'] || {})._ || {}).title !== 'No' }}",
                "images": "{{ (($['editorEnvelope'] || {}).proofImageUrls || []).map(item=>item[0]) }}",
                "downloadUrls": [
                    "{{ ($['editorEnvelope'] || {}).hiResUrls || [] }}"
                ],
                "data": {}
            }
        ]
    }
}