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 Commerce Cloud. 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.
