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 -->