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 Cloud before they can be used in a widget. For details on this process, see the Developing Widgets guide.
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 the Developing Widgets guide for more information on the display.template
and widget.template
files and adding elements to them.