Understand APIs for accessing SKU properties

SKU properties, both custom and out-of-the-box, are returned as part of the ProductViewModel.

Any widget that has access to the ProductViewModel can access SKU properties from it. Widgets that do not have access to the ProductViewModel can access SKU properties via the viewModels/SkuPropertiesHandler module.

A call to either of these APIs returns an array of SKU properties. Each item in the array consists of a property definition for a SKU property, including ID, label, type, and so on. Note that the values for the properties are returned as part of the child SKU objects, so you must make a call to one of the APIs to determine what SKU properties exist and then call the SKU objects themselves to get the values for those properties. For example, if a custom SKU property called upcCode exists, your widget can retrieve the value for the property for each child SKU object from the ProductViewModel as shown in the example below (assuming your widget has access to the ProductViewModel):

<div><span data-bind="text: product().childSKUs()[0].upcCode"></span></div>

As with other product properties, SKU properties can be any of five types:

• Short text
• Rich text
• Number
• Date
• Checkbox

To correctly display a SKU property’s value, you must take into account the type of property being handled.

Access SKU properties from the ProductViewModel

Any widget that has access to the ProductViewModel can access SKU properties from it, for example:

widget.product().skuProperties()[0].label

This code snippet returns the label for each SKU property, both custom and out-of-the-box, defined in the SKU properties array.

Access SKU properties using SkuPropertiesHandler

The viewModels/SkuPropertiesHandler module provides access to SKU properties for any widgets that do not have access to the ProductViewModel. The viewModels/SkuPropertiesHandler module must be imported by a widget in order for the widget to call its methods, which are described below.

SkuPropertiesHandler.getBase

This method returns property definitions for both custom and out-of-the-box SKU properties created for the Base Product, for example:

viewModels/SkuPropertiesHandler.getBase(targetArray, successCallbackFunction,errorCallbackFunction)

Required arguments include:

• targetArray: An observable array in the UI element that is populated with the properties to be displayed.
• successCallbackFunction: (Optional) The function that is called on success.
• errorCallbackFunction: (Optional) The function that is called on error.

SkuPropertiesHandler.getCustom

This method returns property definitions for any custom SKU properties created for the specified productType, for example:

viewModels/SkuPropertiesHandler.getCustom(targetArray, productType,successCallbackFunction, errorCallbackFunction)

If there are no custom SKU properties defined, this method does not populate targetArray.

Required arguments include:

• targetArray: An observable array in the UI element that is populated with the properties to be displayed.
• productType: The name of the product type (for Base Product, this value is product.)
• successCallbackFunction: (Optional) The function that is called on success.
• errorCallbackFunction: (Optional) The function that is called on error.

SkuPropertiesHandler.getAll

This method returns property definitions for both custom and out-of-the-box SKU properties created for both the Base Product as well as the specified productType, for example:

viewModels/SkuPropertiesHandler.getAll(targetArray, productType,successCallbackFunction, errorCallbackFunction)

Required arguments include:

• targetArray: An observable array in the UI element that is populated with the properties to be displayed.
• productType: The name of the product type (for Base Product, this value is product.)
• successCallbackFunction: (Optional) The function that is called on success.
• errorCallbackFunction: (Optional) The function that is called on error.