PIM ajax

• Last updated on April 24, 2024
• •
• 2 minutes to read

This non-visual widget sends requests to a server and receives responses that can be used in other widgets. Unlike the Ajax widget, this one allows you to work with products based on options, which are created in the PIM module.

{
 "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.

{
    "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.

{
    "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.

{
    "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.

{
    "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[]	(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