The display.template
for the existing widget includes the following lines of code:
<div id="CC-customerProfile-profileDetails-section" class="row cc-customerProfile-profile-details" data-bind="template: { name: templateAbsoluteUrl( '/templates/customerProfileDetails.template') , templateUrl: ''}">
This code references another template file, customerProfileDetails.template
, that contains the code that is responsible for rendering the profile’s addresses:
<div class="col-sm-6" id="CC-customerProfile-shipping"> <div class="row cc-customerProfile-shipping-address" id="CC-customerProfile-shipping-details" data-bind="template: { name: templateAbsoluteUrl( '/templates/customerProfileShippingAddress.template') , templateUrl: ''}"></div> </div>
At a minimum, these lines of code in the customerProfileDetails.template
must be removed or commented out to prohibit shoppers from editing or adding addresses. However, this will also prevent the addresses from being displayed on the Profile Layout (note that the shopper can still see her addresses on the Checkout Layout and Checkout Layout with GiftCard pages). As an alternative, you can modify the customerProfileShippingAddress.template
referenced in this code to retrieve addresses from the account instead of the individual shopper.
If you choose to edit the customerProfileShippingAddress.template
file, you must remove any options in that file that edit or add new addresses. To display the addresses, you must use the organizationAddressBook
array from the UserViewModel
in place of the shippingAddressBook
array. For example, in the following code:
<div class="col-xs-12"> <!-- ko with: user --> <fieldset id="CC-customerProfile-edit-fields"> <legend class="cc-profile-legend-title" id="CC-customerProfile-shippingAddress-label"> <span data-bind="widgetLocaleText:'shippingAddressText'"></span> … … <!-- View Begins --> <div class="col-sm-10" id="CC-customerProfile-shippingAddress-view-region"> <!-- ko foreach: shippingAddressBook --> <!-- ko if: postalCode --> <address class="CC-customerProfile-shipping-address cc-customer-profile-shipping-address-view"> <div class="pull-right"> <!-- ko if: $parent.shippingAddressBook().length > 1 --> <button class="btn btn-default btn-sm" data-bind="click: $parents[1].handleSelectDefaultShippingAddress, disable: isDefaultAddress(), …
This line:
<!-- ko foreach: shippingAddressBook -->
Should change to:
<!-- ko foreach: organizationAddressBook -->
And this line:
<!-- ko if: $parent.shippingAddressBook().length > 1 -->
Should change to:
<!-- ko if: $parent.organizationAddressBook().length > 1 -->
After making the necessary code changes, you must create a new extension package to contain the widget and upload it to Oracle Commerce Cloud Service. To make the new extension package, you can copy the extension package from the original Customer Profile Widget, however, you must modify the widget directory name and the meta-data in the ext.json
and widget.json
files for your new widget. For more details, see Developing Widgets.