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.