---
title: "PIM ajax | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/pim-ajax/"
---

# PIM ajax

> This non-visual widget sends requests to a server and receives responses that can be used in other widgets.
> Unlike the [ajax](https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/ajax.md) widget, this one allows you to work with products based on options, which are created in the [PIM module](https://customerscanvas.com/docs/hub/admin-guide/pim.md).

```json
{
  "name": "product-request",
  "type": "pim-ajax",
  "params": {...}
}
```

## Requests

The `pim-ajax` widget can return mockups, designs, and variants in a single request. To select the requested objects, specify them in the `settings`. You can choose one object, any two, or all three at once. Options will also be returned by default.

In the following example, we defined the `pim-ajax` widget getting only `designs` from the server.

```json
{
    "name": "pim-ajax",
    "type": "pim-ajax",
    "params": {
        "settings": {
            "designs": {
                "enabled": true
            }
        }
    }
}
```

## Events

You can specify callback functions that will work when your request completes successfully or fails. In `eventsCallbacks` you can define different `onError` and `onSuccess` callbacks for `options`, `mockups`, `designs`, and `variants`.

```json
{
    "name": "pim-ajax",
    "type": "pim-ajax",
    "params": {
        "settings": {
            "designs": {
                "enabled": true
            }
        },
        "eventsCallbacks": {
            "designs": {
                "onError": "{{ #function(err) console.warn(err); }}",
                "onSuccess": "{{ #function(response) console.warn(response); }}"
            }
        }
    }
}
```

## SKU

The `currentSku` property keeps the SKU of a product variant. It allows a customer to see the price.

Here, SKU is obtained from the `pim-design-selector` widget. If the value is `undefined`, then `currentSku` will be set to `null`.

```json
{
    "name": "pim-ajax",
    "type": "pim-ajax",
    "params": {
        "currentSku": "{{ $['pim-design-selector']._?.sku ?? null }}",
        "settings": {
            "designs": {
                "enabled": true
            }
        }
    }
}
```

## Choices

This parameter returns a key-value pairs, where a key is an `optionId`, and a value is a single value or an array representing the `optionValue`. Options and their values will be the filters for design variants.

```json
{
    "name": "pim-ajax",
    "type": "pim-ajax",
    "params": {
        "choices": "{{ $['pim-options']._ }}",
        "currentSku": "{{ $['pim-design-selector']._?.sku ?? null }}",
        "settings": {
            "designs": {
                "enabled": true
            }
        }
    }
}
```

## Getters

You can use the following getters to obtain necessary data from the widget response.

| Getter | Data |
|--|--|
| `$['pim-ajax'].options`|options|
| `$['pim-ajax'].designs`|designs|
| `$['pim-ajax'].mockups`|mockups|
| `$['pim-ajax'].variants`|variants|
| `$['pim-ajax'].costDetails`|price details|
| `$['pim-ajax'].price`|price|
| `$['pim-ajax'].summary`|details about current state of options|

## Params
 
| Name | Type | Description | Default value |
|--|--|--|--|
| `productID`|number|_(Optional)_. ID of a selected product|undefined|
| `productVersionId`|number|_(Optional)_. ID of a product version|undefined|
| `productLinkId`|number|_(Optional)_. ID of a product link|undefined|
| `options`|[ProductInformationOption](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-pim-options.IOptionsConfig/)[]|_(Optional)_. Filter for product options |empty array|
| `choices`|map|_(Optional)_. Product options and their values|undefined|
| `settings`|object| Defines the content of data types a request. `mockups`\| `designs`\| `variants`. | |
| `settings.<data>.enabled`|boolean|Enables a request in `settings` |`false`|
| `settings.<data>.skip`|number|Defines page offset from beginning of the result list. |undefined|
| `settings.<data>.take`|number|Defines how many items of sorted result list will be taken|undefined|
| `settings.<data>.productFilterId`|number|Defines a filter based on product filter with the specified ID |undefined|
| `eventCallbacks`|object|Callback functions for `OnSuccess` and `onError` events |null|