Create the widget template file
With the exception of global widgets, all widgets require a template file, called display.template
, in the /widget/<widget-type>/templates
directory.
The file takes the following structure:
<extension-name> : the root folder of your extension
ext.json
widget/
<widget-type>/
widget.json
templates/
display.template
The template is rendered within the context of the widget and should be written as straight HTML with no surrounding script tag. All knockout bindings and behavior are available in the HTML template code.
Note: Additional templates are required if you want to fragment your widget into elements. See Fragment a widget into elements for more details.
The following is an example of the Loyalty Payment widget’s template file:
<!-- ko if: ($data.paymentsContainer().isLoyaltyEnabled() &&
((CCRestClient.profileType == CCConstants.PROFILE_TYPE_AGENT &&
$data.user().selectedPriceListGroup().currency &&
$data.user().selectedPriceListGroup().currency.currencyType ==
CCConstants.LOYALTY_POINTS_PAYMENT_TYPE)
|| (CCRestClient.profileType != CCConstants.PROFILE_TYPE_AGENT &&
$data.cart().currency && $data.cart().currency.currencyType ==
CCConstants.LOYALTY_POINTS_PAYMENT_TYPE))) -->
<div id="loyaltyPayment">
<!-- oc layout: panels -->
<div class="oc-panel" data-oc-id="panel-1">
<!-- oc section: select-redeem-points -->
<div data-bind="element: 'select-redeem-points'"></div>
<!-- /oc -->
</div>
<!-- /oc -->
</div>
<!-- /ko -->