Create an element to display SKU properties

You can create an element that renders SKU properties, either custom or out-of-the-box, for a selected SKU. That element can then be used in a widget such as the Product Details widget on the Product Layout.

This section provides code samples for creating a sample element named sku-properties.

Note: Elements must be included in an extension and uploaded to Commerce before they can be used in a widget. For details on this process, see Understand widgets.

To create an element for displaying SKU properties, you need three files, element.js, template.txt, and element.json. The element.js file in this example defines a sku-properties element along with an onLoad function that, when the sku-properties element is loaded by a parent widget, creates an array of SKU properties for the selected SKU:

define(
['knockout'],
function (ko) {
  "use strict";
    return {
      // Name of the element
      elementName: 'sku-properties',

      // When the element is loaded by the widget, execute this function
      onLoad : function(widget) {
        var self = this;
        // Custom array named 'mySkuProps' that can be used within the
        // template.txt file
        self.mySkuProps = ko.computed(function() {
          var currentArray = [];
          // If and when the widget has a SKU selected
          if (widget.selectedSku()) {
            var currentSku = widget.selectedSku();
            // Access skuProperties from the product view model and
            // iterate over it to get the value for each SKU property
            for (var i=0; i < widget.product().skuProperties().length; i++) {
              var currentProperty = widget.product().skuProperties()[i];
              if (currentSku[currentProperty.id]) {
                // Add the property ID, label, and value to the array so
                // that they can be rendered by the template.txt
                currentArray.push({
                  'mylabel': currentProperty.label,
                  'myid': currentProperty.id,
                  'myvalue': currentSku[currentProperty.id]
                });
              }
            }
          }
          return currentArray;
        });
     }
  }
});

The template.txt file provides the HTML rendering code for the element. In this example, template.txt iterates over each entry in the custom SKU properties array and renders labels and values for them.

<div>
  <!--  ko if: initialized() && $data['sku-properties'] -->
      <!-- // Iterate over each entry in the mySkuProps array -->
      <!-- ko foreach: $data['sku-properties'].mySkuProps() -->
          <div>
              <b>
                 <!-- // Display labels, IDs, and values as needed -->
                 <span data-bind="text: mylabel"></span> (<span data-bind="text:
                    myid"></span>) : <span data-bind="text: myvalue"></span>
              </b>
          </div>
      <!-- /ko -->
  <!-- /ko -->
</div>

In this sample element.json meta-data file, the sku-properties element is made available for use by the Product Details widget:

{
 "inline" : true,
 "supportedWidgetType" : ["productDetails"],
 "translations" : [
 {
  "language" : "en_EN",
  "title" : "Sku Properties",
  "description" : "Displaying Sku Properties in the product details widget"
 }
 ]
}

In order to use the new element in a widget, you need to add some additional tags to the widget’s display.template and widget.template files that enable the element to be rendered as part of the output page and to be managed on the Design page. If the widget has already been broken into elements, you will, at a minimum, need to add an oc section tag for the new element:

<!-- oc section: sku-properties -->
    <div data-bind="element: 'sku-properties'"></div>
<!-- /oc -->

You may need to add other tags if the widget has not already been broken into elements. See Understand widgets for more information on the display.template and widget.template files and adding elements to them.