Override AngularJS controllers

The general rule of thumb is that if there are no changes to the objects passed to and from the API, then create the customizations in frontend JavaScript (such as AngularJS controllers). If the objects from the API need to be changed or extended, then the customization should take place in the handlers.

In this article, the use case is that the BillTo should always be used for both BillTo and ShipTo addresses. This means that when users who are assigned to BillTo and ShipTo records should not be provided the choice to select the ShipTo address for the current session.

1. Add a new TypeScript file to the Scripts\Custom folder of the web project Name: custom.selectcustomer.controller.ts

2. Copy the contents of the insite.selectcustomer.controller.ts file located in the Scripts\App\Account folder

3. Paste the content of the insite.selectcustomer.controller.ts into the new custom.selectcustomer.controller.ts file

4. Change the controller definition to extend the base controller of SelectCustomerController as follows:

   C#

   export class CustomSelectCustomerController extends SelectCustomerController
   

5. Delete the properties and methods of the CustomSelectCustomerController except for setCustomer()

6. Change the setCustomer() method to use the billto for both parameters.

   C#

   this.sessionService.setCustomer(this.billTo.id, this.billTo.id).then((result: SessionModel) => {
     this.sessionService.redirectAfterSelectCustomer(result, 
       this.cart.canBypassCheckoutAddress,
       this.dashboardUrl, this.returnUrl, this.checkoutAddressUrl, 
       this.reviewAndPayUrl);
   }, 
   error => {
     this.errorMessage = error.message;
   });
   

7. Override the SelectCustomerController set for the module

   C#

   angular
   .module("insite")
   .controller("SelectCustomerController", CustomSelectCustomerController);
   

8. Save the changes. The resulting custom.selectcustomer.controller.ts should look like this:

   TypeScript

   module insite.account {
       "use strict";
   
   export class CustomSelectCustomerController extends SelectCustomerController {
   
           setCustomer() {
               if (!this.billTo) {
                   return;
               }
               this.sessionService.setCustomer(this.billTo.id, this.billTo.id).then((result: 
   SessionModel) => {
                   this.sessionService.redirectAfterSelectCustomer(result,
   this.cart.canBypassCheckoutAddress,
                       this.dashboardUrl, this.returnUrl, this.checkoutAddressUrl,
   this.reviewAndPayUrl);
               }, error => {
                  this.errorMessage = error.message;
                   });
           }
   
       }
   
   angular
       .module("insite")
       .controller("SelectCustomerController", CustomSelectCustomerController);
   }
   

9. Go to [theme]\Views\Directives\Account and edit the SelectCustomerView.cshtml view. If your derived theme does not contain that view or folder structure, create it. Also, if the SelectCustomerView.cshtml does not exist in your derived theme copy and contents from the base theme.

10. Remove the following select-step div for the Ship To:

    XML

    <div class="select-step select-ship-step" ng-show="vm.billTo">         
      <label for="selectShipTo">@T("Select Ship To")</label>         
      <select name="selectShipTo" 
              class="shipto-selector" 
              id="selectShipTo"
              ng-model="vm.shipTo"
              ng-options="shipTo.label for shipTo in vm.billTo.shipTos">
        <option value="">@T("Select Ship To")</option>         
      </select>
    </div>
    

11. Save the changes and go to the Sign In page of the Configured Commerce website. Login with a user that has been assigned multiple customer records. If a user does not exist with multiple customers, create one. Using the sample data, you can use the three Addison custom records for test purposes.